WEBデザイナー初心者が間違えやすいidとclassの使い分けやルール

WEBデザイナー初心者が間違えやすいidとclassの使い分けやルール
所要時間:約716

今回は少しWEBデザインのことについて触れたいと思います。

WEBデザインの勉強をする上で初心者がつまづきやすいidとclassの使い分けについてです。

私もこれは理解するのに時間が掛かりました。

知ってしまえばなんてことは無いのですが、ネットや書籍の説明文を見ても分かりづらかったので私なりに分かりやすくまとめてみました。

idとclassの概念

まず基本的に下記の絶対的な決まりがあります。

同じ名前のidはそのページに1つだけ
同じ名前のclassはそのページに複数あってもよい

そんなことは知っているよ!という人がほとんどでしょう。

その上で使い分けが分かりにくいんですよね。

下記のように自分の中でルールを設定すると使い分けに迷わなくなります。

会社によってはあらかじめ社内で統一されたルールやガイドラインがあると思いますのでそれに従ってください。

idの使い方とルール

レイアウトに関する部分はidにする

分かりやすく言えば、サイト構成の大枠であるヘッダー、コンテンツエリア、サイドバー、フッター、などなどページの主要レイアウトを構成する部分をidにします。

レイアウトに関する部分はidにする

例えばヘッダーはそのページに一つしかありませんよね?

このルールであれば同じidがページ内で重複することはありません。

そのほかにはそのページに絶対一つしかないであろう唯一無二の要素にidをつける場合です。

例えばフッターのcopyrightの部分なんかは絶対にそのページに一つだけです。

なので、id=copyrightなどとつけてOKです!

よく初心者が迷ってしまうのが、『なんかidたくさん付けちゃったけど大丈夫かな?』と思ってしまうことですが、idがたくさんあって駄目ということは無いです。

もちろん良く分からないから全部idにするっているのはナシです。

要は使い分けが出来ていればいいのです。

なんで同じ名前のidは一つだけ?

厳密には同名のidはページに複数あっても一応ブラウザで表示はされてくれるんですよ。

ですが、例えばid=itemBoxがページ内に複数散りばめられていたとします。

コンテンツ内にある特定のid=itemBoxにcssで装飾したいとします。

しかしページ内にid=itemBoxは複数あるので、コンテンツ内にあるcssを効かせたいid=itemBox以外のところでもcssが効いてしまいます。

ページ内の特定の場所にcssを効かせたいというときに便利なんですよね、特定の箇所に効かせたいのにそのidが複数あっては駄目ですよね?

classの使い方とルール

繰り返し使うパーツ部分にはclassにする

例えばコンテンツ部分の商品メニューがずらっと並ぶ箇所とかですね。

ここは繰り返し何度も使うのでidで個別に一つ一つ名前をつけていくのは非効率です。

繰り返し使うパーツ部分にはclassにする

全部classでも大丈夫といえば大丈夫

全部classでも大丈夫といえば大丈夫です。

ですが、例えば制作実績として受ける企業に見せるときは、100%ソースも見ます。

しっかりとidとclassの使い分けが出来ているかどうかなんて絶対見ますよ、ルールが守られた秩序のあるソースコードは美しいのです。

idとclassの命名規則について

idとclassの命名規則、つまり名前の付け方はサイト内で統一するべきです。

会社組織であれば社内で統一された命名規則のレギュレーションがあったりします、その場合は会社のルールに従ってください。

命名規則は会社や人によってマチマチで絶対的な決まりというのはありませんが、ここでは私がid名・class名を付けるときに気を付けていることを説明していきます。

ハイフン・スネーク・キャメル

命名の仕方としてはまず下記の3つの形式のどれを使用していくかを決めましょう。

ハイフンケース⇒単語と単語をハイフンでつなぐ
スネークケース⇒単語と単語をアンダーバーでつなぐ
キャメルケース⇒最初の単語は頭文字を小文字、次回以降は単語の頭文字は大文字で記述

contentboxと命名したい場合は下記のようになります。

  • ・ハイフンケース⇒content-box
  • ・スネークケース⇒content_box
  • ・キャメルケース⇒contentBox

上記は好みで決めてもいいのですが、私的にはハイフンケースはお勧めしません。

ハイフンケースで繋がれたid・classはダブルクリックで一発でコピーできないからです。

例えばハイフンケースで書かれたcontent-boxをコピーする場合はcontent-boxの文字をドラッグして選択しなくてはいけません。

content-boxをダブルクリックすると下記のようになりませんか?

content-box
または、
content-box

それに対してスネークケースとキャメルケースはそれぞれダブルクリックで選択することができます、content_boxとcontentBoxをダブルクリックで選択してみてください、下記のように選択できるはずです。

content_box
contentBox

いまだに根強く使われているハイフンケースですが、おそらく最初に上記のような理由を教えてくれる人がいなかったために、なんとなく使い続けているのでは多いのではないかと思います。

そして自分の中で一度出来上がったルールはなかなか変えれないものです。

ハイフンケースを使うメリットは特にないので、今のうちからスネークケースかキャメルケースに慣れておきましょう。

ちなみに私は最初に勤めていた会社がキャメルケースだったのでキャメルケースのままです。

以降、このページではキャメルケースで進めていきます。

ローマ字ではなくちゃんと英語で書こう

例えば検索ボックスを作る場合、検索ボックスを囲む要素のidまたはclass名はどうしますか?

駄目な例

kensakuBox

検索の部分をローマ字で書いた例ですが、これはダメな例です。

良い例

searchBox
searchFormBox

検索の部分をきちんと英語で書いた好例です。


上記はどちらでも問題はないです、完全に見た目の問題です。

ですがWEBデザイナーを目指すなら見た目にはこだわってください、ちゃんと表示するからどっちでも良いというわけではありません。

ちなみに検索ボックスはフォームですのでsearchFormBoxが最も良いと私は思います。

慣れが大切、たくさん数をこなすことが大切

自分の中でのルールがあったほうが迷うことが無くなりますし、それはコーディングのスピードアップにつながります。

こういった命名規則については最初は戸惑うかもしれませんが、これは慣れです。

私も最初は滅茶苦茶なid名・class名でしたが今では上記のルール通りの命名にナチュラルでできます。

ちなみにこのサイトはワードプレスの無料テーマを無理やりカスタマイズしたものなのでこの通りの命名規則にはなっていません。

大事なのでもう一度言いますが慣れが大切です、たくさん数をこなしてください。

WEBデザインは習うより慣れろ!下手でも分からなくてもとりあえず作る
WEBデザイン未経験の方はまずは何から勉強しますか? 何から勉強すればいいか分からない、どこから手を付ければいいか分からない、そんな方...

これまでのルールを踏まえたうえでのサンプルコード

下記のワイヤーをこれまでに説明したルールに則ってHTMLで書いてみます。

繰り返し使うパーツ部分にはclassにする

ページのレイアウト部分はid、レイアウト以外でもcopyrightのようにページ固有の箇所もidにしてもいいですがこれはどっちでもいいです。

商品メニューのように繰り返し使うパーツのような箇所はclassで組み立てるとこんな感じですね。

最後に

WEBサイトといえばデザイン部分にばかり目が行きがちですが、こういったソースでもセンスが見られます。

たくさんのWEBサイトを作っていれば今はピンとこなくてもいずれ分かります。

そのためにもまずはたくさん数をこなしてくださいね!

WEBデザインは習うより慣れろ!下手でも分からなくてもとりあえず作る
WEBデザイン未経験の方はまずは何から勉強しますか? 何から勉強すればいいか分からない、どこから手を付ければいいか分からない、そんな方...

WEBデザイナーに強い専門型の転職支援サービス

マイナビクリエイター

マイナビクリエイターは大手転職サイト『マイナビ』が運営する、WEBデザイナーなどのクリエイター特化型の転職支援サービスです。

IT・WEB業界経験のあるクリエイティブ専門のコンサルタントが多数在籍しているのでWEBデザインの転職を考えているなら登録必須の転職サイト。

公式サイトを見る

ワークポート

IT・インターネット業界専門の転職支援サービスです。
転職コンシェルジュという担当のコンサルタントが転職を手厚くサポートしてくれます。

また独自の『eコンシェル』というスケジュール管理・選考管理・求人提案・セミナー案内などをしてくれるオリジナルのシステムがある辺りから力の入れ具合がうかがえます。

公式サイトを見る

知名度が高く登録企業が多い総合型の転職支援サービス

リクルートエージェント

リクルートエージェントは求人サービス系の会社としては最大手のリクルートが運営する転職支援サービスです。

WEBやITなどのクリエイター特化型ではないものの、やはり転職・就職の最大手企業ですので抑えておきたいところ。

転職求人情報サイトのリクナビNEXTと違い、転職エージェントという担当者が転職のサポートをしてくれるところが大きな魅力です。

公式サイトを見る

DODA -デューダ-

DODAは、こちらもリクナビと並ぶ転職市場最大手で運営元はインテリジェンスです。
転職市場ではかなり有名で求人の質が高い印象。

こちらもWEBやITなどのクリエイター専門ではありませんが、その豊富な求人数と知名度からして登録しておく価値はあります。

経験豊富なキャリアコンサルタントがマンツーマンで転職指導をしてくれます。

公式サイトを見る

役に立ったらシェア!

ランキング応援よろしくお願いします!

ブログランキング・にほんブログ村へ