HTML
Div要素

前書き

構文

• <div>example div</div>

ネスティング

複数の<div>を別の<div>中に配置するのが一般的な方法です。これは通常「ネスト」要素と呼ばれ、要素をサブセクションに分割したり、CSSスタイリングを使用して開発者を支援したりします。

<div class="outer-div">は、2つの<div class="inner-div">要素をグループ化するために使用されます。各要素に<p>要素が含まれています。

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

これにより、次の結果が得られます（分かりやすいようにCSSスタイルが適用されます）。

インラインおよびブロック要素のネスト要素を入れ子にしながら、インライン要素とブロック要素があることに留意してください。ブロック要素は「バックグラウンドで改行を追加する」という意味ですが、他のネストされた要素は自動的に次の行に表示され、インライン要素はデフォルトで相互に隣接して配置されます

深い<div>ネストを避ける

深く頻繁に使用されるネストされたコンテナレイアウトは、悪いコーディングスタイルを示します。

角を丸くしたり、同様の機能を使用すると、そのようなHTMLコードが作成されることがあります。最後の世代のブラウザのほとんどにCSS3の対応があります。できるだけ少ないHTML要素を使用して、コンテンツとタグの比率を高め、ページの読み込みを減らし、検索エンジンのランキングを向上させてください。

divセクション要素は6つのレイヤーよりも深く入れ子にしてはいけません。

基本的な使用法

<div>要素は通常、単なるディビジョンを表す特定のセマンティックな意味を持ちません。通常、HTMLドキュメント内の他の要素をグループ化してカプセル化し、他のコンテンツグループから分離します。したがって、各<div>はその内容によって最もよく記述されます。

<div>
  <p>Hello! This is a paragraph.</p>
</div>

div要素は通常、 ブロックレベル要素です 。つまり、HTML文書のブロックを区切り、ページの最大幅を占めることを意味します。ブラウザには、通常、次のデフォルトのCSSルールがあります。

div {
  display: block;
}

div要素を最後の手段として、他の要素が適切でないときには、 World Wide Web Consortium（W3C）によって強く推奨されています。 div要素の代わりに適切な要素を使用することで、読者のアクセシビリティが向上し、著者の保守性が向上します。

たとえば、 <article> 、 <section>を使用する章、 <nav>を使用するページのナビゲーション補助、および<fieldset>を使用するフォームコントロールのグループを使用してブログ投稿をマークアップします。

div要素は、スタイル上の目的や、同様の方法で注釈を付けるセクション内の複数の段落を折り返すのに便利です。