id・class・ファイル・ディレクトリ名の命名規則

  • 公開日:2015.04.12
  • 更新日:2020.04.22
  • FL-Rules
NO IMAGE

命名の基本的なルール
・id名・class名・ファイル名・ディレクトリ名は、正しい英単語を使用し、
日本語を使わない(日本語読みのローマ字もNG)
・通し番号は00~、2ケタでつける
・「-」ハイフンは使わずに、「_」アンダーバーで統一する
・数字から開始せずアルファベットから開始する
・ファイル名は全て小文字で統一
・全角半角ともにスペースは使わない

 

画像・ボタンなど、どのサイトでも共通で使用するid・class名は、下記で統一する。
ページ全体・・・container
コンテンツエリア・・・contents
入れ子・・・inner

ヘッダー・・・header
ロゴ・・・logo
キャッチフレーズ・・・catch

ナビゲーション・・・nav
グローバルナビゲーション・・・gNav
パンくず・・・breadclumb
現在位置・・・current

メインコンテンツ・・・main
メインコンテンツ・・・mainVisual
リード文章・・・lead
記事・・・article
セクション・・・section
見出し・・・ttl(=h2/h3/h4/h5/h6でスタイル指定する場合はクラス名等つけなくてもOK)
テキスト・・・txt
アイコン・・・ico
アイコン以外の背景・・・bg
矢印・・・arrow
線・・・line
サイドバー・・・side
画像、図、写真・・・img
サムネイル・・・thumb
バナー・・・bnr
ボタン・・・btn

ニュース、新着情報・・・news
トピックス・・・topics
次へ・・・next
前へ・・・prev
もっと見る・・・more
一覧・・・list
日付・・・date
注釈・・・caps
更新履歴・・・history

お問い合わせ・・・contact
確認・・・confirm
送信・・・send
プライバシーポリシー・・・policy
同意・・・agree

ページトップ・・・pagetop
フッター・・・footer
コピーライト・・・copyright

——-

最初の項目・・・first
最後の項目・・・last

奇数列・・・odd
偶数列・・・even

レイアウトのための外側のボックス・・・box、area
(使用例:newsBox,newsArea)

FL-Rulesカテゴリの最新記事