全ての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の中に何度も登場することが出来るのです。

例えば・・・

<div id="contents">
</div>

<div id="contents">
</div>

<div id="contents">
</div>

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

<div id="wrap">
    <div class="contents">
    </div>
    <div class="contents">
    </div>
</div>

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

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

<div id="wrap">
    <div class="main_title">
    </div>
    <div id="main_text">
        <p>testtesttest</p>
    </div>
    <div id="main_text2">
        <p>testtesttest</p>
    </div>
    <div id="main_image">
    </div>
</div>

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

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

20150419_2

先ほどの例をもう一度。

<div id="wrap">
    <div class="main_title">
    </div>
    <div id="main_text">
        <p>testtesttest</p>
    </div>
    <div id="main_text2">
        <p>test2test2test2</p>
    </div>
    <div id="main_image">
    </div>
</div>

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

#main_text{
font-size:12px;
line-height:18px;
text-align:center;
}

#main_text2{
font-size:12px;
line-height:18px;
text-align:center;
}

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

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

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

<div id="wrap">
    <div class="main_title">
    </div>
    <div class="main_text">
        <p>testtesttest</p>
    </div>
    <div class="main_text">
        <p>test2test2test2</p>
    </div>
    <div id="main_image">
    </div>
</div>
.main_text{
font-size:12px;
line-height:18px;
text-align:center;
}

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

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

20150419_3

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

<div id="wrap">
    <div class="main_title">
    </div>
    <div class="main_text">
        <p>testtesttest</p>
    </div>
    <div class="main_text">
        <p>test2test2test2</p>
    </div>
    <div id="main_image">
    </div>
</div>

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

<div id="wrap">
    <div class="main_title">
    </div>
    <div class="main_text">
        <p>testtesttest</p>
    </div>
    <div id="main_text2">
        <p>test2test2test2</p>
    </div>
    <div id="main_image">
    </div>
</div>
.main_text{
font-size:12px;
line-height:18px;
text-align:center;
}

#main_text2{
font-size:14px;
line-height:18px;
text-align:center;
}

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

<div id="wrap">
    <div class="main_title">
    </div>
    <div class="main_text">
        <p>testtesttest</p>
    </div>
    <div class="main_text" id="large_text">
        <p>test2test2test2</p>
    </div>
    <div id="main_image">
    </div>
</div>
.main_text{
font-size:12px;
line-height:18px;
text-align:center;
}

#large_text{
font-size:14px;
}

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

<div id="wrap">
    <div class="main_title">
    </div>
    <div class="main_text">
        <p>testtesttest</p>
    </div>
    <div class="main_text large_text">
        <p>test2test2test2</p>
    </div>
    <div id="main_image">
    </div>
</div>
.main_text{
font-size:12px;
line-height:18px;
text-align:center;
}

.large_text{
font-size:14px;
}

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

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

20150419_6

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

<body>
<div id="gallery">
    <div id="wrapper">
        <div class="photo_list">
            <ul>
                <li><img src="img/photo.jpg" /></li>
                <li><img src="img/photo2.jpg" /></li>
                <li><img src="img/photo3.jpg" /></li>
            </ul>
        </div>
    </div>
</div>
</body>

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

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

<body>
<div id="gallery">
    <div id="wrapper">
     <div id="Nature_photo">
            <div class="photo_list">
                <ul class="clear-fix">
                    <li><img src="img/photo.jpg" /></li>
                    <li><img src="img/photo2.jpg" /></li>
                    <li><img src="img/photo3.jpg" /></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

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

#Nature_photo .photo_list{
    margin:30px 0px;
}

#Nature_photo .photo_list ul li{
  float:left;
  margin-left:10px;
}

#Nature_photo .photo_list ul li:first-child{
  margin-left:0px;
}

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

<body>
<div id="gallery">
    <div id="wrapper">
     <div id="Nature_photo">
            <div class="photo_list">
                <ul class="clear-fix">
                    <li><img src="img/photo.jpg" /></li>
                    <li><img src="img/photo2.jpg" /></li>
                    <li><img src="img/photo3.jpg" /></li>
                </ul>
            </div>
        </div>

        <div id="Food_photo">
            <div class="photo_list">
                <ul class="clear-fix">
                    <li><img src="img/photo4.jpg" /></li>
                    <li><img src="img/photo5.jpg" /></li>
                    <li><img src="img/photo6.jpg" /></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
.photo_list{
    margin:30px 0px;
}

.photo_list ul li{
  float:left;
  margin-left:10px;
}

.photo_list ul li:first-child{
  margin-left:0px;
}

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ボタンからお気に入りブログを
登録する方法