田中邦衛研究所|管理人日記

<<田中邦衛研究所トップページ  <<ブログトップ  管理人日記

近い将来、あらゆるコンテンツを統合します!

*****

CSSは極力オーバーライド(上書き)して使おう

CSSでHTMLを組むとき、意外と面倒だったりするのが、classやid定義だ。
人によっては、ボコスカタグにclassなりidなりを組み込み、デザイン実装をする。
そうなると管理が面倒なわけで。

効率のよい組み方を探ってきて、ここ数年でこれだって落ち着いたのが「CSSをオーバーライドで組む」方法だ。
ま、簡単にいってしまえば上書きを利用して記述する方法。
いくつかの商用サイトでも利用している。管理もラクだし、定義を変更したことによって、他のページへデザイン影響も及ぼさなくて済む。

やり方は、すごく簡単。
まず、トップページ用のCSSを用意。
で、2階層目以降のページはフォルダ分けして格納。
そのフォルダ内にオーバーライド用のCSSを用意する。

ザッと書くと、
index.html
┣css/
┃ ┣improt.css
┃ ┗共通.css
┣second/
┃ ┣index.html
┃ ┣improt.css・・・共通.cssを読み込んだ上で上書き.cssで上書き
┃ ┗上書き用.css


ってこんな感じか。

ポー.jpでも使っていて、まず共通のcssを読み込んで、必要な箇所だけ上書き.cssで上書きしている。こうすることで、記述の行数も減らすことができるし、それにレイアウト変更等でも、他ページへの影響も少なくすることが可能だ。あくまでもベースは共通で、部分部分のみの改修で済む。
ま、これが一番いま自分にとって効率のよいCSSの管理の仕方ってことです。

[PR]

by p_up_kuniken | 2009-10-11 12:35 | 無料占いサイト

<< 『JIN−仁−』のドラマがスタート PhotoshopCS4でEP... >>

これよりメニュー開始

ブログトップ

*************

田中邦衛研究所|管理人日記