Skip to main content

5. divタグについて

目次​

  • 研修概要
  • このチャプターでのゴール
  • divタグとは？
    • divタグの属性設定について
  • 研修課題５

研修概要​

このチャプターではdivタグの使い方、属性設定について理解します。

このチャプターでのゴール​

divタグを使い、コンテンツ毎にグループ分けを行い、より細かい設定を適用することができること。

divタグとは？​

divはdivisionの略で、分割という意味があり、コンテンツを分割しグループ化する働きをします。
divタグの基本的な使い方は、<div> </div> で囲うだけです。入れ子にすることも可能なので、細かくグループ化して、レイアウトを構成することができます。
ただし、開始タグと終了タグの記述箇所が少しでも間違えていると、ページ全体が崩れることがあるので注意が必要です。

divタグの属性設定について​

Chapter4でもdivタグによる属性設定の課題を応用編はdivタグを使った課題でした。
divタグの属性設定については、さまざまな属性設定が可能ですが、ここでは囲ったグループの中央寄せのみ触れることにします。

今まで、要素の中央寄せはタグごとに設定していました。
今度は、コンテンツごとにグループ分けをしそのグループ毎に画面中央寄せを設定してみます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Chapter5_自己紹介ページ</title>
    </head>
    <body>
        <div style="text-align: center;">
            <h2>Test</h2>
            <p>・divタグのサンプルです。
        </div>
    </body>
</html>

Web

研修課題５​

divタグを使いh2タグとpタグを一つのグループとしてプログラムをhtmlを書いてください。

tip

💡ヒント：以下サンプルを参考にしてください。

<div style="text-align: center;">
    <h2>Test</h2>
    <p>・divタグのサンプルです。
</div>