CSSの命名規則


このエントリーをはてなブックマークに追加

命名規則(めいめいきそく、英: Naming conventions)とは、プログラミングを行う際に識別子の名称となる文字列を決定するためのルールを定めたもの。ネーミング規則、ネーミング規約、命名規約とも呼ぶ。
通常は、ソースコードの可読性や視認性の向上、プログラミング効率の改善などを目的としている。
Wikipedia – 命名規則

Webサイトを作る上で、命名規則を自分なりに作っておくと、以下のような便利点があります。

  • 自分で編集をする時、どこがどのような作りになっているかが分かる
  • 共同制作者や、他の制作者が見た時にどんなものかが分かる
  • 上手い命名規則をしていると褒められる(事がある)

HTMLやCSSだけに命名規則があるわけではありません。画像ファイルなどにも命名規則を作っておくと良いでしょう。
また、現場では会社や制作チームごとにルール化されたルールブックが配布されていることもあります。

画像に名前をつけるパターン

  1. 背景画像:bg_○○○.png / background.pngなど
  2. ボタン:button_○○○.png / btn_○○○.pngなど
  3. メニューバー:menu_○○○.png / navigation.png / nav_○○○.pngなど
  4. アイコン:icon_○○○.pngなど
  5. バナー:brn_○○○.pngなど

画像に名前をつける場合は、つける場所+名前+属性(pngやjpg)といったのが主流なようです。
例えば、採用ページにイベント情報のバナーをつける場合:

bnr_recruiet.png
bnr_Recuruiet_event.png

などになります。

Webサイトレイアウトにおけるカテゴリを利用してつけてみよう!

  • 共通部分:index,body,top,company,siteなど
  • 要素:header,footer,main,contents,subなど
  • 属性:navigation,step,list,copyright,news,eventなど
  • その他:icon,banner,background,image,titleなど

何個か属性が続く場合は、「01」や「001」など連番を使うようにしましょう。
例えば、サブメニュー内に、会社概要のリストを作る場合:

<div id="subMenu">
<ul id="comapny">
<li>会社情報</li>
<li>採用情報</li>
</ul>
</div>

というな形になります。なので、あまり形だとかにこだわらず、自分が分かり易いように
名前をつけてみるといいのかもしれません。

まめちゃんのまとめ

  • 命名規則は、あくまで自分で作るルールみたいなもの!
  • 簡単な英単語を繋げるだけでそれっぽくなる!