なるWeb 
どうも、7noteです。いきなりですが第一回コーダークイズ、はじめます！「画像名の付け方編」
第一問
ホームページ制作時、つけるならどっちの画像名が正しい？
企業のロゴ画像の場合
A「ロゴ画像.jpg」
B「logo.jpg」
10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・
正解は…
でした。
〜〜なぜ？〜〜
WEBサーバーやブラウザでは読み込めない文字が存在します。その中でも以下のような画像は読み込めない場合があるので、使わないようにしましょう！読み込めないと画像が表示されないなんてことも！！！
- 日本語などの全角文字
- 半角・全角スペース
- ハイフンとアンダースコア以外の記号
- 機種（環境）依存文字
第二問
ホームページ制作時、つけるならどっちの画像名が正しい？
スライドショーの3枚目に使う画像の場合
A「slide_img03.jpg」
B「slide img03.jpg」
10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・
正解は…
でした。
〜〜なぜ？〜〜
第一問と同じ！WEBサーバーやブラウザでは読み込めない文字が存在します。復習も大切ですね。
使わない方がいい文字
- 日本語などの全角文字
- 半角・全角スペース
- ハイフンとアンダースコア以外の記号
- 機種（環境）依存文字
第三問
ホームページ制作時、つけるならどっちの画像名が正しい？
猫の画像の場合
A「inu.jpg」
B「dog.jpg」
10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・
正解は…
と言いたいのですが、Aを選んでも別に正解かなと私は思います。
〜〜なぜ？〜〜
どちらでも問題なく表示されるので、どちらも正解にしました。
ただプログラミングは基本的に英語ベースで制作されることがほとんどです。
そのため、習慣として英語で表せられるところは英語にする場合が多いです。
（でも日本の人しかみないサイトで無理に長い認知度の低い英語名のファイル名をつけるのは逆効果かも！）
第四問
ホームページ制作時、つけるならどっちの画像名が正しい？
ボタンのホバー時の画像の場合
A「button_hover.gif」
B「button_on.gif」
10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・
正解は…
でした。
〜〜なぜ？〜〜
ホバー時に画像を変えるなどはコーディングの中でよく出てくるシチュエーションなのですが、ホバー時の画像には最後に「_on」を付け、ホバーしていない時は「_off」をつけるなどすると、ファイルをみただけで2枚で1セットなのがわかりやすいし、このようにつける人が多いかなと思います。
第五問
ある会社での話。
上司「うちの会社、今日で10周年になるから、うちのホームページの企業ロゴの横に、10周年のマーク追加しておいて」
このヘッダーにあるロゴの横に10周年マークを追加することになりました。
この10周年ロゴのマークの画像名、付けるならどっちが好ましい？
A「anniversary_mark.png」
B「10years_ anniversary.png」
10秒以内にお考えください！
（チッチッチッチッチ…）
・
・
・
・
・
・
・
・
正解は…
でした。
〜〜なぜ？〜〜
ちょっと難しい問題ですし、状況によってはBが正解の場面もあるかと思います。
ただ、私は今回のシチュエーションであればAで対応します。なぜかと言うと、来年のことを考えるからです。
想像の一年後
上司「あ、今日で11周年か。10周年のマーク、11周年に変えといて。」
ほぼ間違いなくこう言われるでしょう。この時、もしBのように画像名に10周年の意味の「10」の文字を入れてしまっていると11周年に変わった時にHTMLのソースに書いているテキストも変更しなくてはならなくなります。単純にめんどくさいですよね。これがもし100ページもあるサイトのヘッダーで使われてて、ヘッダーが共通化されてないなんてことになったら・・・
想像しただけで嫌になります。（実際はそんな場面ないと思いますが。）
なので、予め更新が予想される画像にはそのような数字などは使わず、Aの書き方で対応します。これならサーバーの画像データを差し替えるだけで何も問題ありませんね！
いかがでしたでしょうか？
たかが画像名、されど画像名。ここにも小さな気遣いができる人はきっと大きな仕事も成功すること間違いなし！！
あくまで個人的主観に一般常識を上乗せして書いているので、人によっては違う！となるかもしれませんがご容赦ください。
他にもこんな書き方してます！などあればぜひコメントください！
