【XHTML＋CSS】03_CSSセッティング
CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。
CSSファイルの分割のメリットは「効率化」
初期セッティングがしやすい
リセットスタイルや定番のレイアウトスタイルを使い回すことができる。
カテゴリーごとやページごとで違ったデザインにしやすい
CSSはあとから読み込んだもので上書きすることができるので、まず共通のスタイルを読み込んだあとで、カテゴリーやページごとに用意した別のスタイルで上書きを行うことができる。
CSSの差し替えや削除が簡単
2カラムか3カラムか、サイドバーは右か左か、幅は固定か可変かなど、ある程度決まったレイアウトパターンごとのCSSファイルを作っておけば、必要に応じて差し替えるだけでレイアウト変更が可能になる。また、キャンペーンページなど一定期間が終われば丸ごと無くなるようなコンテンツの場合、そのページ固有のスタイルを別CSSファイルにまとめておくことで、CSSファイルごと削除すれば済む。
layout.css
- layout-2col.css
- layout-2col-liquid.css
- layout-3col.css
- layout-3col-liquid.css
複数のスタッフで作業しやすい
すべてのページに適用するスタイルは共通のCSSファイルとして先につくっておき、あとはカテゴリーごと、ページごと、機能ごとなどでそれぞれコーディングを行うことができる。
CSSファイルの分割のデメリットと対策
混乱を招くことがある
例えば「main.css」と「style.css」にはどちらに何が書かれているのか、スタイルをどのように区別し修正や追記をすればよいのかが分からないので、直感的にわかるファイル名にすること。
ファイル管理やバージョン管理が煩雑になる
ファイルの先祖返りや上書きミス、重複指定なども発生しがち。これを回避するために、更新履歴を書いておくだけでも効果がある。「誰がどのファイルのどの部分をいつ更新したのか」をはっきりさせるために、CSSファイルの上部に、ファイル名や概要、更新日、更新者、ファイル名の目次などのインフォメーションを書いておく。
ページの表示速度に影響することがある
CSSファイルやJavascript、画像などのファイルの数だけHTTPリクエストが実行される。対策としては、制作段階では細かく分割していても、公開時には数ファイルに統合するという方法がある。
CSSファイルの分割の具体例
- import.css
- reset.css
- layout.css
- header.css
- footer.css
- side.css
- main.css
- top.css
- hack.css
- print.css
- handheld.css
@import.cssでは、あとから読み込まれたスタイルが優先されるので、おおまかなスタイルから個別的なスタイルへ、という順序で読み込んでいく。
また、印刷用スタイルや携帯機器用スタイルを用意する場合は、XHTMLにlink要素を追加し、media属性で適用メディアを指定する。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Untitled Document</title> </head> <head><link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" /> </head> <head><link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> </head> <head><link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld" /> </head> </head> |
CSSファイルの分割のポイント
- ファイルを細かく分けすぎない
- 直感的にわかるファイル名をつける
- @importにコメントをつける
- サイトに合わせてファイル設計を柔軟に変える
- 最低限の構成は常に統一しておく
- 最終更新日や総目次などのインフォメーションを記入する
- ファイル設計はデザイナーとコーダーで
リセットスタイル
リセットスタイルとは
ブラウザにはあらかじめデフォルトスタイルのCSSが用意してあり、それらは各ブラウザによってデフォルトスタイルが異なるため、それらをリセットスタイル（reset.css）で初期化しておくとブラウザ間での表示の統一が楽になる。
指定しておくと便利なリセットスタイル
スクロールの必要のない短いページについて、多くのブラウザは表示するのに対し、Firefox3は表示しないため、ページ推移の際にスクロールバーの幅の分だけコンテンツが左右にずれてしまう。この問題を解決するために、常にスクロールバーが表示されるようにしておく。
1 2 3 4 5 | html { overflow: scroll; overflow: -moz-scrollbars-vertical; overflow-x: scroll; } |
表（テーブル）のボーダー表示方法の違いを解決
表のボーダーの表示方法には、各セルのボーダーを別々に引く方法（separate）と重ねて引く方法（collapse）のふたつがあり、border-collapseプロパティで指定できる。また、別々に引く場合にどのくらい離すのかをborder-spacingプロパティで指定できる。これはブラウザによって異なる場合があるので、統一しておく。
1 2 3 4 | table { border-collapse: collapse; border-spacing: 0; } |
画像のリンクボーダーの非表示化
1 2 3 | img { border: 0; } |
カテゴリやページごとに異なるスタイル
body要素にID・クラス名を指定し、それらを手がかりにスタイルを適用する
カテゴリやページごとに異なるスタイルを適用したい場合、どのカテゴリに含まれるどのページなのかをbody要素のid属性やclass属性で示しておくことをCSSシグネチャという。個別の要素にIDやクラスを追加したり、専用のCSSファイルを作ってlink要素で読み込む方法は効率的ではないので、CSSシグネチャを使う。
代表例は、ナビゲーションで現在のカテゴリやページを示すハイライト表示や、カテゴリごとのキーカラーやキービジュアルの変更のふたつがあり、クラスでカテゴリを、IDでページを示すことが多い。
1 2 3 4 5 6 7 8 9 | <li> <body id="shoplist" class="shops"> </li> <li> <body id="shibuya" class="shops"> </li> <li> <body id="aoyama" class="shops"> </li> |
ナビゲーションで現在のカテゴリーやページを示すハイライト表示
対応するリンクそのものにid="here"やclass="now"と指定してスタイルを適用するよりは、すべてのページで同一のソースコードを利用したほうが効率的。ナビゲーションに含まれるリンクそれぞれにあらかじめIDを振っておき、body要素のクラスを手がかりにスタイルの適用対象を変えることで、自動的にカテゴリーやページに対応するリンクがハイライト表示されるという方法を利用する。
1 2 3 4 5 6 7 8 | <body class="ideas"> <div id="gnav"> <ul> <li><a id="nav-home" href="/"> ホーム </a></li> <li><a id="nav-ideas" href="/ideas/"> こだわり </a></li> <li><a id="nav-shops" href="/shops/"> 店舗情報 </a></li> </ul> </div> |
子孫セレクタでbody要素のクラスとリンクのIDを対応させておけば、カテゴリーごとに異なる部分のハイライト表示が実現できる。
1 2 3 4 5 6 | /* ナビゲーション ハイライト表示 */ body.home #gnav ul li a#nav-home, body.ideas #gnav ul li a#nav-ideas, body.shops #gnav ul li a#nav-shops { background: url(../img/gnav_here.jpg) repeat-x left center; } |
カテゴリーごとのキーカラーやキービジュアルの変更
カテゴリー「こだわり」に含まれるページでの指定
1 2 3 4 | <body class="ideas"> <div id="main"> <h1>こだわり</h1> </div> |
カテゴリー「店舗情報」に含まれるページでの指定
1 2 3 4 | <body class="shops"> <div id="main"> <h1>店舗情報</h1> </div> |
CSSシグネチャ
1 2 3 4 5 6 7 8 | /* カテゴリー「こだわり」用スタイル */ body.ideas #main { background: url(../img/img_ideas.jpg) no-repeat left top; } /* カテゴリー「店舗情報」用スタイル */ body.shops #main { background: url(../img/img_shops.jpg) no-repeat left top; } |