【WEB 入門講座】ブロックレベル要素とインライン要素
[WEB 入門講座]ブロックレベル要素とインライン要素
ブロックレベル要素とインライン要素を学習する。 本講座の学習内容は少ない。 しかし、Webサイト作成において、最も重要な講義になると考える。 そのため、章を立てて解説する。
Webサイトをデザインする時、 ブロックレベル要素とインライン要素の知識が決定的に重要になる。 是非マスターしてほしい。
ブロックレベル要素
サンプルファイルを掲載する。 bodyタグに3つのpタグを作成した。 つまり、段落が3つ存在するHTMLサイトである。
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p style="background:#aaf;">
006 文章を記述する。
007 文章を記述する。
008 </p>
009
010 <p style="background:#afa;">
011 走るIORI。
012 走るIORI。
013 </p>
014
015 <p style="background:#faa;">
016 歩くIORI。
017 歩くIORI。
018 </p>
019
020 </body>
021</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p style="background:#aaf;">
006 文章を記述する。
007 文章を記述する。
008 </p>
009
010 <p style="background:#afa;">
011 走るIORI。
012 走るIORI。
013 </p>
014
015 <p style="background:#faa;">
016 歩くIORI。
017 歩くIORI。
018 </p>
019
020 </body>
021</html>
文章を記述する。 文章を記述する。
走るIORI。 走るIORI。
歩くIORI。 歩くIORI。
サンプルファイルをWebブラウザで開くと、 このように3つの段落が表示する。 bodyタグを取り出して解説する。
005<p style="background:#aaf;">
006 文章を記述する。
007 文章を記述する。
008</p>
009
010<p style="background:#afa;">
011 走るIORI。
012 走るIORI。
013</p>
014
015<p style="background:#faa;">
016 歩くIORI。
017 歩くIORI。
018</p>
006 文章を記述する。
007 文章を記述する。
008</p>
009
010<p style="background:#afa;">
011 走るIORI。
012 走るIORI。
013</p>
014
015<p style="background:#faa;">
016 歩くIORI。
017 歩くIORI。
018</p>
pタグが3つ、順番に下方向へ並ぶ。
ブロックレベル要素 画面を、横一杯に占有する
pタグはブロックレベル要素である。 pタグを記述すると、pタグは横一杯に広がる。 pタグの次にpタグを記述すると、 2つ目のpタグは、1つ目のpタグの下に表示する。 2つ目のpタグは、1つ目のpタグの横に表示しない。 なぜなら、1つ目のpタグが横一杯に広がっているからである。 具体的に言うと、次のようには「表示しない。」
文章を記述する。
文章を記述する。
走るIORI。
走るIORI。
歩くIORI。
歩くIORI。
上の画面は、3つのpタグが横方向へ並んでいる。 これは「誤りである」。 pタグは画面横一杯に広がるので、 pタグの次に記述するタグは、pタグの下に表示する。
ブロックレベル要素はブロックが縦方向に並ぶように、 画面上に表示する。
文章を記述する。 文章を記述する。
走るIORI。 走るIORI。
歩くIORI。 歩くIORI。
これが正しい表示である。 前回学習したolタグもtableタグもブロックレベル要素である。 olタグのサンプルを掲載する。
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <ol style="background:#aaf;">
006 <li>文章を記述する。</li>
007 <li>文章を記述する。</li>
008 </ol>
009
010 <ol style="background:#afa;">
011 <li>走るIORI。</li>
012 <li>走るIORI。</li>
013 </ol>
014
015 <ol style="background:#faa;">
016 <li>歩くIORI。</li>
017 <li>歩くIORI。</li>
018 </ol>
019
020 </body>
021</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <ol style="background:#aaf;">
006 <li>文章を記述する。</li>
007 <li>文章を記述する。</li>
008 </ol>
009
010 <ol style="background:#afa;">
011 <li>走るIORI。</li>
012 <li>走るIORI。</li>
013 </ol>
014
015 <ol style="background:#faa;">
016 <li>歩くIORI。</li>
017 <li>歩くIORI。</li>
018 </ol>
019
020 </body>
021</html>
- 文章を記述する。
- 文章を記述する。
- 走るIORI。
- 走るIORI。
- 歩くIORI。
- 歩くIORI。
サンプルをWebブラウザで開くと、このようにリストが 縦方向に3つ並ぶ。 bodyタグを取り出して解説する。
005<ol style="background:#aaf;">
006 <li>文章を記述する。</li>
007 <li>文章を記述する。</li>
008</ol>
009
010<ol style="background:#afa;">
011 <li>走るIORI。</li>
012 <li>走るIORI。</li>
013</ol>
014
015<ol style="background:#faa;">
016 <li>歩くIORI。</li>
017 <li>歩くIORI。</li>
018</ol>
006 <li>文章を記述する。</li>
007 <li>文章を記述する。</li>
008</ol>
009
010<ol style="background:#afa;">
011 <li>走るIORI。</li>
012 <li>走るIORI。</li>
013</ol>
014
015<ol style="background:#faa;">
016 <li>歩くIORI。</li>
017 <li>歩くIORI。</li>
018</ol>
olタグを3つ記述した。olタグはブロックレベル要素なので、 3つのリストが縦方向に並ぶ。
ブロックレベル要素の解説は以上である。
インライン要素
インライン要素のサンプルを掲載する。
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p>
006 文章を<span>記述</span>する。
007 文章を記述する。
008 </p>
009
010 </body>
011</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p>
006 文章を<span>記述</span>する。
007 文章を記述する。
008 </p>
009
010 </body>
011</html>
文章を記述する。 文章を記述する。
サンプルをWebブラウザで開くと、文字が一列で表示する。 bodyタグを取り出して解説する。
005 <p>
006 文章を<span>記述</span>する。
007 文章を記述する。
008 </p>
006 文章を<span>記述</span>する。
007 文章を記述する。
008 </p>
6行目にspanタグが存在する。 spanタグはインライン要素である。
インライン要素 文章の中に自然に存在するタグ。 改行などはしない。 タグで囲んだ文字の範囲だけ、画面を占有する。
インライン要素は、文章の中に自然と存在する。 インライン要素のタグを記述しても、 文章が改行する事はない。 ブロックレベル要素のタグは画面横一杯に広がった。 一方インライン要素のタグは、タグで囲んだ範囲のみ画面を占有する。 pタグとspanタグに背景色をつけて、どのように表示するか確認する。
001<!DOCTYPE html><html lang="ja"><head>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p style="background:#ff9;">
006 文章を
007 <span style="background:#aaf;">
008 記述
009 </span>
010 する。
011 文章を記述する。
012 </p>
013
014 </body>
015</html>
002<meta charset="UTF-8"><title>IORI</title></head>
003 <body>
004
005 <p style="background:#ff9;">
006 文章を
007 <span style="background:#aaf;">
008 記述
009 </span>
010 する。
011 文章を記述する。
012 </p>
013
014 </body>
015</html>
文章を記述する。 文章を記述する。
pタグとspanタグに背景色をつけた。 pタグの背景色は黄色である。 spanタグは紫色である。 pタグは画面横一杯に広がっている。 一方spanタグはspanタグ内の文字列「記述」の範囲のみ占有する。
これがインライン要素である。 解説は以上である。 もう一つだけインライン要素のサンプルを見る。
001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004 <body>
005
006 <ol>
007 <a href="#">HTMLの学習</a>
008 基礎を学習する。
009 </ol>
010
011 </body>
012</html>
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004 <body>
005
006 <ol>
007 <a href="#">HTMLの学習</a>
008 基礎を学習する。
009 </ol>
010
011 </body>
012</html>
HTMLの学習基礎を学習する。
リンクタグを表示した。 7行目で、aタグを記述する。aタグの詳細な解説は次の章に譲るが、 aタグを記述するとリンクが表示する。 aタグはインライン要素である。 ファイル上では7行目と8行目は改行されているが、 aタグはインライン要素なので、画面上は改行されず、 文字列「HTMLの学習」と「基礎を学習」が横方向へ並んで表示する。
解説は以上である。
まとめ
ブロックレベル要素 画面を、横一杯に占有する
インライン要素 文章の中に自然に存在するタグ。 改行などはしない。 タグで囲んだ文字の範囲だけ、画面を占有する。
