コーディングの際に意外と手間取るのが、画像のスライス、と画像の命名です。
CSSのclass名とid名も同じくらい迷って後で修正する際に迷子になってしまうこともよくありますが。。。
画像の命名をスムーズにするために命名ルールを決めたいと思います。
あと、忘れないように備忘録としても・・・。
上の図が基本的なルールです。
例:img_top01.jpg
識別名の一覧は以下になります。
識別名 | 用途 | 命名サンプル |
---|---|---|
bg | 背景や、ボーダ用にリピートされて使われる画像 | bg_top01.jpgbg_dotx01.jpgbg_dotx_3x1.jpg |
btn | ボタンとして使われる画像 | btn_contact01.jpgbtn_contact01_on.jpg |
ico | アイコンとして使われる画像 | ico_arrow01.jpgico_square01.jpg |
bnr | バナーとして使われる画像 | bdr_top01.jpgbnr_side01.jpg |
h1-h6 | h1タグなどの論理タグで囲まれる見出し画像 | h2_business01.jpgh3_service01.jpg |
tit | h1-h6等に用途が限られない見出し画像 | tit_blog01.jpgtit_news01.jpg |
txt | デザイン上、画像化するテキストの画像 | txt_blog01.jpgtxt_news01.jpg |
pic | 商品や人物、風景などの写真画像 | pic_blog01.jpgpic_news01.jpg |
thumb | 写真と連動するサムネイル(小さい)画像 | thumb_blog01.jpgthumb_news01.jpg |
img | 写真以外のイラストや図表などの画像 | img_blog01.jpgimg_news01.jpg |
mainimg | ページのメイン画像 | mainimg_top.jpgmainimg_news.jpg |
mov | 動画(youtube、vimeoなどはURLで) | mov_top.movmov_news.mov |
識別名はこれだけではなく、いろいろまた追加もあると思います。
とりあえずこれをベースにしたいと思います。