2xup.org

スタイルシートを書く時のガイドライン

会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。

  1. 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists)
  2. 利用者インターフェイス (User Interface)
  3. ビジュアルフォーマットモデル (Visual Formatting model)
  4. ビジュアルエフェクト (Visual effects)
  5. ボックスモデル (Box model)
  6. 表 (Tables)
  7. カラー (Colors)
  8. フォント (Fonts)
  9. テキスト (Text)
  10. バックグラウンド (Backgrounds)
  11. 聴覚スタイルシート (Aural style sheets)

以上の順序をセットサンプルで見てみると以下のようになります。

selecter {
  Generated content, Automatic numbering, and Lists
  User Interface
  Visual formatting model
  Visual effects
  Box model
  Tables
  Colors
  Fonts
  Text
  Backgrounds
  Aural style sheets
}

まず生成する内容。つまり HTML ソース上には存在していないものから。 CSS の値次第で表示する内容の変化するものは先に書くように。そして次に display, position, float などコンテンツの表示レイアウトに直接的に関係するプロパティを含むビュジュアルフォーマットモデルを。そのあとにはビジュアルエフェクトをもってきた。そのあとに続くボックスモデルは、当初ビジュアルフォーマットモデルの前にと思っていたのだけれど、今回の順番を決める骨子となった自分自身が実際に作業を進めていく方法を整理し、ボックスモデルに含まれる margin, padding, border といったプロパティは調整する事を考え後にした。後に続くカラー, フォント, テキスト, バックグラウンドという順序は前景色を利用するプロパティを先にという考えから背景色を後にするという考えで決めました。また、各々が持つプロパティの詳細は、仕様書に出てくる順番に並べています (簡略記述のできるプロパティに関しては、先に簡略記述を書く)。

最終的には修正頻度が高くなりそうなプロパティほど後にリストされるようになったみたい (聴覚スタイルシートは除く)。生成する内容やレイアウトに関する定義は微調整が発生する可能性があるものの、後に続くボックスモデルや、カラーなどのプロパティにくらべるとその頻度は低い。これは新たにテーマを作成する場合でも、ある程度は元のテーマを流用できるようにという考えもできる。聴覚スタイルシートに関してはもう少し考えたい。

じつはここで書いた順序にまとまるまで何度か考えを改めていて、ガイドラインを設定した後、実際にいくつかの CSS ファイルを並び替えたり、実際に新たに書いてみたりして作業を進めていくうえで今のところ一番しっくり来ているのがこの順番だったりします。なのでまた考えが変わってしまうかもしれませんが、これもまた経験なのかな。

ガイドラインを作成して、個人利用や会社での利用関係なく作業効率やミスを減らすきっかけになるのではないかと期待しています。自分以外の人が作業するといったケースにも役立ちそうですね。個人サイトの場合は組織での利用ほどそのメリットを実感できないかもしれないけれど、何かテーマを持ってカスタマイズなりリニューアルなりに望むことでその意味は大きく違ってくるんじゃないかな。ハックやうまいテクニックを知るのは、もちろんうまく CSS を利用するのに重要なスキルだけれど、今はこういったガイドラインや CSS ファイルをどのように分けて管理するかといった、設計っぽいスキルのある人の方に強く惹かれる今日この頃です。

作成したファイルは以下になります。また、PDF ファイルには話題のフォント、メイリオを使用しました。

もちろんこのファイルは全て共有します。ウェブサイトだけでなく、様々な媒体で利用いただいてかまいません。念のため、ライセンスを明示しておきます。

ダウンロードしたドキュメントは、そのまま利用いただくもよし、独自にカスタマイズしてオリジナルのガイドラインをつくるサンプルとしてもご利用ください。もっと良い考えがあるかもしれないし、ミスや理解不足もあるかもしれないのでそういったご指摘も歓迎です。そしてそれを元に何かフィードバックなどをいただければ、それはステキですね。提供・公開ではなく、共有という言葉をりようしているのはそういった意味も含んでいます。

9 Comments

yosshiJuly 12, 2006 12:20 AM

参考になります。
なんとなくは意識して自分なりのルールが出来てはいましたが、ガイドラインとして明確にしてみるメリットはたしかにあると思うので、試してみようと思います。

MarkJuly 12, 2006 4:29 AM

This should be in english

kaminogoyaJuly 13, 2006 3:32 PM

> yosshi san
是非ためしてください。フィードバック期待しています。

> Mark
Document of English version is prepared.
http://2xup.org/common/css/style-guide-en.pdf

thx, :)

やまざきJuly 13, 2006 11:14 PM

ガイドライン化するというのは自身の棚卸し+チームで制作する際にはとても重要ですよね。
私も週末に作ってみようと思いましす(た)。

利用者インターフェイス (User Interface)
ビジュアルフォーマットモデル (Visual Formatting model)
ビジュアルエフェクト (Visual effects)
:

これらの呼び方って一般的なものですか？
実際に列挙されたプロパティを拝見すると納得いくのですが
呼称自体はあまり見かけないので...

一般的でしたら認識不足ということでお許しください。

kaminogoyaJuly 14, 2006 2:10 PM

> やまざきさん
ご意見、ありがとうございます。
Visual Formatting model　といった呼び方は仕様書に書かれているものを利用しています。
一般的にはあまりなじみの無い呼び方かもしれませんね。

プロパティのリストは、ダウンロードいただける書類に全て記載しておりますので、チェックしてみてください。

Pham Ky ThanhJuly 18, 2006 1:23 PM

Does this work for the most of current browsers such as: FireFox, IE, NS...?

kaminogoyaJuly 18, 2006 2:27 PM

> Pham Ky Thanh

This file is guide to make a mere CSS file.
Therefore, the item that depends on the environment is not included.
Of course, When Web is produced, I verify it in various environments.
We hope you find it informative.

tnx.

kajiyaOctober 3, 2006 8:42 PM

参考にさせていただきます。

kaminogoyaDecember 12, 2006 6:07 PM

ありがとうございます。
フィードバックがあれば、ぜひよろしくお願いします。