基本的ブロックレベル要素（1）

【本節の目的】
最も基本的なブロックレベル要素の意味と使い方を習得する。

テンプレートファイルの取得 (HTMLの文法チェックも含む)

これから、HTMLの各種要素について練習していきますが、まずは、練習するためのテンプレートファイルをダウンロードしましょう。

[演習：テンプレートファイルのダウンロードとチェック]

以下のようにして、HTMLのテンプレートファイルをダウンロードして下さい。

まず、「week07」というフォルダを作成してください
＞ここ＜をクリックし、「template1.zip」というファイル名でテンプレートの圧縮ファイルを保存します。
保存した「template1.zip」のアイコンをダブルクリックすると、「template1.html」のアイコンが見えますので、そのアイコンを右クリックして「切り取り」を選び、「week07」のフォルダに「week07\ex1.html」として貼り付けます。

（註）template1.htmlはShift-JISでエンコードされているので、秀丸で開こうとするとエラーが出てしまいます。（第6回の4.1 HTMLファイル作成用エディタの設定で、HTMLファイルのエンコードの種類をUTF-8に指定しているため）
その場合は以下の手順に従ってUTF-8に指定しなおしてください。

一旦エンコードの種類をShift-JISに指定してください。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
の部分を
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
に書き換えてください。
「名前をつけて保存」で「エンコードの種類」の欄がUTF-8になっていることを確認して、保存してください。

最も基本的なブロックレベル要素 (h1?h6、p、hr、blockquate)

これから、HTMLの各種要素について練習していきます。先のダウンロードした template1.html を元に (コピーして)、コピーしたファイルにサンプルの HTMLと同様の要素を追加・保存し、 Webブラウザでその要素の表示される形を確認して下さい。その作業の繰り返しで、各要素の動作が理解できるはずです。

[演習：最も基本的なブロックレベル要素]

以下に説明する最も基本的なブロックレベル要素について学習して下さい。

各要素には、その要素に関する説明、サンプルHTMLおよびそのサンプルHTMLをWebブラウザで表示したイメージを示しています。必ず、自分で実際にHTMLファイルに書き込み・保存して、 Webブラウザで表示させ、表示される形式を確認して下さい。動作が分りにくいときは、複数の要素を追加したり、その内容を増やしたりして、再度Webブラウザで表示させ、確実に理解するようにして下さい。

実際の方法としては、以下のように行なって下さい。

先程作成した「week07\ex1.html」を秀丸エディタで開く
title要素の内容を今回の練習用に分りやすく書き変える (テンプレートファイルでは「ここにタイトルを書く」となっていますので、それを消して書き変えて下さい。)
本文(body要素の内容)に、以下のサンプルを参考にしながら、説明のある要素の利用サンプルを追加記述していく
追加したら、(上書き)保存し、Webブラウザで表示を確認する。

見出し (h1 ? h6要素)

要素の説明: 見出しを作る要素には、h1要素、h2要素、... h6要素の6レベルがあります。 h1要素がトップレベル(意味的に一番大きな見出し)であり、 h6が一番下のレベルを表わします。
h1?h6要素はブロックでレベル要素であり、インライン要素やテキストを含むことができますが、 ブロックレベル要素を含むことはできません。
(註) Webブラウザでは一般的に、 h1要素の文字が大きく h6要素の文字が一番小さく表示されることが多いですが、文字の大きさを変えるためにこの要素を使ってはいけません。
サンプルHTML: <h1> これが、トップレベルの見出し(h1)です。 </h1>
<h2> これが、二番目のレベルの見出し(h2)です。 </h2>
<h3> これが、三番目のレベルの見出し(h3)です。 </h3>
Webブラウザでの表示結果

パラグラフ (p要素)

要素の説明: パラグラフとは、「文章のひとかたまり」、つまり「段落」のことです。 p要素は、パラグラフを定義するときに使います。
p要素はブロックでレベル要素であり、インライン要素やテキストを含むことができますが、 ブロックレベル要素を含むことはできません。
サンプルHTML: <p>
これが段落(パラグラフ)を作るタグです。通常の文章はこのタグで囲んで書くと良いでしょう。このタグがあると、一つの空白行が入ります。
</p>
<p>
ここに、空白行が入ったのが確認できましたか？
</p>
Webブラウザでの表示結果

強制改行 (br要素) [インライン要素]

要素の説明: パラグラフの中で、強制的に改行するときに使う要素です。 br要素は、終了タグの要らない要素です。
br要素は、インライン要素です。 p要素中で使われることが多いので、ここで説明しました。
(註1) br要素を繰り返し用いると、空白行を作ることができるますが、このような使い方はせず、文章を1つのパラグラフ内に納めておかなければならないときだけ br要素を使うようにしましょう。

(註2) 終了要素の無い要素を「空要素」と呼びます。通常、開始タグと終了タグの間に、「内容」を書いてHTML要素となりますが、「空要素」の場合、その「内容」部分がありません。
サンプルHTML: <p>
HTMLファイルで
改行しても、
ブラウザ表示では
改行できません。<br>
改行を行ないたい所に、<br>を書けば、このように改行します。
</p>
Webブラウザでの表示結果

横罫線 (hr要素)

要素の説明: 文書の中に横罫線を引くときに利用します。異なる内容の2つのブロックの間に罫線を挿入し、 2つのブロックの区別を行なうために使われます。
hr要素はブロックレベル要素ですが、終了タグの要らない空要素です。
サンプルHTML: <p>
ここまではこんな内容でした。
</p>
<hr>
<p>
ここからは、上とは異なる内容になります。
</p>
Webブラウザでの表示結果

引用文 (blockquote要素)

要素の説明: まとまった引用文として定義するには、blockquote要素を使用します。
blockquote要素はブロックレベル要素ですが、 直接テキストやインライン要素を含むことができません。
サンプルHTML: <p>
これから引用を開始します。
</p>
<blockquote>
この部分は引用文です。
引用文は、Webブラウザでは、前後左右に空白があきます。
</blockquote>
<p>
引用が終りました。
</p>
Webブラウザでの表示結果