全てのdivにひたすらidを振りまくってる人にidとclassの使い分けを教える。だからもうid振りまくるのは止めてくれ。 | Garney.Web

全てのdivにひたすらidを振りまくってる人にidとclassの使い分けを教える。だからもうid振りまくるのは止めてくれ。

スポンサーリンク

20150419_4

他人が作ったソースをイジるく機会があって、今せっせと中身を改造しているのですが、中身を見て驚いた。ありとあらゆるdiv要素にidが振られていたっていう。泣きそうになりました。「とかいう自分も昔はそんなことしてたなぁ」とか思いながら、しぶしぶ書き直すことに。今日はidで溢れかえるhtmlの何がダメなのかってことを、鬱憤晴らしに書く。もう書く。

idとclassとは

20150419_5

そもそも、htmlのタグには属性を書くことが出来る。殆どの場合はidかclassを書くことになる。他にも沢山あるけど、大体今言ったidかclass。じゃあidとclassって何なのかと言うと、簡単にいえばタグ(要素)に名前を命名してやるために使う。要素に名前をつけてやることによって後からhtmlを読む時に、どこに何が書いてあるか分かりやすくなるし、もっと重要なのはCSSで要素にスタイルを適応させる時に活躍する。

結局idもclassもどちらを使っても意味は同じなのです。ただ、定義が違っていてidは1つのhtmlの中で同じ名前が唯一1つしか存在できません。一方classは1つのhtmlの中に何度も登場することが出来るのです。

例えば・・・

<br />
&lt;div id=&quot;contents&quot;&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;contents&quot;&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div id=&quot;contents&quot;&gt;<br />
&lt;/div&gt;<br />

これは1つのhtmlに3回も同じ名前のidが存在するために不適切です。

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;contents&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;contents&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

一方こちらは適切な書き方です。同じ名前のidは1つしかなく、複数登場しているcontentsと命名されたdiv要素はclassで指定されているので問題ありません。

こんな感じでidとclassを使い分けていきます。しかしながら、自分が今触っているhtmlはこんな感じ。

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_text2&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

一部抜粋ではありません。こんな感じで書かれていて例では、行数が短いですが、実際は何百行と、こんなノリのHTMLが続きます。頭がおかしくなりそうです。

では、idで溢れたHTMLの何がダメなのか

20150419_2

先ほどの例をもう一度。

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_text2&quot;&gt;<br />
        &lt;p&gt;test2test2test2&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

これはこれで構文として間違っていません。同じidは重複していません。でもね。main_textとmain_text2は同じ構成の要素なのだから、idを使わずにclassでまとめてしまえば良いんです。main_textとmain_text2はどちらもdiv要素の中にp要素が入っていて似ていますよね。というか同じです。中に入っているテキストが違うだけなんです。こんな似たような要素に、いちいち違う名前を付けていると、スタイルシートを書く時に面倒になります。どう面倒なのか・・・もしもこの2つが全く同じスタイルだとしても、main_text,main_text2としていると以下のようにスタイルシートを記述しなければなりません。

<br />
#main_text{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}</p>
<p>#main_text2{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}</p>
<p>/*あるいはまとめて、こうも書ける*/<br />
#main_text,<br />
#main_text2{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}<br />

今は2つしか無いので別に良いですが、これが4つ、5つ・・と増えていくといちいち面倒じゃないですか?4回も5回も同じことをコピーするとしても書き換えないといけない。まとめて書いてしまった場合でも、いちいち新たなidをスタイルシートに記述しないといけない。

じゃあ、クラスを使えばどうなるか。

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;test2test2test2&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
.main_text{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}<br />

はい1回.main_text{スタイル}と書けばこれで同じ名前の要素には同じスタイルが適応されます。4つ5つと要素が増えていってもいちいちスタイルシートを更新しなくて済みます。これがclassで書くと嬉しいことです。

完全に同じスタイルじゃない時はどう書くと良いのか

20150419_3

じゃあ、完全に同じスタイルではない時ってどうするねんと・・先ほどの例をまた見てみます。

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;test2test2test2&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

今度は、2つ目のmain_textだけフォントサイズを大きくしたいと思います。全く同じスタイルじゃないから

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_text2&quot;&gt;<br />
        &lt;p&gt;test2test2test2&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
.main_text{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}</p>
<p>#main_text2{<br />
font-size:14px;<br />
line-height:18px;<br />
text-align:center;<br />
}<br />

こうなるのでしょうか?そんなわけない。変わるのはフォントのサイズだけなのだから、幾つか書き方はあるだろうけど・・・

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot; id=&quot;large_text&quot;&gt;<br />
        &lt;p&gt;test2test2test2&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
.main_text{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}</p>
<p>#large_text{<br />
font-size:14px;<br />
}<br />

共通のスタイルはmain_textとして残して置いて変わる所だけをidで指定してやれば良い。
でもこの場合だと、もしlarge_textが他の場所でも使いたくなるかも知れない。だから・・・

<br />
&lt;div id=&quot;wrap&quot;&gt;<br />
    &lt;div class=&quot;main_title&quot;&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text&quot;&gt;<br />
        &lt;p&gt;testtesttest&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class=&quot;main_text large_text&quot;&gt;<br />
        &lt;p&gt;test2test2test2&lt;/p&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;main_image&quot;&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

<br />
.main_text{<br />
font-size:12px;<br />
line-height:18px;<br />
text-align:center;<br />
}</p>
<p>.large_text{<br />
font-size:14px;<br />
}<br />

とするのが一番良いと思う。

じゃあidはどんな時に使えばいいのか

20150419_6

例を見ている限りidって要らないんじゃね?って思うかも知れない、だけどそうでもない。一方でclassばかりでも使いにくい。両方上手く使っていくことが重要です。どう使うのか、まずページの中に一度しか現れない場所につける。
例えば、写真のギャラリーページを作ったとして、htmlファイルをgalleryというフォルダの中に入れたとします。

<br />
&lt;body&gt;<br />
&lt;div id=&quot;gallery&quot;&gt;<br />
    &lt;div id=&quot;wrapper&quot;&gt;<br />
        &lt;div class=&quot;photo_list&quot;&gt;<br />
            &lt;ul&gt;<br />
                &lt;li&gt;&lt;img src=&quot;img/photo.jpg&quot; /&gt;&lt;/li&gt;<br />
                &lt;li&gt;&lt;img src=&quot;img/photo2.jpg&quot; /&gt;&lt;/li&gt;<br />
                &lt;li&gt;&lt;img src=&quot;img/photo3.jpg&quot; /&gt;&lt;/li&gt;<br />
            &lt;/ul&gt;<br />
        &lt;/div&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />

ページの名前判別にbodyやその直下に入れるdivにidを使ったり、wrapperまたはwrapなどは、コンテンツ全体を包むという意味としてidを降って使ったりします。コンテンツ全体を包むのだから1回しか現れません。全体と言ってるのに2回も3回も出てきたらそれって全体包んでいませんよね。だから一度しか使いません。

他には、こんな良いこともあります。

<br />
&lt;body&gt;<br />
&lt;div id=&quot;gallery&quot;&gt;<br />
    &lt;div id=&quot;wrapper&quot;&gt;<br />
     &lt;div id=&quot;Nature_photo&quot;&gt;<br />
            &lt;div class=&quot;photo_list&quot;&gt;<br />
                &lt;ul class=&quot;clear-fix&quot;&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo.jpg&quot; /&gt;&lt;/li&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo2.jpg&quot; /&gt;&lt;/li&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo3.jpg&quot; /&gt;&lt;/li&gt;<br />
                &lt;/ul&gt;<br />
            &lt;/div&gt;<br />
        &lt;/div&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />

自然風景を撮った写真のリストとして、idで名前を付けてその中に画像を入れていきます。
スタイルシートは例えばこう書かな。

<br />
#Nature_photo .photo_list{<br />
    margin:30px 0px;<br />
}</p>
<p>#Nature_photo .photo_list ul li{<br />
  float:left;<br />
  margin-left:10px;<br />
}</p>
<p>#Nature_photo .photo_list ul li:first-child{<br />
  margin-left:0px;<br />
}<br />

全部#Nature_photoが先頭に付けられています。こうすることでclassの重複を防ぐ事ができます。
もし先頭に#Nature_photoが付いていなかったとしたら、こんなhtmlだった時に困ります。

<br />
&lt;body&gt;<br />
&lt;div id=&quot;gallery&quot;&gt;<br />
    &lt;div id=&quot;wrapper&quot;&gt;<br />
     &lt;div id=&quot;Nature_photo&quot;&gt;<br />
            &lt;div class=&quot;photo_list&quot;&gt;<br />
                &lt;ul class=&quot;clear-fix&quot;&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo.jpg&quot; /&gt;&lt;/li&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo2.jpg&quot; /&gt;&lt;/li&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo3.jpg&quot; /&gt;&lt;/li&gt;<br />
                &lt;/ul&gt;<br />
            &lt;/div&gt;<br />
        &lt;/div&gt;</p>
<p>        &lt;div id=&quot;Food_photo&quot;&gt;<br />
            &lt;div class=&quot;photo_list&quot;&gt;<br />
                &lt;ul class=&quot;clear-fix&quot;&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo4.jpg&quot; /&gt;&lt;/li&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo5.jpg&quot; /&gt;&lt;/li&gt;<br />
                    &lt;li&gt;&lt;img src=&quot;img/photo6.jpg&quot; /&gt;&lt;/li&gt;<br />
                &lt;/ul&gt;<br />
            &lt;/div&gt;<br />
        &lt;/div&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />

<br />
.photo_list{<br />
    margin:30px 0px;<br />
}</p>
<p>.photo_list ul li{<br />
  float:left;<br />
  margin-left:10px;<br />
}</p>
<p>.photo_list ul li:first-child{<br />
  margin-left:0px;<br />
}<br />

Food_photoのliには違うスタイルを適応させたいのに、全てのphoto_listに先ほど書いたcssが適応してしまいます。こんな時先頭に#Nature_photo .クラス名と書けば、Food_photoの li要素には、影響せずに済むのです。おまけに別のhtmlにもそのままコピーして貼り付けるだけで使いまわせる可能性が高いです。classだけでcssを書いていると、コピー先にも同じ名前のclassが振られていて、結局そのまま使えないことも多くなり不便です。でもidを降っておけばそのような事故を防ぐことができるのです。

結局、両方適切に上手に使えば問題ない

20150419_1

ということです。全部id振られ放題祭りで、同じようなスタイルなのにコピペ出来ないし、それをするためにclassに書き換えないと行けないし・・・先の更新のことを何も考えられていないhtmlだし・・・・こうは書いちゃダメだなあ・・・と。昔の自分もこんな風に書いていたとは言え、改めてidとclassの使い分けの大切さを気付かされてのでした。

全部の要素をid祭りしたら、後からえらい目にあうからね。本当に止めましょう。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法