Web制作(HTML)における画像ファイル名の付け方

HTML / CSS
この記事は約2分で読めます。
スポンサーリンク

画像名の付け方、決まってますか?

Web制作では必ずと言っていいほど画像を使います。

画像のファイル名の付け方に決まりがなくてもHTMLは書けます。しかし、後から修正したり管理したりすることを考えると、ファイル名の付け方に決まりがあった方が便利です。

そこで今回は、過去の実務研修で習った画像ファイル名の付け方をご紹介します。

CSSの命名規則でもそうですが、「これがおすすめ!」とは一概には言えないので、自分にあったものや自分で分かりやすいものを使うのが良いと思います。

会社やチームで制作する場合は統一しましょう。

実務研修で習った画像名の付け方

2018年に闇派遣会社で習った画像名の付け方です。

闇派遣会社について詳しく知りたい方はコチラの記事をご覧ください。http://onedarling.site/jobchange/webdesignerstory/

会社自体は闇でしたが、講師の方はWebデザイナーとして5年以上の経験がある方だったので安心してください。

画像ファイル名の命名基準

基本ルールはコチラ。

例えばindex.htmlのメインビジュアル兼h1の画像でしたら、
「index_h01.jpg」

となります。

ネコーダー
ネコーダー

連番はこのように習いましたが、001とか1とかでも良い気がします。そのページ内で使う画像数に合わせるのが良いと思います。

画像の種類別の接頭語

このように習いました。

画像の種類 接頭語
イラスト・写真 im
見出し h
ボタン bt
バナー bn
文字 tx
アイコン ic
背景画像 bg
ナビ nav

個人的にim→img、bt→btnとしたくなります…(´ε` )

また、もしhtmlファイル毎にフォルダ分けしているのなら、最初のhtmlファイル名は付けなくて良い気がします。

contact_im02.jpg→im02.img
(contactのフォルダが存在していて、その中のimagesフォルダに格納されている場合)

みたいな感じです。

まとめ

今回紹介したのはあくまで一例ですので、独自に考えてみるのも良いかもしれません。

とにかく「分かりやすい」「管理しやすい」これを意識することが大切だと思います。

コメント

タイトルとURLをコピーしました