CSSを書く際のテクニック

CSSワークスタイルCSSを書く際の5つのテクニックというエントリーがはてブでのブックマークで上位に上がっていました。この元のエントリーは以前にもdeliciousにてかなりのブックマークを集めていたので読んでいましたが、改めてこうして紹介され読んでみると忘れそうなときにいいチェックツールにもなります。最近物忘れがひどくなってきたので助かります。

CSS作成テクニックを読んでのワークフロー

上記のCSSを書く際の5つのテクニックを読んでみての自分なりの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要素にクラス指定して、いくつものカラーデザインを楽しめるようにと思ってカラー指定は別にしています。

トラックバック(0)

このブログ記事を参照しているブログ一覧: CSSを書く際のテクニック

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/59

コメント(1)

スペルミス報告

bady要素になっています。

今日初めてこのサイトを知りました。
有益な情報をありがとうございます。

コメントする

ウェブページ

   
  

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年9月13日 16:52に書いたブログ記事です。

ひとつ前のブログ記事は「MTで条件分岐MTIfNonEmpty:特定タグが空白かどうかチェックし分岐する」です。

次のブログ記事は「MTで条件分岐:<MTHasSubCategories>MTカテゴリーページにてサブカテゴリーのみ表示する」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。