CSS天国への5つの階段

2006年5月18日 カテゴリー: インターネット, テクノロジー

CSS天国への5つの階段

イラストレーション: 「天国への階段」（作： Jim Warren）

CSSを書くことは、まるで夜の営みのようだ。みんなが同じ方法で行う訳でもなく、絶対にこれが正しい！という方法がある訳でもない。僕にとってのこの二つの共通点は、CSSを書くことは毎日やることで、夜の営みの方も…。あ、ちょっと話が本題から逸れちゃった。以前も少し話したように、W3Cが、CSSの“標準”を定めたけれど、CSSの書き方って、各々の好みによるんだよね。じゃあ、今日は僕がここ半年でよく使っている5つのちょっとしたヒントとアイディアを紹介しよう。これを知っていれば、CSSがもっと合理的に、メンテナンスしやすく、読みやすくなると思うよ。

作：ジョン
訳：チエミ

忠告:CSSのテンプレートは、テンプレートそのものである。初めから実用的なCSSのドキュメントとして作られていない。この記事で使っている例に出てくるclass名は、あくまでそのclass名が指す見せ方にそって名前がつけられているだけで、何か一定な特別な規則にそってclass名がついていないことに注意して欲しい。
Step 1

1）コンテンツの目次を作る

CSSドキュメントの上部には、目次を書こう。そして、ヘッダー、メイン、フッターなど、それぞれのエリアのアウトラインを作る。次に、その間にはっきりとした境目作る。そうすると、CSSが整って見えるだけじゃなくて、後でCSSの一部分にちょっとした修正を入れたくなった時に、すぐにその場所を見つけることができるんだ。

例1を見る

Step 2

2) 位置プロパティと文字プロパティを離して使う

なぜか？それは第一に、美しさへの強迫観念であるけれど、ついつい毎回沢山の文字のプロパティを使い回しがちというもうひとつの理由がある。文字と位置のプロパティをCSSで組み合わせているなら、必要もないのに繰り返しているってことに気づくかもしれない。

例2を見る

Step 3

3) 何度も使うプロパティはまとめて定義しよう

自分はいつも同じプロパティを使いがちだと思うのなら、そのプロパティをまとめて定義しよう。そうすれば、同じプロパティを共有している領域の見え方を一度に変えることができる。

例3を見る

Step 4

4) オンラインのCSSコンプレッサを利用する

…とは言っても、キミが今思っている理由とは違うんだ。僕は、CSSコンプレッサのことを、正直、あまり信用していない。ちょっとだけKbを減らして、CSSファイルは軽くなっても、僕たちにとっては解読しにくくなるからだ。でも時に、CSSコンプレッサは、“新しい技”を学べる場所でもある。あまりオススメしないけど、一度圧縮したものを見てみる価値はあると思うな。

Step 5 (写真: Michael Rondou)

5) CSSのカスケード（重ねること）出来る性質を利用する

これは、すごく分かりやすいけど、見落としがちでもあるところ。例えば、キミのウェブサイトにちょっとした違いしかない二つの似通ったボックスがあるとする。CSSで各々のボックスの見栄えを整えることもできるし、または両方のボックスを同時に調整するためのCSSを書き、その後、別のプロパティを下に追加して、二つのうちのひとつを違って見せることもできる。

例5を見る
忠告:PingMagのスタイルシートとこのヒントを比べないように！このサイトは、昨年作られたもので、再点検が必要なんだ…
最新情報:以前、3つ目のポイントとして提案していたclassネームの話は、英語版の方で話の本筋とは違うところにみんなが注目しすぎているので、修正をさせてもらいました。以前にこの記事を読んだ人は、修正バージョンも読んでみてくださいね。

7 コメント

  1. 何か下品。

    Posted by: つまんね富雄 @ 5月18日2006年

  2. 役立つようで、そうでもない
    直訳的なオモシロサも、次第に鼻についてきた
    気をつけてジョン＆パンチ、じゃなくてチエミ

    Posted by: kOji @ 5月19日2006年

  3. 挿絵がおもろい

    Posted by: linyows @ 5月22日2006年

  4. [...] Zdroj: Pingmag [...]

    Posted by: I`am Kryšpín Web 2.0 » 5 kroků do CSS nebe @ 11月13日2006年

  5. Thanks for one’s marvelous posting! I really enjoyed reading it, you may be a great author.I will make sure to bookmark your blog and will often come back in the future. I want to encourage that you continue your great posts, have a nice evening!

    Posted by: Phillip Winzler @ 11月15日2011年

  6. What a great publish. I genuinely appreciate reading these kinds or content. I can?t wait to find out what others need to say.

    Posted by: Jeremy Gangadyal @ 11月16日2011年

  7. CSS天国への5つの階段 good post1001

    Posted by: air multiplier @ 4月21日2012年

  • Share and Enjoy:
  • del.icio.us
  • digg
  • Fark
  • NewsVine
  • RawSugar
  • Reddit
  • YahooMyWeb
以前の記事