福井県のweb制作は有限会社ハートブレーン
14.01.15

名付けが苦手な人のためのクラス名定義

何だか偉そうなタイトルですが、まずN自身が名付けは大の苦手です。
ブログタイトルとか結局放置のままですし。
記事のタイトル一つにしたって、センスという文字にはとことん無縁に生きてきたことだけが伝わってくる素晴らしさです。

そんな私ですから、もちろんCSSのクラス名はメチャクチャでした。
ですが、偶然というかMilamDesign様のおかげというか、見直す機会に恵まれたので
ここは一つ、備忘録として記録しておきます。

ブログ始まって以来の「お前が言うな」記事です。

Google検索で3ページ以内にヒットするような大手サイトorブログ様が主に使用しているらしいクラス名をまとめてみました。
これ、よく見たら、wordpressの既存テーマなどでもよく見られる名前だったりします。

主にこちらを参考にさせていただきました。→ID Class の名前の例(Vosegus Sakura様)
他力本願全開です。ありがとうございます。

枠組み inner 内側
base 基本
nav ナビゲーション
ブロック entry ブログの各記事ごとの枠など
item 項目
section 段落
unit 一かたまり
box ボックス
column カラム
見出し title 題名
heading-○ ○の部分はアルファベット推奨
画像 image 画像全体(イラストなども含む)
photo 写真
テキスト text 文章
article 記事
summary 概要
description 要約(SEO対策テキストなど)
lead リード文
caption 写真や画像を補完する
note 注釈
alert 警告文
mark マークアップしたい文章
リンク banner サイト内リンク
aside 外部リンク

尚、クラス名や画像名などで、2つ以上の属性を持つものを
main image
などと名付けたい場合。

mainimage と単純に繋げたり
main_image とアンダーバー(下ハイフン)で繋げると
検索エンジンが、一つの単語として読み取ってしまうそうです。

不都合がある場合などは
main-image とハイフンで繋ぐか
mainImage と2つ目の単語の1文字目だけ大文字にする(キャメルケース)かで対応すると良いようです。

【ハートブレーン】https://blog.heart-kokoro.net/

【ハートブレーン】https://heartbrain.net
最後までご覧いただき、ありがとうございました。
よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。


Webサイト・CGIランキング

メールでのお問合せ・お見積りはコチラ
TOP