扉のページへ上へ前のページ次のページ

基本的な構造

HTMLの要素は,ホームページのコンテンツ(文章,画像など)に構造と意味を与えるためのものです.

現段階では「本文」に何の構造も設定していないので,ただの文字の羅列になっています.文章の構造与えるには,その部分にHTMLの書式で命令を書いておく必要があります. ここでは,最も基本的な構造を持ったページを作ってみましょう.

セクション

本や雑誌,新聞を見れば分かるように,ある程度以上のまとまった文章は,内容を「章」や「節」といった一つまたは複数の段落で構成されるブロックに分けて記述します. HTMLでは,<section> と </section> のような要素を用いて,こういった構造を記述します.階層構造を持たせる場合には,これを入れ子にして用います.

<section> は一般的なセクション分けに使用しますが,他に <article>,<nav>,<aside> という要素があり,コンテンツの性質によって使い分けます.

セクション分け要素の使い分け

section要素
一般的なセクション分けに使用
article要素
新聞の記事のようにそれだけで独立し,完結したコンテンツを表すときに使用
nav要素
サイト内を移動するための主要なナビゲーション(主なコンテンツへのリンクの集まり)を記述
aside要素
ページの主題と関連性の薄い内容を記述する時に使用

段落

文章の最も基本的な構造は「段落」です.<P> と </P> の間が1つの段落です. 通常の文章はすべて段落にします.

段落にすると,次に来る文章が前の段落から一行空けて始まります.

見出し

セクション分けされた文章には見出しを付けます. 見出しは、<H(数字) > と </H(数字) > の間に書きます.

以下に見出しの例を挙げます.

H1 を使った場合.

H2 を使った場合.

H3 を使った場合.

H4 を使った場合.

H5 を使った場合.
H6 を使った場合.

使用法

セクション分けされた文章に見出しをつけるときの見出し要素の使い方は,次の二つのやり方が推奨されています.

  1. すべてのセクションの見出しを <H1> に統一する.
    <h1>見出し1</h1>
    <section>
    	<h1>見出し2</h1>
    	<section>
    		<h1>見出し3</h1>
    	</section>
    </section>
    
  2. セクションの階層に見合った見出しを付ける.
    <h1>見出し1</h1>
    <section>
    	<h2>見出し2</h2>
    	<section>
    		<h3>見出し3</h3>
    	</section>
    </section>
    

ヘッダー,フッター

ページやセクションに「ヘッダー」や「フッター」(本などで,ページの上部や下部にページ番号や章のタイトルが書いてある部分)を記述するときに使用します.
ヘッダーは <header> と </header> の間に, フッターは <footer> と </footer> の間に記述します.


練習2ー2

練習2ー1で作成した「renshu1.html」の文章に次のHTML要素を加えてみましょう.

  1. 「今日の出来事」全体を <section> と </section> の間に入れる.
  2. 今日の出来事 という「見出し」(<h1>を使用)を付ける.
  3. 今日の出来事の内容が複数あれば,それぞれセクションに入れ,見出し(<h2>を使用)をつける.
  4. 文章に「段落」を設定する.(段落ごとに<p>と</p>で囲む)

その後ファイルを保存し,ブラウザでどのように見えるか確かめてみましょう.


強制改行

通常の文章は,ページの端で自動的に改行して表示されます.しかし,「会話文」,「詩」など段落の途中で 文章の体裁を整えて見やすくするために「改行」する必要がある場合,その場所に,<BR> を記述すれば
このように,その場所で強制的に改行します.

以上のことを用いると,以下の例のように読みやすい文章がつくれます.

午後3時のカレーライス

今日は,学生食堂に行って“カレーライス大盛(340円也)”を食べた.時間が時間だった(午後3時)もんだから,おじさんもサービス満点で,すごい量のごはんを盛ってくれた.

僕:『すいませーん,カレー大盛でお願いします』
おじさん:『サービスしときます』
僕:(...おいおい,ご飯そんなに盛るんだったら,カレーももっと入れてくれよ.と思いつつ)『あっ,どうも』
おじさん:『はい,どうもね〜』

しかし,今一つ食欲がなかったので,全てをたいらげるまでに,かなり苦しい思いをしてしまった.

なんだかねぇ,こんな状態になってしまっても,いっぱい食べれたという事で,かなり満足してしまっているのは,やはり,ビンボー症なんだろうか.うーむ,イカンイカン.

やまがためぐむ

横線

ページに明確な区切りを入れたい時に,ページの端から端までの横線を引くことができます.

ここにあるような横線を引くためには,<HR> というタグを使います.


練習2ー3

「renshu1.html」の文章の部分に改行を使ってみましょう.また,セクションの区切りの部分に横線を引いてみましょう.
その後ファイルを保存し,ブラウザでどのように見えるか確かめてみましょう.


コメント文

実は,この上の部分には

<!-- この部分はコメントになります.-->

と書いてあるのですが、ブラウザ上では見えません.
<!--と-->に挟まれた部分はコメントと言って、ホームページの制作における覚え書きなど、表には出したくないことを書いておきたい時に使用する書式です.


練習2ー4

「renshu1.html」にコメントを書き加えてみましょう.
その後ファイルを保存し,ブラウザでどのように見えるか確かめてみましょう.


宿題

来週まで,毎日の出来事,思ったことなどを1日に付き100文字以上書いておくこと.できれば,関連する写真などを撮っておくとなお良い(後で使用することが出来るため).


扉のページへ上へ前のページ次のページ