DN*BLOG

2008.3.16

CSSでコーディングするときの癖

CSSでコーディングする際、個人で癖って言うものがあると思います。
それをなんとなく書いてみる。。。

メインのdivのID名のつけ方

全体を囲むdivのID名

#wrapper
昔は、#allとか使ってました。
なぜwrapperに変えたかはわかりません・・・。

ヘッダーにあたる部分のdivのID名

#header
まー、これは普通ですかね。前から変わりません。

グローバルメニューにあたる部分のdivのID名

#gNavi
「Global navigation」の略です。

メインコンテンツにあたる部分のdivのID名

#contents

メインコンテンツ、グローバルメニューを囲むdivのID名

#container
floatなどで構成するときに、divを作るときは#containerを使います。
そういった構成ではないときには、メインコンテンツのdivにこのID名を使う場合もあります。

フッターにあたる部分のdivのID名

#footer
これも普通ですかね。

よく使うクラス名

トップへ戻るボタンのクラス名

.toTop
はい。そのまんまです。

パンくずのクラス名

.topicPath
これもまんま。

マウスオーバーリンクのクラス名

.[それぞれのリンク名]
(例、homeの場合)
.home
これはわかりやすい名前をつけます。

こんなところでしょうか・・・。
あまりクラス名とか使わないで#wrapperにそれぞれのページのクラス名(index.htmlなら.indexWrapper)をつけて子孫セレクタをつかって構築していくのが私のスタイルなのでクラスはあまり使わないのが現状です。

子セレクタ、隣接セレクタなども駆使すれば本当にクラス名はほとんどなくなっちゃいますね・・・。
ブラウザの問題でそうもいかないのが悲しいですけど。

いろんな方々のcssファイルを見ていると表示は同じでもコードが全然違ったりしてて面白いですよね。
CSSはそんなところが魅力的でもありますよね。

FavoriteLoadingAdd to favorites

Category : (x)HTML , CSS

関連する記事