Q&A
そんな20年前レベルの話は無視していい。
前提・実現したいこと
divを適切に使用して行きたい。
「divの多用」とは、どういった事を示すのかを正しく理解したい。
試したこと
自身でgoogle検索で調べて、下記の情報は確認しました。
・<li>や<ul>の代わりにdivを使用するのは止める事
・divの使用が増えると、ページの読み込みに時間がかかり、
重たいページになってしまう事
ディベロッパーツールで既存のLPなどを見に行くと、普通にdivが沢山使われていて、
階層も結構深い形になったりしています。
divをあまり使わない様にするべきという情報を見てから、全くhtmlが書けなくなってしまいました。
使ってはいけない物なのかという様な意識が働いてしまっています。
divに対しての正しい理解をしたいと思っています。
宜しくお願い致します。
回答7件
0
ベストアンサー
divの使用が増えると、ページの読み込みに時間がかかり
根拠に乏しいように思うのですが、「重たくなるように組んでいる」か
「別に適切な役割をする機能がある場合に、単なるブロック要素であるdivに同様の機能を与えようとしてCSSの記述が多くなる」ことになるのかなと。
（aタグをボタンぽく見せるとか、spanをリストに見せるとか）
つまり「別に適切な役割をする機能がある場合」はあえてdivを選択する必要がないと考えます。
HTML5では様々な要素が追加されてますから、MDNの開発者ガイドなどを確認し、ブラウザの対応なども加味して考えていくと良いです
CSSフレームワーク（Bootstrap）には大抵サンプルやテンプレートがついていますし、
公式サイトにもそのCSSが適用されているので、それらを参考にするのも良いです。
やろうと思えば大抵のタグでほとんど同じようなレイアウトを実現できるので、
「divじゃなきゃできない」というのは色々思い込みになっているように思います。
「ブロック要素」と「インライン要素」を使い分けできるようになるだけでも違ってくると思います。
投稿2021/01/10 02:28
総合スコア80875
貴重なお話ありがとうございます。
どのあたりをどのように理解して「解決」としたのかフィードバックください。
平均的な回答数より多い回答が得られたからには、質問者さんが得るものも多いはずです。「考え方」がそれだけあるとも言えます。
至らない部分が多いかもしれませんが自身が理解した事としては、
・divを使う事は悪い事というわけでは無い
・しかし、divじゃなきゃできないと考えてしまいそうになったら、それは思い込みである
・bootstrapを使用する際はdivが良く使われるし、そういった面でも、divを使ってはいけないと思わなくて良い（bootstrapも教養として理解しようとしています）
こういったところで認識いたしました。
divに対して、それぞれの考え方があるのだという事も理解できました。
良い悪いではなく、見方とか考え方の理解を深める方が良いという事など。
この様に理解することができました。
はい。良いと思います。
あとは色々作ってみて（小さいもので良いです）
慣れるというところと、色々なサイトから学習することですね。
結局「見た目」部分なので使う人は関係ありません。
作る人側がしっかりとコーディングルールを持っているかどうかです。
0
<li>や<ul>の代わりに使おうという気持ちは無いのですが、
classの指定をしてcssを使用する時にはどうしてもdivが必要になってきてしまいます。
そのままでいいのではないでしょうか。
divをあまり使わない様にするべきという情報を見てから、全くhtmlが書けなくなってしまいました。
使ってはいけない物なのかという様な意識が働いてしまっています。
divは重要な要素なので「使ってはいけない」なんてことはありません。
投稿2021/01/10 03:50
総合スコア11705
0
セマンティックHTMLに反するからではないでしょうか？
https://developer.mozilla.org/ja/docs/Glossary/Semantics
検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる (SEO を参照)
読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々と div の中を検索するより明らかに簡単である
開発者に目立たせるデータの種類を提案することができる
セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する
投稿2021/01/10 02:55
退会済みユーザー
総合スコア0
0
<div> は使いまくっても構いません。ただ <main> や <header> などは検索エンジンやアクセシビリティのため適宜利用すると良いでしょう。
また、昨今の Web ページはプログラムでコンパイルされた JavaScript で生成されていることが多い（= 生の HTML を人間が書くことが以前と比べ少ない）ため、容赦なく <div> がバンバン出てきます。人間が書くときはネストの深さを気にしてあまり <div> を深く出来なかったのですが、React などの JavaScript フレームワークのおかげで要素をコンポーネント化できるようになったため <div> を気兼ねなく乱発できるようになったのです。
わたしの結論としては「HTML で <div> 乱発できんこともないけど、追い切れんの？プログラムに任せたほう楽だよ？」って感じです。
投稿2021/01/10 03:46
総合スコア2853
0
・divの使用が増えると、ページの読み込みに時間がかかり、
重たいページになってしまう事
現実的に問題となることはあまりありません。ただ、「クラスを振る」などの意味もないのに<div><div><div>のようにネストになってしまうのは、完全なる無駄ですので、それぐらいは気をつけましょう。
投稿2021/01/10 03:57
編集2021/01/10 03:59
総合スコア145930
<div>がよく登場することになるCSSフレームワークですが、これでも実用的に何ら問題ありません。
https://getbootstrap.com/
bootstrapも教養としてしっかり身に付けたいと思っていました。アドバイスありがとうございます。
0
一般論を説明すると長くなるので、
・<li>や<ul>の代わりにdivを使用するのは止める事
に絞ってお話します。
HTML の機能を二つに分けて考えてみてください。
１つは情報の構造を記述する機能、2つめは表示形式（見た目）を記述する機能です。
この二点を分けて考える必要がある主な理由は二つあります。
１つは、データとしてHTMLを扱う場合には、見た目に関する情報は不要なので、簡単に切り離せるようになっていたほうが都合がよいということです。
２つ目は、書式の変更などを行う場合に、構造と見た目が分離されていたほうが都合がいいということです。
「箇条書きの書式を一律に変えたい」といった場合を考えてみてください。
従って、以上２点が考慮されていて、見栄え上 div の利用が必要であるならば、使用はやむを得ないとは思います。
現実には、見栄え最優先で更新に十分なコストがかけられる企業のトップページなどは、上記を無視して div を多用している場合が多いです。
そのあたりは、個々の案件の条件によって変わってくるかと思います。ただ理想論としては div は使わないで済むなら使わないに越したことはない機能だと思います。
投稿2021/01/10 02:58
総合スコア1193
0
原則はhtmlの構造タグを使うべきだと思います。
きちんとした文法を使うことでSEOに強いサイトになります。
該当する構造タグがない場合divタグを使う認識でいいのではないでしょうか？
divタグ = 装飾だけでいい場合（それ自体に意味を持たないタグ）
h1〜h6 = キーワードを含めたタイトル
p = 本文
ul ol li = リスト
article = 記事リストを囲うタグ
section = 各セクション単位で囲うタグ
aside = サイドバーなど副次的要素
header = ヘッダー
footer = フッター
...など
投稿2021/01/10 02:31
総合スコア226
あなたの回答
tips
プレビュー
