CSSレイアウトを行う際、基本サイズの設計のほか、あらかじめネーミングルールを設定するのが良さそうです。
やってしまいがちなのがid=”left”やclass=”column01″などの「装飾そのままネーミング」。
この場合、左に置いていたメニューが仕様変更で右になった場合やカラム数が変更になった場合に非常に混乱する原因になるので極力避けたほうが良いです。
ローマ字ネーミング id=”contents_hidari”、class=”midashi01″なども、間違いではないですが極力避けましょう。
簡単な英語も使えないように見られてしまうと、自社ブランドのクオリティを低下する要因にもなります。
ID・classのネーミングとしては、大枠に対してずばり的確か、極力曖昧にしておくのが良いでしょう。
ネーミングで、よく使う感じのものを列挙します。
全体ネーミング(id/class)
- container
- wrapper
header・タイトル周り(id/class)
- header
- header_out
- header_in
- title
- title_side
- lead
- seotext
ヘッダ下イメージ画像(id/class)
- visual
- keyvisual
- image
メインコンテンツ関連(id/class)
- content
- contents
- contents_out
- contents_in
- main
- body_in
- base
- box
- in
ナビゲーション関連(id/class)
- nav
- navi
- navigation
- menu
- topmenu
- topnavi
- sidebar
- gnav
- gnavi
- global-navi
- global-nav
- sidenavi
- side-navi
フッター関連(id/class)
- footer
- footer_out
- footer_in
- copyright
- copy
- end
ネーミングに関しては何が正解とか言うのは一切ありませんが、今後の更新やカスタマイズを考慮したネーミングにしておくのが望ましいです。
たとえば、左メニューで構成していたサイトが突然右メニューの仕様でマイナーリニューアルする際、id=”left”のネーミングの場合はhtml側でのid/classまで書き換えするケースが発生してしまいます。
もちろん、id=”left”のままでも正しくサイトは構築できますが、非常に解かり難く今後の整合性に影響を及ぼす可能性があります。
コメントを残す