Tue. 31 Jan 2017 RMS

楽天のページ作成で注意が必要なカスタマイズコードと命名規則

とある日、とある時に言われました。
「画像と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