CSSを書く際のテクニックというエントリーを読んでみて、自分なりのCSSを書く際のワークフローを紹介しています。
CSSワークスタイルCSSを書く際の5つのテクニックというエントリーがはてブでのブックマークで上位に上がっていました。この元のエントリーは以前にもdeliciousにてかなりのブックマークを集めていたので読んでいましたが、改めてこうして紹介され読んでみると忘れそうなときにいいチェックツールにもなります。最近物忘れがひどくなってきたので助かります。
CSS作成テクニックを読んでのワークフロー
上記のCSSを書く際の5つのテクニックを読んでみての自分なりのCSS作成時に考えるワークフローなどを書き出してみようかと。
- サイズ指定の際はピクセルを使わない。
- em指定でブラウザ文字サイズ変更に適応する。
- Yahoo! UI Library: Fonts CSSを使ってパーセンテージ指定する
- 階層構造はインデントして読みやすく。
- セクションごとにコメントを入れて構造化
- 長くなるようであれば、いくつかのCSSファイルに分ける。
- divを使いすぎないよう
- デザインの原案を紙に出力して、div要素の枠組みを書き出し複合class指定できるようにする。
- 最初にすべての要素を初期化
- Yahoo! UI Library: Reset CSSを使ってブラウザ特有の要素に対する設定をフラットにする。
サイズ指定の際はピクセルを使わない。
これは、ブラウザの文字サイズ変更で大きさが変わらないので、今はem指定でサイズ設定しています。
ちなみに、Yahoo! UI Library: Fonts CSSのCSSを使うとほとんどのブラウザにて、文字サイズの違いがなくなります。推奨する文字サイズ指定は、パーセンテージ指定です。パーセンテージ指定することで、違和感なくフラット表示が可能です。
ピクセルからのパーセンテージ早見表などもあるので、Yahoo! UI Library: Fonts CSSを組み込む場合は、参考にしてみるといいと思います。
ピクセルサイズをパーセンテージ早見表
http://developer.yahoo.com/yui/fonts/index.html#fontsize
Yahoo! UI Library: Fonts CSS
基準サイズは、13px。line-height16pxになります。書体はarialです。
階層構造はインデントして読みやす
CSSを書く際の5つのテクニックで紹介されているように、これは実行してゆこうと思っています。
セクションごとにコメントを入れて構造化
セクション毎にコメントを入れるようにもしています。HTMLやXHTMLの構造にあわせて、CSSの構造も並べるようにしています。あまり長くなるようであれば、CSSファイルを分けて読み込むようにしています。これは、自分以外の人間がCSSなどの編集をしやすいようにするためです。
divを使いすぎないよう
これも気をつけるようにしなければなりません。無計画でCSSでコーディングしてゆくとdivだらけになってしまいます。 本当は、デザインレイアウトの下案をコピーなどで出力し、実際にdiv要素の枠組みをペンで書きだして、まとめれる部分はまとめるようにしています。
特にclass指定において、複数指定可能なのでそれをうまく使ってdiv要素を減らすよう設計する必要があります。
例えば、下記のように半角開けて、複数class指定できますので、うまく使うことでスリムにすることができます。
<div class="設定A 設定B"></div>
本当にWEB標準が求められるようになってきて、段取り八分で仕事ができるようになるのもうなずけるような気がします。
最初にすべての要素を初期化
これもYahoo! UI Library: Reset CSSですべての要素をリセットするようにしてから最初から構築するようにしています。
ブラウザの特定要素に対する設定をリセットすることで、反対にデザインしやすいということです。
Yahoo! UI Library: Reset CSS
参考サイト
- CSSを書く際の5つのテクニック
- http://phpspot.org/blog/archives/2006/09/css5.html
- CSS tips and tricks
- http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
- Yahoo! UI Library: Reset CSS
- http://developer.yahoo.com/yui/reset/index.html
- Yahoo! UI Library: Fonts CSS
- http://developer.yahoo.com/yui/fonts/index.html
以上がCSSを書く際の5つのテクニックを読んでの自分の使っているワークフローです。
最近は、カラー指定も他のCSSファイルに分けるようにしました。面倒かも知れないけどカラーの指定変更だけのCSSを用意しておくと、すぐにマルチカラーパレットのデザイン指定もできるようになるかとおもってです。同じレイアウトでもカラーの変更でかなり違うデザインにかわります。 bady要素にクラス指定して、いくつものカラーデザインを楽しめるようにと思ってカラー指定は別にしています。
スペルミス報告
bady要素になっています。
今日初めてこのサイトを知りました。
有益な情報をありがとうございます。