とある日、とある時に言われました。
「画像とclass名とid名はしっかり付けて。」
あれ・・・ちゃんとした名前を付けたつもりだったのに・・・。
実はこれ、新人コーダーが陥りやすいポイントでした。
コードって組む人によって書き方は様々なんですけど
「他の人が触ることを考えて組む」ことが大前提なんですよね。
CSSの呼び出すid名やclass名も大事なポイント。
画像だってどんどん増えていくことを考えれば規則性があった方が良い。
その名前でどこに当たる部分か、どの範囲のどこの部分か、わかれば作業だって早くなります。
今回は楽天内のコードを使って解説していこうと思います。
楽天カスタマイズコード(一部)
RMS内でよくカスタマイズに使われるclass名やid名はこちら。
これに「margin」や「font-family」を指定することで簡単に変更出来ます。
| class名 | 使用箇所 |
| .breadcrumbs_list | パンくず |
| .item_number | 商品番号 |
| .item_name | 商品名 |
| .catch_copy | PC用キャッチコピー |
| .price1 | 価格(見出し) |
| .price2 | 価格(数字)/ポイント倍付 |
| .tax_postage | 価格(税込/送料) |
| .shippingCost_free | 送料無料 |
名前をつける際の注意点
記号は「-（ハイフン）」か「_（アンダースコア）」のみ
「-（ハイフン）」や「_（アンダースコア）」以外の記号を使用してしまうと、
コードで間違った処理をしてしまう場合や、エラーなどを引き起こしてしまいます。
また、パソコンに内蔵されている機種依存文字なども避けるようにしましょう。
全角スペース、半角スペースは使用しない
ファイルを正常に処理できないだけでなく、別のid・classとして認識されます。
div class=”item name”
▲これでは「item」と「name」のclass名となってしまう
必ずアルファベットから（数字から開始不可）
id・class名として認識されません。
ファイル名は統一させる
「全て小文字表記」や「単語の間に_（アンダースコア）を入れる」など規則性を持たせると後に付けやすくなります。
命名規則 画像編
楽天での一例をみてみましょう。
例：）
Logo_yoko_valentine_03.png（2017年1月現在バレンタイン特集）
haeder_sprite.png（楽天のアイコン）
20170129_spushop_950x50.gif（スーパーポイントアッププログラムバナー）
楽天でのバナー画像は膨大な量なのでその中でもわかるように、なんて難しいと思いますが
これを見てみるとなんとなく「いつ」「どこ」に使うものかわかりますよね。
制作している人が異なっている場合もあり、付け方に誤差はありますが
下記のようなルールに添って付けられています。
ページ名_部位_種類_詳細_番号(連番)_状態.拡張子
ページ名
どのページで使用しているか、楽天では商品登録番号を使用していることが多いです。
ただし、フォルダがページごとに分かれている場合は省略できます。
部位
新着情報やサイドバー等どこの部分で使用しているか記載します。
種類
サムネイルやバナー、ボタン等どのような種類の画像なのか必ず記載します。
詳細
「丸い」アイコンや「送信」ボタンなど汎用的に使用する画像に付けます。
番号
同じ用途の画像が複数あった場合に連番でつけます。
状態
マウスオーバーやカレントなど、どのような状態になるか必要な場合に付けます。
命名規則 id・class編
知ってる方がほとんどだと思いますが、idとclassの分け方をざっくり説明すると
id：そのページ内で使用できるのは一箇所のみ
class：ページ内何度も使用出来る
画像とは違い、「どこで使用するか」「何をどうするか」
CSSに「fontcolor：red；」を記述しているからと行ってclass名を「.red」にするのはあまりよくありません。
これは赤文字ではなくなった場合に関連性がなくなってしまうためです。
なのでコメントなどの指定する場合は「.comment」や「.text」の名前がいいでしょう。
背景を重ねる場合等は「.inner」の使用をおすすめします。
よく使うid・class名
| 要素 | id・class名 |
| ページ全体 | container |
| ヘッダー | header |
| サイトのタイトル | site_title |
| ロゴ | logo |
| キャッチフレーズ | catch |
| ナビゲーション | nav |
| グローバルナビゲーション | g_navi |
| パンくず | page_path |
| コンテンツ | content |
| メインコンテンツ | main |
| サイドバー | side |
| フッター | footer |
| 記事 | article |
| 案内 | guide |
| 話題 | topic |
| ページトップへ | page_top |
| もっと見る | more |
| お知らせ | info |
| ニュース | news |
| 日付 | date |
| 項目 | item |
| バナー | bnr |
こんな風にまとめてみても名前の付け方はそれぞれなのでご参考程度に使用して頂けたらと思います。
楽天GOLDでも悩むことなく名前を付けられれば幸いです。
