ホームページを構成する際のCSSの枠組みの組み方【With-D】

別に今回のリニューアルしたサイトは、プログラムと絡ませる事もそれほどない単に情報発信メディアサイトなので、自由につけたらいいんじゃないの？とも思ったのですが、なんかそれこそ自分が知らないスタンダード的なものがあったら嫌だなぁ...ということで、ちょっと調べてというかいろんなサイトのソースとか見てみたりしました。

採用したCSSのクラス名とID名

結局まぁ答えなんて見つからないまま、それでもいろいろと情報は取得できたので、今のメディアの制作チームのメンバーやリーダーに相談しながらわかりやすく、でもある程度管理しやすいような名前にしようよ。ということで下記のようになりました。

全体のフレーム

#wrapper

これはいろんなサイトで使ってるかもですね。#containerや#inboxなども多かったのですが、個人的に#wrapperが名前的に好みだったので。なんせラッパーですし！

ヘッダー

#header

まぁこれは説明不要というかほぼほぼこうしてる人が多いのでは？

グローバルナビ

#gnavi

これあんまよくわかんなかったんですが、会社で運営してるほかのメディアを外注に出したらこういうクラス名で納品されてたので、参考にしました

パンくずナビ

#nav

日本では#naviが多いかと思います。海外だと、#navらしいです。最先端っぽくない？ということで#navに決定（笑）

メインコンテンツのフレーム

#containerもしくは#main

このフレームなしにして、floatでleftやrightで回り込ませればこのIDいらないんですが、サイドバーの背景とかの高さ統一させたいとき、ここに背景つければ統一できるのと、フッターを横幅いっぱい使えるのでこのフレームを用意してます。3カラムの時は#containerで、2カラムの時が#mainで使います。

メインコンテンツ

#content

メインのコンテンツなので、#contentです。#contentsにしようかなとも思ったのですが、本かなにかで、#contentが比較的多いという情報を得たような気がするので、#contentにしました。

サイドナビゲーション

#sidebar

#contentに対して#sidebarです。間違っても#leftとか#rightなんてことはつけません。

フッター

#footer

これはほとんどの人が一緒かとは思います。#footerでくくって作ってます。

ということで、こんな感じで組んでます。このブログはちょっと特殊な形で組んでるので若干異なるのですが、基本自分が管理するメディアはこんな感じです。

このブログはソース見たらわかると思うのですが、最初に左右でfloatで分けてます。

ブログみたいに自分一人で管理するわけじゃないですし、周りは結構テーブルレイアウトをしてた完全デザイナーの方も多いので、そのあたりの折り合いをつけるのもなかなか難しいものです。

今回はフレームの外枠というかそういうクラス名やID名のつけ方について書いてますが、意外とCSSの名前の付け方とか悩みますね。ホント自分ひとりで管理してたら好きにできるんでしょうけど。

とりあえず外枠は基本自分の場合はこれでいってます。それおかしいぞ。なんてご意見あればぜひ教えてください。