2017.01.22

セレクタ名のつけ方に困ってませんか?セレクタ名の命名規則

html,CSSのidやクラスの名前(セレクタ名)をつける際、どんなセレクタ名にするか悩むと思います。
そこで、今回はよく使うセレクタ名の紹介やセレクタ名の付け方のコツを紹介します。


初めに



セレクタ名は
・半角英数字のみ使用可能です。
・単語の連結は「-(ハイフン)」「_(アンダースコア)」で連結します。
・記号で始まったり、数字で始まることはできません。

上記のルールに従って、下記の命名規則を使用しセレクタ名をつけていきます。

ex.
ヘッダーのロゴ .header-logo
メインコンテンツのバナー .main-banner


命名規則

ヘッダー部分のセレクタ名
header:ヘッダー部分
logo:ロゴ
nav:ナビゲーション

フッター部分のセレクタ名
footer:フッター部分
coryright:コピーライト

コンテンツ部分のセレクタ名
content:コンテンツ部分
wrap:ヘッダー、フッターを除くページ全体
main:メインのコンテンツ部分
sub:サブのコンテンツ
side:サイドバーのコンテンツ部分
left:左のコンテンツ部分
right:右のコンテンツ部分
box:ボックス
col:ボックスのまとまり

パーツ部分のセレクタ名
img:画像
thumb:サムネイル
banner:バナー
btn:ボタン
arrow:矢印
line:線
inner:ブロック要素の中
list:リスト
even:偶数
odd:奇数
txt:テキスト
first:最初の要素
last:最後の要素
bg:背景
hidden:非表示
date:日付
item:項目
post:記事
next:次
prev:前
current:現在

固有部分のセレクタ名
news:ニュース
info:インフォメーション
history:沿革
company:会社概要
contact:お問い合わせフォーム
blog:日記
pagetop:ページのトップへ
topic:話題の記事
pickup:選り抜き記事
guide:ガイド
search:検索

記事をシェアする

fb_logoシェア tw_logoツイート

タグ

PAGE
TOP
  • home
  • BLOG
  • セレクタ名のつけ方に困ってませんか?セレクタ名の命名規則