はじめに
本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。
連載第2回目となる今回のテーマは、前回に引き続き、制作／運用時の指針となる「ガイドライン策定」です。前回紹介しきれなかった「CSSガイドライン」、その他のドキュメントについて解説していきます。
対象読者
- XHTMLとCSSの基本を理解している方。
- Web標準サイトの実践的な作り方に興味のある方。
必要な環境
特別な環境は必要ありませんが、ガイドラインの作成にPowerPointのようなプレゼンテーション作成ツールや、文書作成ツールがあれば便利だと思います。
CSSガイドライン
前回紹介した「（X）HTMLガイドライン」と同様、「CSSガイドライン」についても、制作／運用時に悩みやすく作業に無駄が発生しやすい部分を中心に、ルールを定めていく方針で作成していきましょう。
CSSガイドラインの構成例としては、次のような項目が挙げられます。
- CSSのバージョン／文字コード
- CSSの整形ルール
- CSSファイルの内容構成
- CSSファイルの管理方法
- セレクタのルール
- プロパティのルール
- 値のルール
- CSSハックのルール
それではこれら各項目について、詳しく見ていきましょう。
CSSのバージョン／文字コード
「CSSのバージョン／文字コード」は、（X）HTMLガイドラインの「XML宣言の有無／文字コード／文書型」の項目同様、「制作運用ガイドライン」で定めたユーザー環境により決定されます。CSSの制作／更新時に、他のガイドラインと整合性が取れるように「CSSガイドライン」にも明記しておくと良いでしょう。
また、外部スタイルシートの文字コードセットには、いくつかの指定方法がありますから、指定忘れを防ぐという目的で、ブラウザの優先順を踏まえながら、どの方法を採用するか明記しておけば万全です。
外部スタイルシートの文字コードセットのブラウザの優先順位
- HTTPヘッダのContent-Typeの
charsetパラメータで指定（mata要素のhttp-equiv属性とcontent属性での指定を含む） - 外部スタイルシートの冒頭で@charsetルールを使用して指定
- link要素の
charset属性のような（X）HTML文書での要素／属性による指定
CSSの整形ルール
CSSの書式上、インデントはしてもしなくても構わないことになっていますし、プロパティと値の前後であれば、いくらでも空白文字を挿入することができます。さらに、複数の宣言を区切るセミコロン（;）は、最後の宣言において、あってもなくても構いません。CSSの整形ルールについても、（X）HTMLの整形ルールと同様、無駄な作業の発生を未然に防ぐという目的で、あらかじめ定めておくと良いでしょう。
インデントに使用する文字や個数、複数のセレクタやプロパティを指定する場合にどこで改行するかなどを決めておきます。またコメントの記述方法なども定めておくと良いでしょう。
以下に整形ルールの例を示します。
- セレクタの直後に半角スペースを1つ、続いて左中括弧（{）を記述して改行する
- 宣言は、タブを1つ使用してインデントする
- 値の直前には、半角スペースを1つ置く
- 宣言の数に関係なく、宣言の直後には必ずセミコロンを記述して改行する
- 最後に右中括弧（}）を記述して改行する
