アンダーバー（_）を使うことで選択が簡単になる
ホームページを制作していると画像のファイル名やCSSのclass・id名に困ってくると思います。
実際に制作をしているとよく困ります・・・
Webサーバーにアップすると、画像のプレビューができない場合がほとんどで、ファイル名の一覧しか表示されません。日本語を使う事もできますが、推奨されていないのでなるべく避けようとするとローマ字や英単語になってしまいますよね。
英単語をそのまま書いていくと読みにくいです・・・例えばトップのお知らせ欄に使う画像に命名する場合、トップページであることを示すために「top」、お知らせ欄なので「news」のような単語が思いつきますよね。
それをそのままファイル名にすると「topnews.jpg」なんだか区切りがわかりにくくないでしょうか。絶対に後から見たらわからないパターンです・・・
そんな時に便利なのが、ハイフン（-）やアンダーバー（_）などの記号を入れた命名です。
私は実際に制作をしている上で、アンダーバー（_）を使う方がとても簡単だと思っています。
その理由は、クリック操作でファイル・class・id名が全選択できるからなんです。
ハイフンで命名してある場合
例えば「<img src=”top-news.jpg”&rt;」こんな画像ファイルがあったとします。
この「top-news」の部分を変えたいと思ったときに、キーボードの「Back Space（又はDelete）キー」を操作して一文字ずつ消すか、マウスを使ってドラッグ操作が必要になります。
一文字ずつ消してしまうと、本当は消さなくても良かった部分まで消してしまっていたりすることもあり、表示エラーに繋がりやすいです。
ドラッグ操作でも思うような位置まで選択範囲を伸ばすのは意外と面倒な操作です。
アンダーバーで命名してある場合
同じく「<img src=”top_news.jpg”&rt;」の画像ファイルがあって、「top_news」の部分を変えたい場合、こちらもキーボードの「Back Space（又はDelete）キー」を操作して一文字ずつ消すか、マウスを使ってドラッグ操作が必要になります。
ですがもう一つ、ダブルクリックをすることで「top_news」だけを素早く選択する事ができるんです。
実際に試してみてください
この2つのファイル名を実際にダブルクリックしてみてください。
「top-news.jpg」
「top_news.jpg」
上の場合だと、「top」または「news」だけが選択されるはずです。ハイフンが選択された方も中にはいるかもしれませんね。
下の場合だと、「top_news」までが選択されるはずです。
この、「ファイル名だけ変えたい」時にアンダーバー（_）を使っておくことで、素早く変更作業をすることができます。class名・id名でも同様です。
Webページを制作する時には画像のファイル名やclass名、id名が多く使われるのでかなり利用頻度の高い操作です。
些細な違いですが、作業する回数が多くなればなるほどこの便利さに気が付くはずです。
是非試してみてください。
ハイフンを設定しておいた方が便利な場合もある
ファイル・class・id名の命名ルールによってはハイフン（-）の方が便利な場合も、もちろんあります。
例えば、imgフォルダ内にすべてのページ画像を入れている場合、下記のような命名ルールにしている場合です。
title-top.jpg
title-new.jpg
title-contact.jpg
こうなっている場合、ページタイトルである事とそれをあてはめるページが一目でわかります。
また、「<img src=”img/title-top.jpg”>」のソースをコピーして使いまわそうと考えた時、ファイル名の「top」だけを書き換えればいいので、「topの部分でダブルクリック」をするだけで変更したい箇所だけを素早く選択することができます。
このように、命名のルールによってはハイフン（-）の方が有利に働く場合もありますので、お好みに応じて使い分けてみてください。
それでも私はアンダーバー（_）を推します
アンダーバー（_）を推す理由はダブルクリックを使った範囲選択の他にもう一つ理由があります。
それは、ファイル名のコピー・貼り付けのしやすさです。
画像ファイルをクリックで選択してキーボードのF2キー」を押してみてください。
ファイル名が書き換えられるようになりますよね。この際、ファイル名が全て選択された状態になります。
この仕様を利用して、ファイル名の文字列をコピーします。
そして書き換えたいimg要素のファイル名へ貼り付け・・・
アンダーバー（_）で命名しているので、貼り付ける際はダブルクリックでファイル名の文字列を選択して一度に入れ替える事ができます。
また、ファイル名の文字列をコピーするときに、ショートカット「Ctrlキー + C」を使うと更に便利です。
文面ではなかなか伝わりにくいですが、是非一度試してみる事をオススメします。
本当に便利でスピーディーにページ制作を進めることができますよ。
まとめ
・画像ファイル名、CSSのclass・id名には単語ごとにハイフン（-）またはアンダーバー（_）を使うとわかりやすくなる
・アンダーバー（_）を指定しておけば、ダブルクリックの操作だけでファイル・class・id名を全選択する事ができる
・ファイル・class・id名のコピー・貼り付け操作がとても簡単にできるようになる
・ダブルクリックの操作だけで必要な箇所を選択できるので、本来必要な文字まで選択してしまう事が少なくなる
