Sponsored Link
前回は、<header></header>から<footer></footer>までの役割、それぞれのHTMLタグのHTMLへの記述方法について説明を行いました。
今回は、HTMLタグを記述する上で理解が必要な「ブロック」と「入れ子」、
そして「インライン要素（display: inline;）」と「ブロック要素（display: block;）」について説明を行います。
ひとまずDreamweaverを起動して「index.html」「main.css」ファイルを開いてコーディングの準備を行ってください。
手順は以下。
- Adobe Dreamweaver CCを起動する。
- 右側の「ファイル」パネルから「html」フォルダを探し出して「index.html」を開きます。
以上です。
まず今後、何回かにわたって構築するWebページの完成形を見ておきましょう。
こんな感じになります。
準備ができたら早速始めましょう。
この記事の目次
ウェブデザイン演習 第07回
HTMLの記述（#container・header編）
ブラウザ幅とコンテンツ幅
今回の講義では聞きなれない言葉も出てきます。
まず、「ブラウザ幅」と「コンテンツ幅」について説明します。
これに関してはもはや言葉のままですね。
ブラウザ幅はブラウザで見る横幅の100％の大きさ。
コンテンツ幅は実際にコンテンツが表示されている領域の大きさ。
本当にそのまんまですが、
今回は理解を深める上でこの二つのキーワードがとても重要になってきます。
<div id=”container”></div>の記述
ではコードを記述します。
前回終了の時点で、以下のような記述になっていると思います。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
</body>
</html>まずはモニターで表示されている部分の一番大きな枠を生成します。
名前は「container（コンテナ）」にしましょう。
<body></body>タグの内側に、以下のハイライトされている部分のコードを記述しましょう。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<!-- / #container --></div>
</body>
</html>
この<div id=”container”></div>がWebサイトの表示部分の一番大きな枠で、
ページ全体を覆っているブロック（ブラウザ幅）になります。
どんどん内側に書いていきます。
<header></header>の記述
今度は<div id=”container”></div>の内側に<header></header>セクションを記述します。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
</header>
<!-- / #container --></div>
</body>
</html>
ここはサイトのヘッダーで、左寄せのロゴマークとか右寄せのお問い合わせ電話番号だとかを記述している部分ですね。<header></header>の横幅はサイトの100％の大きさ（ブラウザ幅）です。
<header></header>の中に<div class=”container”></div>を入れて中央寄せのブロックを生成
<header></header>セクションの内側に<div></div>タグを一つ追加しましょう。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
<div class="container">
<!-- / #container --></div>
</header>
<!-- / #container --></div>
</body>
</html>
<header></header>セクションの内側に「container」と名前をつけて追加した<div><div>タグはコンテンツ幅の大きさになっていますよね？
この<div></div>タグの役割は「左寄せ・右寄せしたロゴやお問い合わせのブロックをWebサイトのコンテンツ幅のまま中央寄せする」ためにあります。
実は、<header></header>セクションのすぐ内側に<h1></h1>タグや<p></p>タグでロゴや電話番号のコーディングを行っても、レイアウト上、コンテンツ幅を保持して綺麗に両端揃えにすることができず、<header></header>セクションの内側でロゴは左に、お問い合わせは右側に寄るだけです。
コンテンツの幅を保持するため、ブラウザ幅の大きさの<header></header>の内側に、コンテンツ幅の大きさに指定された<div class=”container”></div>というブロックを内側に入れ、さらに<div class=”container”></div>をCSSで中央寄せすることでこのレイアウトを実現しています。
HTMLの基礎中の基礎「ブロック」と「入れ子」
さて、ここまで記述を行いましたが、idやらclassやら中央寄せやら・・・なんのこっちゃですよね？
おそらくチンプンカンプンだと思うので、簡単に説明します。
HTMLでのレイアウトの基礎中の基礎のポイントは二つ。
ブロックと入れ子です。
まず今まで記述した<div id=”container”></div>などは一つの箱だと思ってください。
すなわち、ブロックです。
今回記述したものは、箱の中に箱を入れて、その中にさらに箱を入れた状態です。
まず、ブラウザ全体のサイズ（高さ100％・横幅100％） と同じサイズの箱（<div id=”container”></div>）を作ります。
次に一番大きな箱（<div id=”container”></div>）と横幅が同じ箱（<header></header>）を中に入れます。
一番大きな箱と同じ大きさなので、つまりブラウザの横幅100％のサイズです。
今度は、横幅をコンテンツ幅のサイズに設定した箱（<div class=”container”></div>）を入れます。
上の画像では仮に1,000pxに指定してありますが、
ブラウザのサイズより小さければどんなサイズでも表示できます。
しかしそのまま置いてしまうと箱は左側に寄ってしまいます。
そのため、CSSを使って箱を真ん中に揃う指定を行います。
・・・どうですか？？ブロックと入れ子の原理は理解できたかな？
こうしてブロックに親子関係を作って「入れ子構造」にしていくことで様々なレイアウトに対応していきます。
idは一度だけ、classは複数回使うもの
ちなみに、記述した「container」ですが、
<div id=”container”></div>と<div class=”container”></div>は全くの別ものです。
idと指定しているものは、同一ページ内で一度だけ使うもの。
classと指定しているものは、同一ページ内で複数回使う可能性があるもの。
と、覚えてください。
そういった理由から、今回のコーディングで一度しか使わない大外枠にはid、
中央寄せなど他のブロックでも使うものはclassと指定しています。
idとclassは本当に重要なのでしっかり覚えておきましょう。
idとclassを間違えてコーディングしてしまうとレイアウト崩れの原因になります。
ここまでの各ブロックの説明
画像を使ってもう一度説明します。
ページの全体を覆っているのが<div id=”container”></div>です。
これが一番大きな箱です。
その中にロゴやお問い合わせのブロックがある<header></header>という箱を入れて、
その中に中央寄せのための<div class=”container”></div>という箱を入れました。
これでページ最上部の入れ子の構造が出来ました。
ヘッダーの部分ではさらに、ロゴのブロックを左寄せに、お問い合わせブロックを右寄せにして、さらに入れ子の構造を作っていきます。
ではコード記述の続きをします。
<div id=”container”></div>という大外枠を作り、その中に<header></header>セクション、さらにその中に<div class=”container”></div>を入れた状態でストップしていましたが、現状では以下のような記述になっていると思います。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
<div class="container">
<!-- / #container --></div>
</header>
<!-- / #container --></div>
</body>
</html>どんどん記述していきましょう。
Webサイトのグローバルナビゲーションに使用される<nav></nav>セクションを記述します。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
<div class="container">
<!-- / #container --></div>
</header>
<nav>
</nav>
<!-- / #container --></div>
</body>
</html>
<nav></nav>の内側には<ul></ul>タグ、さらにその内側に<li></li>タグを記述するようになります。
ここでは<div></div>タグによる中央寄せを行わず、
<ul></ul>タグと<li></li>タグへのCSSの指定だけで真ん中揃えをしてみましょう。
<article></article>の記述
Webサイトのメインコンテンツのブロック、<article></article>セクションを記述します。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
<div class="container">
<!-- / #container --></div>
</header>
<nav>
</nav>
<article>
</article>
<!-- / #container --></div>
</body>
</html>
<article></article>もコンテンツ幅での真ん中揃えを行いますが、
ここでは、メインの記事部分を左に寄せ、前回解説した<aside></aside>を右寄せにします。
左右に寄せる際にちょっとしたコツが必要になりますので、その点を解説します。
Webサイトのフッター部分である<footer></footer>セクションを記述します。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
<div class="container">
<!-- / #container --></div>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
<!-- / #container --></div>
</body>
</html>
<footer></footer>はWebサイトの一番下に位置していることが多いため、
レイアウト上、メインコンテンツのボリュームなどの影響を最も受けてしまうものです。
龍弥デザインでは、フッターに背景画像を使っていて、
必ずブラウザの最下部に位置していないと画像が途中で切れて違和感が生じてしまいます。
例えばメインコンテンツのボリュームが極端に少ない場合・・・
コンテンツの高さが足りずに<footer></footer>がせり上がってきてきてしまいます。
そうなると、背景画像を設定していれば画像は途中で切れてしまいます。
<footer></footer>を必ず最下部に配置させるように、
CSSだけで解決するテクニックがあるのでそれも今後の講義で解説していきます。
HTMLの記述のまとめ
ここまで記述を行ってきました。最終的には以下のようになっていると思います。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
<div id="container">
<header>
<div class="container">
<!-- / #container --></div>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
<!-- / #container --></div>
</body>
</html>このコードの中で一文字でも間違っていると正しく表示されません。
間違っていないかよく確認して、次回「えぇ？？なんで？？」ってことにならないようにしましょう。
インライン要素とブロック要素
HTMLタグにはインライン要素とブロック要素というものがあります。
各セクションのタグの役割を一通り理解したら、次はインライン要素とブロック要素のことを知りましょう。
とてもわかりやすく解説されている記事がありましたので紹介します。
ブロック要素は「縦に積まれていくもの」
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。 ブロックレベル要素には、以下のものがあります。 <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
ブロック要素とは、例えばHTMLに<div></div>タグを追加すると横幅100％でブロックが生成されるHTMLタグのことです。<div></div>タグの閉じタグの下にさらにもう一つ<div></div>タグを追加すると、先ほど<div></div>タグによって生成されたブロックの横に回り込むことなく、下にもう一つ横幅100％のブロックが生成されます。
つまり、記述したものから順に縦に積まれていくのがブロック要素になります。
ちなみに、前回紹介した<header></header>から<footer></footer>は全てブロック要素に該当します。
インライン要素は「横に並んでいくもの」
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
インライン要素には、以下のものがあります。 <a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
記述したものから順番に横に並んでいくのがインライン要素です。
インライン要素とブロック要素は何が違う？？
これを噛み砕いて説明すると以下のようになります。
| ブロック要素 | インライン要素 | |
|---|---|---|
| 高さ （height） |
保持される | 保持されない |
| 横幅 （width） |
指定しない限り100% | 指定してもしなくてもauto |
| 背景画像 | サイズ通り描画される | サイズ通り描画されない |
以下の図を見てみましょう。
❶ではHTMLのマークアップを行い、その結果❷がモニターに表示されます。
どこに何が適用されてどのようになっているかをわかりやすくするため、❸には現在このテキストに、どのタグがどこに適用されているのか？を表しています。
インライン要素のままでは背景画像は描画されない
例えばインライン要素にCSSを使って背景画像を指定しても、
高さと横幅を保持しないインライン要素のままでは、
背景画像を描画することができません。
先週、サイトのグローバルナビゲーション<nav></nav>セクションはリストでマークアップする、と解説しましたが、グローバルナビゲーションはボタン画像などにすることが多いので、<a></a>タグに背景画像が必要です。
でも、参考記事の内容や上述した内容の通り、<a></a>タグはインライン要素です。
インライン要素には正しいサイズで背景画像がつけられません・・・。
この問題、どうしたらいいでしょう？？
・・・インライン要素に背景画像をつけるには、
インライン要素をブロック要素に変えてしまえばいいんです。
下のコードを見てみてください。
CSS
/* こうなっているものを・・・*/
a {
display: inline;/* inline = インライン要素のこと（※記述されているわけではない） */
}
/* こうすればいい！！*/
a {
display:block;/* block = ブロック要素のこと */
}この方法では、インライン要素にdisplay: block;を指定しています。
display: block;の指定を行うと、インライン要素をブロック要素にすることができ、
横幅と高さが保持されるので背景画像を正しく描画してくれるということです。
実際にコーディングしないと違いが理解しにくいブロック要素とインライン要素
とまぁここまで説明しましたが、違いを理解するのは難しいですよね。
ブロック要素とインライン要素に関してて言えば、もはやプロとしても当たり前になってしまっているものの一つなので、いざ誰かに説明するとなると感覚でしか教えてあげられないものなんです。
少しずつコーディングを行っていきますので、その中で慣れてなんとなく「こういうものかな」と感じてもらえたらいいなと思います。
