CodeZine(コードジン)

特集ページ一覧

Webサイトの制作/運用の効率化を図る
「ガイドライン策定」のすすめ(後編)

そこが知りたい! Web標準サイトの活かし方(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/01/13 14:00

目次

CSSファイルの内容構成

 CSSファイルの中身は、「セレクタ{プロパティ:値}」の繰り返しですから、実にシンプルです。しかし書式が単調であるがために、どこに何のスタイル指定があるのか探し出すのに苦労します。ファイル内容を理解しやすいよう、「CSSガイドライン」の中でファイル内容の構成について明記しておくと便利です。

 また、それとは別に、CSSファイル内で構成を示しておくというのも有効です。下記サンプルのように、コメントで目次や見出しを付け、ファイル構成を示しておけば、CSSファイル内の検索性を高めることができます。サンプルでは、左端を見ればコメント文であることが分かるように1行ごとのコメントに「/*」「*/」を付けていますが、フォーマットに決まりがあるわけではありません。視認性や可読性が高くなるよう工夫することが大切です。

[リスト1]CSSファイル内の「ファイル構成」記述例
@charset "UTF-8";
/* ---------------------------------------- 目次 */
/* ファイル情報 */
/* ブラウザ初期化スタイル */
/* 汎用クラススタイル */
/* 領域定義スタイル */
/* 領域別スタイル */

/* ---------------------------------------- ファイル情報 */
/* Page Layout CSS v1.02 */
/* ファイル名:page-layout.css */
/* 作成日:2008年8月23日 */
/* 更新日:2008年12月24日 */
/* 作者: Maya Uegaki */

/* ---------------------------------------- ブラウザ初期化スタイル*/
body {
  margin:0;
  padding:0;
}
/* ~以下略~ */

CSSファイルの管理方法

 「ファイルをどのように管理するか」といった問題も、CSS設計の際に悩ましいポイントの一つです。これには、1つの外部CSSファイルですべてのスタイルを定義する「ワンシートアプローチ」と、複数の外部CSSファイルで役割を分担してスタイルを定義する「マルチシートアプローチ」という2つの考え方があります。

 「ワンシートアプローチ」には、1つの外部CSSファイルでスタイルを一元管理することができるというメリットがありますが、コードが長くなりすぎるといった問題が起こりやすくなります。この問題は、開発環境によって解決できる場合もあります。例えば、DreamweaverのようなWebオーサリングツールやFirebugのようなツールを使えば、CSSファイルのどこにどんなスタイルを指定しているのか即座に調査することができます。

図2:Firebug(http://getfirebug.com/jp.html)
図2:Firebug(http://getfirebug.com/jp.html)

 逆に、こうしたツールを使わない場合には、編集作業がやや困難になるわけですが、「マルチシートアプローチ」をとれば、スタイル指定を役割ごとに分割するため、各CSSファイルのコードは短くなり、ツールを使わなくても内容を理解しやすくなります。

 例えば、ブラウザの振り分けに使用する「フィルタ用CSS」や、ブラウザのデフォルトスタイルをリセットする「リセットCSS」、「ハック用CSS」など、役割ごとにファイルを分割して管理します。しかし、あまりにファイル数が多くなると、今度はファイル管理が煩雑になるという問題が発生するため注意が必要です。

 「ワンシートアプローチ」と「マルチシートアプローチ」のどちらを取るかについては、メンテナンス性や開発環境などを検討したうえで決定し、ガイドラインに記しておきましょう。特に「マルチシートアプローチ」を取る場合には、どのファイルがどの役割を担当しているのか明記しておくと、メンテナンスの担当者にとって役立つものとなります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:そこが知りたい! Web標準サイトの活かし方

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5