診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

物販系サイトの作り方 Part2 

それでもテーブルは必要か

前回22日の記事 『物販系サイトの作り方』では、『物販系サイトではより多くの商品を見せるために、複数の商品を横に並べて陳列する必要がある』という話をした。解決策として、スタイルシートで float と margin を使って左右に並べることにした。ただし、これは左右二列まで、3列以上並べるとちょっと苦しい。やっぱりテーブルを使いたくなってくる。


さらに商品には画像がつきものとなるが、画像とテキストをキレイに並べようとすると、これまたテーブルが欲しくなる。画像のサイズを揃え、テキストの行数と文字数をそろえれば、テーブルなしでも何とか並ぶと思うが現実的ではない。やっぱりテーブルは必要なのか。(この件 継続審議)

印刷にも問題がある

左にナビ、本文に商品を横に複数陳列すると、横のサイズが、ナビで150px、商品画像が150px、テキストが150px として、商品2列でも750px になる。これでは、A4縦の用紙に印刷できるサイズ 640pxを超えてしまう。このまま印刷すると、右側が切れてしまう。

複数の商品の購入を検討している場合は一覧ページを印刷したい。企業が購入を検討している場合、商品ページと会社案内のページは稟議を提出するために印刷する必要がある。こんな時、右側が切れたページでは都合が悪いだろう。

印刷用には別のスタイルを適用する

画面では750pxで表示して、印刷の場合は640px 以内に収めれば、この問題は解決する。

別々にスタイルシートを作り、画面と印刷で使い分けてもいいが、結構面倒となる。通常のスタイルシートに印刷時のスタイルを追加定義して置けばよい。

body で文字サイズをテンポイントに固定した。

    @media print {
      body {
        font-size: 10pt;
      }
    }

これでは窮屈なので、印刷では左のナビをカットする。
    @media print {
      body {
        font-size: 10pt;
      }
      #leftNavi {
        display:none;
      }
    }

商品が1個300px なので、2個で600px。これならA4縦に入る。

最後にまた問題が

これでOKと思ったら、印刷結果が変わらない。右が切れ、左ナビもカットされていない。悩んでいたら、ハッと気がついた。よくやるミスだった。

スタイルシートはカスケーディング

CSS の C は、カスケーディング の C である。スタイルシートはHTMLと同様に上位のタグへのスタイルから書き、メンテナンスを考えて、テキストや罫線の色は末尾に書くよう習慣づけている。ただ今回の印刷スタイルは bodyタグへのスタイルだったので、ついファイルの上部に書いてしまった。ところが、その後ろには、ナビへのスタイルが書かれているために、後のスタイルが優先して適用されていた!。気がつけば簡単なこと。しかし、よくやるミスだった。反省。



[2005-12-27] ウェブ講座&SEO | TB(1) | CM(1)

本年も宜しくお願い致します

松本のやなぎや ル・ソールの降旗です。
明けましておめでとうございます。
昨年は、ほとんどブログにもネットショップの講習にもついていけないような状態でしたが、今年は先生方のご指導を生かして、何とか1月中にショップをオープンさせたいと思います。
ZUKUDASUの皆様にもついていけるように頑張ります。

本年もご指導の程、宜しくお願い申し上げます。

本年も
[ 編集 ] [2006/01/01 21:30]

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/60-d1a2b5fe


億万長者の村の特集です。---公的資金の得方

    初めて読む人は最初から読んで下さい。 {{{  ●タダでもらえる公的資金をゲットしよう! }}}   '''☆高齢・障害者雇用支援機構'''    '''継続雇用制度奨励金'''    〓もらえる人、企業。     
[2005/12/28 14:21] URL 億万長者の村






トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。