0

cssにおけるidやclassを命名するとき気を付けること…

cssにおけるidやclassを命名するとき気を付けること...

Webサイト構築の際、それぞれの要素にidやclass名を付けて作成していきますが、汎用性の高いid名やclass名を要素ごとにわかりやすくリスト化しておくと毎度名前を考えたり煩雑にならずに構築していくことができメンテナンス性が高まります。

まずは一般的な規則を確認していきましょう。

基本的なルール

  1. 半角英数字のみを使用する
  2. 記号は「-(ハイフン)、」、「_(アンダースコア)」のみ使用可能
  3. 機種依存文字は使用不可
  4. スペースは使用しない
  5. 先頭はアルファベットからはじめる(数字はNG)

 

汎用性の高い命名規則

▼レイアウト関連

site,page,contents,main,sub,header,footer,wrapper

▼ナビゲーションメニュー関連

nav,navigation,globalNav,utilityNav,guideNav,menu,pageMenu,subMenu,anchorMenu

▼メインコンテンツ内

area,article,section,subSection,item,mainHeader,mainArea,mainFooter,subArea,focusArea,entryArea,bodyArea,entryBody

▼概要やテキスト関連

summary,description,meta,text,catch,lead,pick,information,news,date,copyright

▼画像関連

photo,image,eye

▼リンク関連

exLink,relateLink,btn,bnr

▼注意書き

note,attention

▼パンくずリスト

topicPath,breadcrumbs

 

いずれにせよ、人それぞれ理解しやすく扱いやすい指定方法が異なることも事実ですが、複数人で管理するようなサイトの場合は、メンテナンス性を考えた名前を付けて利用することが望ましいでしょう。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > cssにおけるidやclassを命名するとき気を付けること…