HTMLのdivタグの使い方まとめ(属性/横並び/非表示など)

html

HTMLの<div>タグは、コンテンツをグループ化したり、レイアウトを調整したりするために使用される汎用的なコンテナ要素です。

<div>タグ自体には特に意味はありませんが、class属性やid属性、CSSと組み合わせることで、Webページの構造やデザインを柔軟に制御できます。
この記事では、<div>タグの基本的な使い方から応用的な使い方まで、サンプルコードを交えながら解説します。

divタグの基本的な使い方

<div>タグは、<div>と</div>で囲まれた要素をグループ化します。
例えば、複数の段落や画像などをまとめてグループ化できます。

<div>
  <p>これはdivタグで囲まれた段落です。</p>
  <img src="image.jpg" alt="画像">
</div>

<div>タグで囲まれた要素は、ひとまとまりのブロック要素として扱われます。
つまり、<div>タグの前後に改行が入り、幅いっぱいに広がります。

divタグの属性

<div>タグには、主に以下の属性が使用されます。

  • class属性: CSSのクラスを指定します。
  • id属性: 要素の一意なIDを指定します。
  • style属性: インラインCSSを指定します。

これらの属性をCSSと組み合わせることで、<div>タグで囲まれた要素のスタイルを細かく調整できます。

class属性の使用例

class属性をつけることで、クラスを定義してスタイルをつけることができます。
作成したclassはページで複数回使うことができます。

<div class="container">
  <p>これはcontainerクラスが適用された段落です。</p>
</div>

指定したクラスに対して、下記のようにcssを設定できます。

.container {
  background-color: #f0f0f0;
  padding: 10px;
}

実際に表示を確認すると、下記のようにスタイルが適用されました。
HTMLのdivタグのclass属性確認

id属性の使用例

id属性をつけることでも、スタイルを定義できます。
idはページで一意に設定します。

<div id="header">
  <h1>ヘッダー</h1>
</div>

指定したidに対して、下記のようにcssを設定できます。

#header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

実際に表示を確認すると、下記のようにスタイルが適用されました。
HTMLのdivタグのid属性確認

style属性の使用例

style属性をつけると、直接スタイルを定義できます。

<div style="background-color: lightblue; padding: 15px;">
  <p>これはstyle属性でスタイルが指定された段落です。</p>
</div>

実際に表示を確認すると、下記のようにスタイルが適用されました。
HTMLのdivタグのstyle属性確認

divタグとCSS

<div>タグは、CSSと組み合わせることで、Webページのレイアウトを柔軟に制御できます。
例えば、<div>タグで囲まれた要素を横並びにしたり、グリッドレイアウトを作成したりできます。

横並びのレイアウト

flexboxを使って、divタグを横並びにしました。

<div style="display: flex;">
  <div style="width: 50%;border: 1px solid #333;">
    <p>左側のコンテンツ</p>
  </div>
  <div style="width: 50%;border: 1px solid #333;">
    <p>右側のコンテンツ</p>
  </div>
</div>

表示を確認すると、下記のように横並びになりました。
HTMLのdivタグでflexレイアウト

グリッドレイアウト

グリットレイアウトを使用することもできます。

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
  <div>コンテンツ1</div>
  <div>コンテンツ2</div>
  <div>コンテンツ3</div>
  <div>コンテンツ4</div>
  <div>コンテンツ5</div>
  <div>コンテンツ6</div>
</div>

表示を確認すると、下記のようにグリットレイアウトが適用されました。
HTMLのdivタグでグリッドレイアウト

divタグを非表示にしたい

divタグを非表示にするには、CSSのdisplayプロパティを使用します。

<div style="display: none;">
  <p>このdivタグは非表示です。</p>
</div>

display: none;を指定すると、divタグとその中のコンテンツは完全に非表示になり、ページのレイアウトからも削除されます。
つまり、非表示にした要素は、ページの他の要素の配置にも影響を与えません。

一方、visibility: hidden;を指定すると、divタグとその中のコンテンツは非表示になりますが、ページのレイアウト上には存在します。
つまり、非表示にした要素は、ページの他の要素の配置に影響を与えます。

<div style="visibility: hidden;">
  <p>このdivタグは非表示ですが、レイアウトには影響を与えます。</p>
</div>

おわりに

<div>タグは、HTMLで最も汎用性の高い要素の一つです。
class属性やid属性、CSSと組み合わせることで、Webページの構造やデザインを柔軟に制御できます。

HTML
yasuaki

コメント