CSSでID・classのネーミング

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”のままでも正しくサイトは構築できますが、非常に解かり難く今後の整合性に影響を及ぼす可能性があります。

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。