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でのシェアやランキングなど、応援よろしくお願いします。
よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。

