id・class名に日本語が使えるってホント?

  • このエントリーをはてなブックマークに追加
【CSS】id名、class名に日本語が使えるってホント?

idやclass名を日本語に設定する事ができます

以前に参考にしていたWebサイトを見ていた時です・・・何気なくclass名を確認してみると驚きの光景が広がっていました・・・
・・・class名に日本語が使われていたんです!

HTMLには日本語は使わず、アルファベットのみと教わっていたので、すごく衝撃的でした。
思わずIE・Firefoxとブラウザを切り替えて、動作を確認したほどです。

Webサイトを構築・更新・運営する人が日本人の場合、とても有効な方法なのかもしれません。
「このCSSはどの部分のレイアウトをしているのか?」という疑問を一気に解決できる可能性を秘めています。
ただし命名センスがでたらめな場合・・・残念な未来しか見えません・・・
class名の名づけは、アルファベットでも日本語でも難しいですね。

落ち着いて考えてみれば、日本語のWebサイトを構築する時、本文には日本語が含まれます。
なので動作しない道理はないという訳です。
でも画像やPDFなどのファイル名を日本語にするのはアウトです。
ファイルの中身に何が入っていても大丈夫ですが、それらのファイル名を日本語にしてしまうと、Webサーバーが対応していなかったり、リンクURLがでたらめになったりと、あまりいい結果につながりません。

それでもやっぱり違和感がある

日本語が使えるのはわかりましたが、実際にHTMLを見ると、違和感しかありません。
「日本語が書かれている = 本文」という認識が強く、一目見ただけでは「どこが本文かわかりにくい」と感じてしまったのです。
また、実際に入力してみたところ、入力モードの切り替えがあまりにも頻繁に起こり、打ち込みにくいと感じてしまいました・・・

日本語を母国語にしている人からすれば、class名が日本語である事がメリットとなるのかもしれませんが、Webサイトはオープンな場に公開するものです。
当然ながら日本語を読めない人からも見られます。
HTMLソースまで細かく見るのか?といえば疑問もありますが、やはりアルファベットの方が適切でしょう。

たかが1バイトの差でも、塵も積もれば・・・

「ファイルサイズ」という観点から見ると、日本語(全角文字)は一文字2バイトですので、全体で見て、ファイル容量が大きくなりますね。
1バイトの差しかありませんが、class名は登場頻度がとても高いので、総計でかなりの容量になりそうです。
たかが文字情報、たかが1バイトですが、塵も積もれば山となるように、放置していていいという訳にはいきません。

Webサイトを快適に閲覧してもらったり、高速で表示させるには回線の速度も重要ですが、その回線を流れるデータ量にも注目してください。
いくら高速で通信ができる環境でも、データ量が膨大になれば、その分読み込みに時間がかかります。
データ量は少ない方が素早く表示ができるのです。

Webサイトの表示に時間がかかりすぎると、ページを見てもらうことなく、戻るボタンを押されてしまう可能性がどんどん大きくなってしまいます。
とある調査によれば、3秒以上待たせると全体の40%がページを見ることなく、別のページを探しにいくそうです。

さて、圧縮するといっても、画像や動画ファイルの圧縮には限界があります。
あまりにも圧縮しすぎると、ジャギーだらけの汚い画像・動画が出てしまい、良い印象を持ってもらえなくなってしまいます。
そうなると残るはHTMLやCSS、JavaScritpといったテキストベースのファイルを圧縮するしかありませんね。

こうしたテキストベースのファイルを圧縮するのは実に単純で、「改行」や「コメント」「無駄なスペース」を削るしか方法がありません。
本文を削ってしまったら、正常に動作しなくなるのでこれしか方法がないという訳ですね。
改行を無くしていけば、当然後から見た時に読みにくく、わかりにくいソースが出来上がります。
メンテナンスや更新、ページ追加などのWebサイトを運用する時に発生する作業を考慮すれば、HTMLとCSSは手を加えたくありません。

こうした理由から、先ほどの3つのファイルで真っ先に圧縮する対象となるのはJavaScritpです。
ところがclass名に日本語が使われていたら・・・?HTMLとCSSも手を加えて、データ量を少なくする余地がありますね。

こうしたWebサイト全体のファイル容量を少しでも小さくし、高速で見れる環境を用意する事を努力するのは重要です。

認識しやすいけれど、命名センスが問われることには変わりない

日本語を使えば、確かに理解しやすくなります。
日本人にとって日本語は母国語ですので、それは当然でしょう。

しかしclass名の名づけがいい加減だと、話は変わってきます。
「文字が読めるけれど、どこに使っているかわからない」
「何を制御しているのかわかりにくい」
「書いてある事と、実際にやっている事が違う」
などのトラブルにも発展しかねません。

これはアルファベットを使う場合も同様の事が言えますね。
読める文字を使うからといって、命名センスが問われることには変わりなさそうです。

逆にclass名で説明しすぎるのも問題で、HTMLとCSSが煩雑になってしまいます。
特にHTMLでの表記は大問題ですね。
class名があまりにも長いと、どれが本文かわかりにくくなり、迷子になってしまいます。

まとめ

・id・class名に日本語が使えるが、Webサイト全体のファイル容量が増えてしまう結果につながる
・class名の命名センスが問われる事に変わりはない
・class名を長くしすぎると、HTML・CSSが煩雑になる

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください