<div>要素


<div>要素は、要素を区分(divide)するときに使います。
一般的には、要素をグループ化したり、一連の要素に同じスタイルを指定したいような場合に使います。

<div>要素は、<article>や<nav> などの意味的要素が適切でない場合に限って使います。

たとえば、次のようにすると最初の<div>の内容は青で描かれ、二番目の<div>の内容は赤で描かれます。


  <div style="color: blue;">
    <h5>最初の<div>の見出し</h5>
    <p>最初の<div>の段落</p>
  </div>
  <div style="color: red;">
    <h5>2番目の<div>の見出し</h5>
    <p>2番目の<div>の段落</p>
  </div>
  

これで、ブラウザには次のように表示されます。

最初の<div>の見出し

最初の<div>の段落

2番目の<div>の見出し

2番目の<div>の段落

<div>要素にスタイルを指定することで、領域を視覚的に明らかにするために使うこともできます。
次の例は、四角形の領域を影付きで明示する例です。


  <style>
    .box {
      width: 15em;
      height: 4em;
      border: 1px solid black;
      box-shadow: 6px 6px 4px gray;
      padding: 8px 12px;
    }
  </style>
  <div class="box">
    <p><div>の中の段落だよ。</p>
  </div>
  

これはboxというスタイルのクラスをを定義して<div>にboxスタイルを適用した例です。これで、ブラウザには次のように表示されます。

<div>の中の段落だよ。


関連項目

<pre>


HTML目次 inserted by FC2 system