HTMLとCSSで作るウェブサイト作成入門

ブロックレベル要素（１）段落と区切り線(水平線)と中央寄せの設定

　ウェブページの大枠の構造や、文字や画像などのコンテンツの配置を決めるために使われるのが、ブロックレベル要素のタグです。そこでまずは、文章を段落や大きなかたまりに分けるための<p>タグと<hr>タグを確認しましょう。

●段落を表す<p>タグ

　ブロックレベル要素の中で最もよく利用されるタグとして、文章の中の段落を指定する<p>タグがあります。<p>〜</p>によって、ひとかたまりの文章等のコンテンツを囲むことで、段落の範囲を示します。具体的には、次のように記載し、属性としては、囲まれた文字列を、左寄せ・中央寄せ・右寄せ・両端揃えにするかを指定するalignがあります。

　<p>タグを使うと、<p>から</p>で囲んだ前後で、1行あけて改行されるので、改行の<br>の仲間と思うかも知れませんが違います。<p>タグは、文章や画像などひとかたまりのコンテンツを指定するブロックレベル要素で、改行はインライン要素の<br>タグです。ですので、<p>から</p>の間(つまり段落の中)で、改行タグ<br>を使うことができます。具体的には、以下の通りです。<p>タグと終了タグ</p>の位置、改行<br>タグの位置と、ブラウザ表示結果をよく確認して下さい。

[HTMLサンプル]
名城公園キャンパスの食事とくつろぎの環境<p>名城公園キャンパスの学食と言えば、ソファ席やボックス席などが充実した「キンシャチダイニング」。学生それぞれのスタイルで食事を楽しむことができます。<br>また、キンシャチダイニングの上の階には、おしゃれなブックカフェ「猿Cafe」があります。世界のビジネス誌を読みながら、ゆったりとコーヒーブレイクできます。<br>さらに、猿Cafeから外に出れば、屋上庭園「AGスクエア」があります。名古屋城と名城公園の眺めは気分を一新してくれます。</p>

[サンプルのブラウザ表示結果]

●区切り線の<hr>タグ

　ページ上のコンテンツの切り替わりを明示するために、区切り線<hr>タグが使われます。終了タグはなく、<hr>単体で使われます。基本的な書き方は以下の通りですが、いくつかの属性があり、長さや色を指定することが可能です。

 　具体例として、以下を示します。タグとブラウザ表示結果の対応をよく見比べて下さい。

[HTMLサンプル]
<p align="center">名城公園キャンパスの食事とくつろぎの環境</p>
<hr size="5" width="80%" align="center">
<p>名城公園キャンパスの学食と言えば、ソファ席やボックス席などが充実した「キンシャチダイニング」。学生それぞれのスタイルで食事を楽しむことができます。<br>また、キンシャチダイニングの上の階には、おしゃれなブックカフェ「猿Cafe」があります。世界のビジネス誌を読みながら、ゆったりとコーヒーブレイクできます。<br>さらに、猿Cafeから外に出れば、屋上庭園「AGスクエア」があります。名古屋城と名城公園の眺めは気分を一新してくれます。</p>

[サンプルのブラウザ表示結果]

●センタリングの<center>タグ

　<center>タグは、ページ内のコンテンツを中央寄せするのに使われます。<center>〜</center>の間に中央寄せしたい文字や画像、表などを指定します。このような、画面デザインに関わるタグは、スタイルシートで実現するようになりつつありますし、中央寄せは、他のタグのalign属性を指定することでも実現できますので(上記サンプルも<p>タグと<hr>タグでalign="center"を指定)、<center>タグはしだいに使わなくなってきていますが、それでも多くのサイトで使われていますし、簡単ですので、ついでに覚えておきましょう。

[HTMLサンプル]
<center>ここは中央寄せになります</center>