【html】divの乱用･使いすぎは問題なのか解説
「divの使い過ぎはよくない！」とはよく聞くけどほんと？なんでそういわれるの？
Webサイト制作歴10年の私テイクがdivの乱用･使いすぎは問題なのか解説します。
目次
【結論】ユーザー側にとっては問題ない、管理側にとって問題あり
結論から言うとdivの使い過ぎは、ユーザー側にとっては問題なく、管理側にとって問題あります。
ユーザーにとって、htmlソースがどうなっているかなんて関係ありません。見れればいいのです。
管理側にとって、divだらけのソースは管理が困難になりがちです。自分の首を絞めることになります。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
初心者はまず完成させることを第一に
あなたがもしホームページ作成初心者なのであれば、divの量などあまり気にせず、まずは完成させることを意識してください。
納品先が経験者でない限りhtmlソースを確認することはまずありません。
divだらけのサイトだろうと多くのユーザーからすればまるで関係ありません。
「htmlソースどうなっているかな？適切なマークアップをしているかな？」なんてチェックするユーザーはいません。いたところでなんら問題ありません。
多くのユーザーにとっては、ちゃんと見れるサイトになっていればいいのです。
サイトの本質は情報提供です。ここを大事にしましょう。
慣れてきたら適切なマークアップを
あなたがホームページ作成をそこそここなしてきたのであればdivだらけのソースからは卒業していきましょう。
少なくともh1～h6、p、ul、liくらいは問題なく使えるようにしましょう。
divだらけの問題点
「divの使い過ぎはよくない！」と言われる理由について言及していきましょう。
【問題点】閉じタグ忘れのミスが生じる
作り手、管理側の最大の難点が「閉じタグ忘れのミスが生じる」ということです。
さて下記はタグが足りないのですが、見つけられますか？
divだらけのソース
<div>
<div>
</div>
<div>
<div>
</div>
</div>
</div>
<div>
<div>
</div>適切なhtmlソース
<div>
<h1>
</h1>
<div>
<p>
</p>
</div>
</div>
<div>
<h2>
</h2>答えは左右どちらも「一番最後に</div>がない」でした。
どうでしょうか？右の例は比較的見つけやすいですが、左の例はかなり時間がかかったのではないでしょうか？
ミスが生じやすいだけではなく、どこがミスっているのか見つけることすら困難になるのです。
自分が苦しむだけならまだしも、その保守が別の人に引き継がれた時、その別の人が苦しむことになります。
【解決】div以外のタグを使うことで防げる
解決方法はもちろんdiv以外のタグを適切に使うことです。
その本質は適切なマークアップのためですが、管理側としてもミスを防ぎ、短時間で正確に完成させることにもつながります。
【ついでに】classやidの多用も避ける
htmlソースは最低限のソースで作ると管理が楽になります。
CSSを適用させるためにclassやidを使いますが、これもすべてのhtmlタグにつけるのではなく、最低限にしましょう。
CSSセレクタは子要素を指定する方法や、n番目を選択するなど疑似クラスと呼ばれるものがあります。
これらのセレクタを使うことでhtmlソースを最低限にシンプルにすることができます。
【問題点】SEOや表示速度の影響は…？
divの使い過ぎがよくない理由に「SEOが悪くなる」「表示速度が遅くなる」というものを見かけますが、これには疑問が残ります。
SEOが悪くなる
SEOの本質はコンテンツであり、htmlソースではありません。
まったく同じ内容であれば多少下がる可能性はありますが、まったく同じサイトは存在しません。（少なくとも偶然には）
記事タイトル部分にdivを使っており、h1が記事内にない場合はSEOに影響するかもしれません。
しかし、この場合「divの使い過ぎ」ではなく、「不適切なマークアップ」が問題ですので論点がずれている気がします。
表示速度が遅くなる
pをdivに変えたところで表示速度は（人の感覚的には）変わりません。
div1つが、div100万個になればさすがに遅くなるかもですが、そんなことをする人はいません。
表示速度を気にするなら、javascriptを使わないとか、画像を圧縮するとか、もっと目を向けるべき箇所があります。
htmlがちょっと変わったくらいでは表示速度は変わりません。
ということで「SEOが悪くなる」「表示が速度が遅くなる」については個人的には「あまり関係ない」と考えます。
【まとめ】divの乱用･使いすぎは問題なのか
初心者はdivを使い過ぎようが、まず完成させることを優先しましょう。
ユーザーにとって、htmlソースがどうなっているかなんて関係ありません。
divの使い過ぎがダメと言われる理由は管理側がミスを生じやすくなるからです。
divだらけだとミスが生じやすいだけではなくミスを探すのも困難となり、自分またはほかの管理者の首を絞めることになります。
慣れてきたら適切にマークアップをしていきましょう。
以上、divの乱用･使いすぎは問題なのか解説しました。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
