Perl Web開発者のHTML・CSS入門

【HTML5】divタグ - ブロック要素の作成

divタグを使うと、ブロック要素を作成できます。

<div>
  ブロック要素
</div>

横100%の幅がブロック要素のデフォルト

横100%の幅がブロック要素のデフォルトです。

<div style="background:pink;">
  ブロック要素
</div>

divでブロック要素を二つ配置してみましょう。横100%に伸びて、2行になります。

<div style="background:pink;">
  ブロック要素1
</div>
<div style="background:green;">
  ブロック要素2
</div>

ブロック要素は、幅、高さ、上下のマージンを設定できる

ブロック要素は、幅、高さ、上下のマージンを持つことができます。

<div style="background:pink;magin-top:10px;margin-bottom:10px;width:80%;height:300px;">
  ブロック要素1
</div>
<div style="background:green;">
  ブロック要素2
</div>

インラインブロック要素も、同じです。一方で、インライン要素は、幅、高さ、上下のマージンを設定することができません。

マージンや高さや幅を設定したい場合は、インライン要素ではなく、ブロック要素かインラインブロック要素、フレックス要素を使います。

ブロック要素を設定するCSS

ブロック要素を設定するCSSは「display:要素の種類;」です。divタグのデフォルトは、ブロック要素ですが、変更することができます。

<div style="display:block;">
  ブロック要素
</div>
<div style="display:inline-block;">
  インラインブロック要素
</div>
<div style="display:inline;">
  インライン要素
</div>
<div style="display:flex;">
  フレックス要素
</div>

divタグ以外のブロック要素

divタグ以外でブロック要素になる、よく使うタグです。

• 見出しタグ - h1, h2, h3, h4, h5, h6
• pタグ
• ulタグ

ブロック要素とインラインブロック要素とフレックス要素の使い分けは?

ブロック要素とインラインブロック要素とフレックス要素の使い分けは?

1行1列はブロック要素

1行1列で表現できるときは、ブロック要素を使います。

<div style="background:pink;">
  ブロック要素1
</div>

複数行1列はブロック要素

複数行1列の場合も、ブロック要素を使います。

<div style="background:pink;">
  ブロック要素1
</div>
<div style="background:green;">
  ブロック要素2
</div>

1行複数列はフレックス要素

1行複数列の場合は、フレックス要素を使います。

<div style="display:flex;">
  <div style="width:50%;background:pink;">
    列1
  </div>
  <div style="width:50%;background:green;">
    列2
  </div>
</div>

フレックスレイアウト入門で詳しく解説。

複数行複数列はフレックス要素

複数行複数列の場合は、フレックス要素を使い「flex-wrap:wrap;」を指定します。

<div style="display:flex;flex-wrap:wrap;">
  <div style="width:50%;background:pink;">
    行1列1
  </div>
  <div style="width:50%;background:green;">
    行1列2
  </div>
  <div style="width:50%;background:blue;">
    行2列1
  </div>
  <div style="width:50%;background:red;">
    行2列2
  </div>
</div>

フレックスレイアウトで複数行レイアウト入門で詳しく解説。

インラインブロック要素は、使う機会は少ないでしょう。

divタグで、ボタンを作るには?

divタグを使ってボタンを作るには、次のように考えます。

・幅を決める

・右マージンと左マージンを自動にすると、中央に寄る

幅を決める

まずボタンの幅を決めましょう。パソコン画面だと400px。スマートフォン画面だと「幅100%から、30px小さい」とします。

<div style="width:400px;background:pink;">
  PC用用ボタン
</div>

<div style="width:calc(100% - 30px);background:pink;">
  スマフォ用ボタン
</div>

左右のマージンを自動にする

左右のマージンを自動にすると、ボタンが中央に寄ります。

<div style="width:400px;margin-left:auto;margin-right:auto;background:pink;">
  PC用用ボタン
</div>

<div style="width:calc(100% - 30px);margin-left:auto;margin-right:auto;background:pink;">
  スマフォ用ボタン
</div>