このページの本文へ

「CSS Nite ビギナーズ」から学ぶエッセンス

さらばテーブルレイアウト!CSSビギナーの濃い1日

2008年11月12日 19時16分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

他人にも分かりやすいCSSセッティングを

CSS Niteビギナーズ
堀内敬子氏

 ある程度の規模のWebページを効率よく作る、という観点ではアズ・シーツーの堀内敬子氏による「CSSセッティング」も興味深いテーマだった。XHTML+CSSのWebサイト制作では、複数のCSSファイルを組み合わせて使うことが多い。CSSセッティングとは、この複数のCSSファイルの設計や設置作業のことだ。

 そもそも、なぜ複数のCSSファイルに分割するのか? 堀内氏は分割することで、(1)CSSファイルを使いまわせる、(2)記述場所を探しやすくなる、(3)問題の切り分けが簡単になる、(4)複数人での同時作業ができるようになる、(5)更新用のCSSを別にして管理が楽になる 、の5つを挙げる。つまり、CSSファイルを適切な数に分割することで、制作にせよろ更新にせよ作業の効率化が図れる、というわけだ。

 具体的な分割の例として、堀内氏は自社の基本セットを紹介した。アズ・シーツーでは、通常のブラウザー表示用CSSとして、レイアウト・ヘッダ・フッタなどをまとめた「base.css」、ナビゲーション部分の「nav.css」など、6つに分割しているという。


CSS Niteビギナーズ
アズ・シーツーの「基本セット」を紹介する堀内氏

 注意したいのは“分けすぎ”によるトラブルだ。たとえば、あるニュース系サイトの例では、CSSを20ファイルにも分割した結果、コーディングスピードの長時間化、サイトのパフォーマンスの低下といった問題が発生したという。堀内氏はCSSセッティングのコツとして、XHTMLのファイル名やID・クラス名との対応を考えて設計する、日本人が理解できる英単語を使う、一般的に使われているルールに従う、といった点を挙げる。

「何も考えずにCSSファイルを分けると逆効果。自分にも他人にも分かりやすいCSSセッティングを」(堀内氏)。


次ページ:“ローハック時代”のブラウザー間調整術

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く