• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / CSS初心者 / コラム:class名とid名はどうやってつければいい?

コラム:class名とid名はどうやってつければいい?

池田祐太郎 | 2018年6月2日 更新 | 2013年10月28日 公開

idとclass名の付け方やつかえる名前
CSSを定義する際に便利なのがclassとid。毎回固有のclass名やid名を考えるのは最初は戸惑うものです。

「何かわかりやすい命名規則はないか…」
「自分でつけているこの名前って問題ないのか…」
「毎回名前を考えるのが時間がかかる…」

といった問題は意外と大きいものです。
何が正解というのはないですがある程度自分の中でルール化しておくと修正や更新をする際にラクだし、他の人が読む時もわかりやすくて時間のロスになります。

目次

  • 1 大きいエリアや広範囲のものに使える名前
    • 1.1 header, head, heading
      • 1.1.1 要素の上部やヘッダー付近に使えるもの一覧
    • 1.2 main, mainArea, contents, mainContents
      • 1.2.1 ページの中で主役となるエリアや中心となるコンテンツに使えるもの一覧
    • 1.3 side, sidebar, sideOne, sideTwo
      • 1.3.1 サイドバーやサイドに置くコンテンツ用に使えるもの一覧
    • 1.4 footer, foot, bottom
      • 1.4.1 要素の下部や下エリアコンテンツ用に使えるもの一覧
  • 2 単純な囲いや限定的な要素に使える名前
    • 2.1 wrap, wrapper, inner
      • 2.1.1 囲う系の名前使えるもの一覧
    • 2.2 summary, breadcrumb, detail
      • 2.2.1 限定的なエリアやその他の名前一覧
  • 3 おまけ:アンダーバーかキャメルケースか

大きいエリアや広範囲のものに使える名前

メインのコンテンツやヘッダー、サイドバー、フッターなど、わりと大きめのエリアに使うときに使うケースが多い名前です。

header, head, heading

名前の通り、要素の上部分やヘッダー自体に使ったりします。html5になってからはheaderタグが加わったので前程使うケースは少なくなってきました。

使用例:
<div id=”header”></div>
<div class=”head”></div>

要素の上部やヘッダー付近に使えるもの一覧

header
head
heading
top
headline
headTop
headerTop
topArea

main, mainArea, contents, mainContents

こちらはそのページの中で主役となるエリアや中心となるコンテンツなんかによく使います。
他にもcenterArea, centerContents, mainBox, centerBlockなどなど。contentsが長いときはcontとか略したりもします。

使用例:
<div id=”main”></div>
<div class=”contents”></div>

ページの中で主役となるエリアや中心となるコンテンツに使えるもの一覧

main
mainArea
contents
mainContents
mainContainer
blockArea
mainSection
mainBox
contentBlock

side, sidebar, sideOne, sideTwo

サイドバーやサイドに置くコンテンツ用に使います。html5のasideタグがでてきてこちらもそんなに使わなくなりました。
左側のサイドバーという意味で単に「left」とやったりするとcssを眺めた時に「leftってどこのleftだろう?」とごっちゃになることが多いので、その場合はsideLeftなどにしたり、後々サイドバーを入れ替えることが考えられるときはsideOneとかsideTwoとかにすることをお勧めします。
※位置などは変わることが多いのでそもそもleftやrightというのはあまりおすすめではない

使用例:
<div id=”side”></div>
<div class=”sidebar”></div>

サイドバーやサイドに置くコンテンツ用に使えるもの一覧

side
sidebar
sideOne
sideTwo
menu
sideMenu
sideContent
sideArea
sideLink
sideBnr
sideBlock

footer, foot, bottom

要素の下部や下エリアに使うときに。ページのフッター部分だけではなく何かのボックス要素のボトム部分とかでも使えるので割と使ったりします。

使用例:
<div id=”footer”></div>
<div class=”bottom”></div>

要素の下部や下エリアコンテンツ用に使えるもの一覧

footer
foot
bottom
bottomArea
footerArea
boxFoot
boxBottom
blockFoot
blockBottom

単純な囲いや限定的な要素に使える名前

意味はないけどCSSをかけたいのでclass名をつける場合やfloatする要素で高さを維持したいので限定的にclassをつけるケースなど。意外とこういうのが多くて命名にこまるんですよね。。。

wrap, wrapper, inner

単純になんか囲いたいときなど。場所と組み合わせたりしてmainWrap, mainInnerとかheadWrapper, sideWrap, footerInnerなんかにしたりします。
結構wrapなんかは登場することがおおくて、例えばメインコンテンツを2カラムにしている場合、HTML上は2カラムにしているタグだけでいいのですが、デザイン上どうしてもhtmlを追加して2カラムのタグを囲うタグを作るケースが割りとあります。そういうときにはid=”wrap”とかclass=”wrapper”なんか使うことが多いです。

使用例:

<div id=”wrap”>
<div class=”main”>メインコンテンツエリア</div>
<div class=”side”>サイドバーエリア</div>
</div>

囲う系の名前使えるもの一覧

wrap
wrapper
inner
headWrap
headWrapper
headInner
mainWrap
mainInner
sideWrap
footerInner
topWrap
centerWrap
postWrapper
contentsInner
ttlWrap
blockWrapper
boxInner
bnrWrap

summary, breadcrumb, detail

限定的に「ここだけ」みたいな感じで使える名前です。上記以外の部分など。個人的にはよく使いますね。
下の一覧と今までのエリアごとの区分けで出てきた名前の組み合わせでほとんどいけると思います。

使用例:
<div class=”summary”></div>
<div class=”breadcrumb”></div>

限定的なエリアやその他の名前一覧

summary :要約、概要、まとめなど
breadcrumb :パンくずリスト
detail :詳細部分
more :詳しくはこちらエリアなど
bnr :バナー部分
ttl :タイトル
common :共通部分
mainVisual :主要画像部分、メインとなるイメージ画など
slide :スライダー部分
message :メッセージや説明文などが入る部分
info, informaiton :情報やデータ部分
data :データ
gNavi, globalMenu gMenu :グローバルナビゲーション、メインメニュー部分
firstChild :最初の要素
lastChild :最後の要素
date :日付部分
category :カテゴリー部分
tag :タグ部分
division :何かを分けているものやエリア
eachArea :それぞれのエリア(繰り返し表示するブロックなどに)
description :説明文エリア
caption :キャプション、ちょっとした説明
buttom :ボタン系
entry :エントリー、記事部分
genre :ジャンル、種類系
thumb, thumbPic :サムネイル
toTop :トップへ戻るボタン

おまけ:アンダーバーかキャメルケースか

class名やid名を書くときにどっちにしようかと一度は考えたのではないでしょうか?

・アンダーバー
main_contents, head_area, ttl_bnrなど
要素と要素の区切りをアンダーバー(アンダースコア)を使って区切る・キャメルケース
mainContents, headArea, ttlBnrなど
先頭意外の要素の1文字目を大文字にする

どっちが優れているというのはなくプロジェクト毎にルール化されていることが多いです。あとは個人的に好きな方を使う…という感じ。
ちなみに僕は最初アンダーバーで書いていましたが文字が長くなるのが気になったので今はキャメルケースで書くことが多いです。メリットは文字数が少なくなることですが、しばらくして慣れてきた頃感じたデメリットはCSS以外のプログラミン言語や単純にファイル名などを考慮したときアンダーバーの方が汎用性があるかも…と思いました。今は慣れてしまったので特に不自由はしていませんが、まあ人それぞれですね。

※追記
現在(2017/3月)はキャメルケースではなくアンダースコア(アンダーバー)で統一しています。

※追記
現在(2018/6月)はアンダースコア(アンダーバー)からハイフンに変更しました。Twitter BootstrapやFoundation等のCSSフレームワークで採用されているためです。

次の講座:12.CSSを書いてレイアウトやデザインを施す(前編)←目次に戻る
メールコンサルティング
WordPress保守管理サービス

Filed Under: CSS初心者 関連タグ:css

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.