マークアップする時の、要素名の名前サンプル

マークアップ（コーディング）していて
時間がかかる原因のひとつに「迷い」があると思います。

最適なマークアップはなんだろとか、どうやって組むと後から楽かとか、
そういった建設的な迷いになら時間をかけてもいいんだろうけど、
「名付け」、例えば画像の名前や、class名、フォルダ（コンテキスト）名
なんかで時間をとられるのがどうにも痛い。

でもローマ字はいやだし、01,02,03…もちょっと、
意味が通らないのもプライドが許さん、
といった感じでついつい迷ってしまいます。

自分ルールを少しずつ構築

ということで、そんな迷いを減らすため
自分でルールを少しずつ構築してきたのですが、
それらをちょっとシェアしたいと思います。
世の中助け合いですものね。

良いか悪いかというよりも、自分が使っているもの、
迷わないためのもの、という位置づけです。
少しでも参考にしていただければ幸いです。

画像の名前

役割ごとに頭につけるもの

• bg_xxx　背景
• image_xxx　画像
• photo_xxx　写真
• text_xxx　テキスト
• btn_xxx　ボタン
• icon_xxx　アイコン
• title_xxx　タイトル
• illust_xxx　イラスト
• bnr_xxx　バナー
• logo_xxx　ロゴ

形状をもとに

• triangle　三角
• square　四角
• circle　丸
• dotted　点線
• dashed　破線

コンテキスト、フォルダ名

• order　注文
• faq　よくある質問、Q&A
• greeting　あいさつ
• application　お申し込み
• order　注文
• catalogue　カタログ（イギリス表記）
• catalog　カタログ（アメリカ表記）
• company　普通の会社？
• corporation　法人っぽいやつ？
• recruit　求人、スタッフ募集（正社員？）
• inquiry　お問い合わせ、質問

ID

レイアウト用

• areaContainer　ページ全体
• areaHead　ヘッダー
• areaContents　コンテンツ部分
• areaContentsMain　メインのコンテンツ
• areaContentsSub　サイドカラム
• areaFoot　フッター

役割別

• siteLogo　メインのロゴ
• topicPath　ぱんくずリスト
• globalNavi　グローバルナビゲーション
• localNavi　ローカルナビゲーション
• copyright　コピーライト

class（子孫セレクタのみで利用）

汎用

• box
• boxIn
• boxOut
• twoColumnBox　2列のボックス
• threeColumnBox　3列のボックス
• section　セクション、区切り

役割

• more　もっとみる
• pageTop　ページの上
• navi　ナビゲーション
• headline　ヘッドライン　
• category　カテゴリー
• summary　概要
• list　一覧
• description　説明、記述
• thumbnail　サムネイル

パーツ

• link　リンク
• name　名前
• telephone　電話
• arrow　矢印
• require　必要
• site　サイト

ページの役割

• archive　記事一覧
• entry　個別記事

ありがちなもの

• title　タイトル
• size　大きさ
• text　テキスト
• image　イメージ

場所

• main　メイン
• sub　サブ
• left　左
• right　右
• top　上
• bottom　下
• forward　進む
• back　戻る

参考にさせていただいたサイト、本

• もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife

• 自分的HTMLテンプレートの組み方 | Takazudo Clipping*

• XHTML&CSS超高速コーディング術

---