03. divタグ
レッスン2では、画像とテキストが横に並んでいました。このレッスンでは、<div>タグを使って要素を縦に並べる方法を学びます。
divタグで囲む
<div>タグで画像とテキストをそれぞれ囲んでみましょう。
<!-- battle.html highlight:8-13 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
<div>
<img src="img/dark-lord.png" style="width: 400px;">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>
確認しよう
ブラウザで確認すると、画像とテキストが縦に並んで表示されます。
内容の説明
divタグとブロック要素
<div>タグは、要素をグループにまとめるためのタグです。
<div>は「ブロック要素」と呼ばれる種類のタグです。ブロック要素は縦に積み重なって表示されます。
ステータスを表示する
<div>を使って、プレイヤーのステータスも表示してみましょう。名前、HP、MPをそれぞれ<div>で囲みます。
<!-- battle.html highlight:8-10 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
<div>ゆうしゃ</div>
<div>HP 153</div>
<div>MP 25</div>
<div>
<img src="img/dark-lord.png" style="width: 400px;">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>
ブラウザで確認すると、名前、HP、MPがそれぞれ縦に並んで表示されます。
HTMLでは、改行は無視されます。もし、次のように書いても、改行されずに横並びに表示されます。
<!-- battle.html selection:8-12 highlight:9-11 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
<div>
ゆうしゃ
HP 153
MP 25
</div>
</body>
</html>
divの入れ子
<div>の中に<div>を入れることもできます。
<!-- battle.html highlight:8-12 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
<div>
<div>ゆうしゃ</div>
<div>HP 153</div>
<div>MP 25</div>
</div>
<div>
<img src="img/dark-lord.png" style="width: 400px;">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>
タグの中にタグを入れることを「入れ子」と呼びますが、<div>タグを入れ子にすることで、複数の要素を1つのグループとして整理することができます。
試してみよう
<div>タグで、色々なものを縦に並べて表示してみましょう<div>タグの中で改行してみましょう
これまでの成果
<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バトル</title>
</head>
<body>
<div>
<div>ゆうしゃ</div>
<div>HP 153</div>
<div>MP 25</div>
</div>
<div>
<img src="img/dark-lord.png" style="width: 400px;">
</div>
<div>
まおうがあらわれた。
</div>
</body>
</html>