Webページっぽくしてみよう

見出しをつける

ここまでで文章の装飾の仕方はなんとな~く分かってきたと思いますが、文章を載せただけではなんか物足りない。
アイツですよ、アイツ。見出し。

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

見出しには6種類というか6段階あります。

サンプル

見出し1

見出し6

見ての通り1はとてもでかいです。ページデザインするのをサボりたいとき以外はまずcssで大きさやらなにやら調整することになると思います。逆に6はホントに見出しかよおまえ?って感じです。
もちろん1は大見出しにつかって、番号が小さくなるごとに小見出しになっていきます。私はそんなにたくさん見出しは使わないので、個人としても学園祭運営団体としてもせいぜいh3かh4どまり、h5・6は使ったことないです。

大きな見出しはここぞ!という時に使いましょう。乱用するとどれが重要な見出しなのか分からなくなってしまいます。
普段私はh1をサイトタイトルに、h2をページタイトルに、h3を記事の大見出しに、h4を記事の小見出しにすることが多いです。
h1がサイトタイトル、h2がサイト説明、……、なんてパターンもあります。
h1を複数回使ってよいかという議論はどうでもいい、って感じらしいですよ。

それでは、h1をサイトタイトル、h2をサイトの説明、h3をページタイトル、h4を記事タイトルとして見出しを付けてみます。

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

サンプル

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

見出しに対して文章が少なすぎて何が何だか分からない感じですが、見出しがつきました。
この見出しが格好いい見出しになって、すんばらしい委員長のあいさつがどーんと載れば、それっぽくなりそうですよね。

ヘッダとフッタを用意する

ヘッダとフッタ。
ヘッダ=header=頭??
フッタ=footer=足??

このマニュアルサイトを例にすると、ヘッダはページ上部の「まにゅある・たーみなるえんど URL クエスト:1年間サイトの子守をせよ!」と、それからメニューです。(メニューを含まない場合もあります)
要はページの一番上、タイトルが載ったり、ロゴが載ったり、場合によってはちょっとしたサイト説明やメニューが載ったり、そんなところをヘッダといいます。

フッタはページ一番下、このサイトだとURLやらトップページやら、テンプレ提供ネットマニア様のリンクやらです。
大抵フッタには各ページへのリンク一覧と著作権表示、連絡先なんかが書いてあります。

ま、各ページ共通で使われているし、載っている情報もそれなりに重要な部分ですわな。
サイト制作においてはこやつらをタグでくくって「ここヘッダ!」「ここフッタ!」とアピールします。くくるとアピールできるし、くくることでデザインしやすくなりますのでどんどんやっていきましょう。

先程の例でいうと、h1ページタイトルとh2ページ説明がヘッダに当たりそうですね。早速<header>でくくりましょう。

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

(以下略)
サンプル

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

くくっただけじゃ何も変わらない。とはいえサイト説明h2がでかすぎるのはちょっと癪に障るので、h2の文字の大きさを小さくしてやりましょう。それと、h1とh2の間の余白も消してしまいます。
デザインの話になるのでcssに切り替えて……
余白に関しての詳細は箱と余白の位置関係で。
※サイズの単位は別ページにまとめます。

/*他でh1,2を使う予定がない場合はタグ自体に設定をつけてしまいましょう*/
h1{
	margin-bottom:0; /*h1の下余白を0に設定*/
}
h2{
	margin-top:0; /*h2の上余白を0に設定*/
	font-size:10px;
}

他でh1や2を使う予定がある場合はどうしたらいいかって?
それも別ページにまとめておきます。今は1回しか使う予定がないのでh1、2自体に設定をつけちゃいましょう。

<html>
<head>
<meta charset="Shift-JIS">
<title>webページっぽくしちゃうよ!</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

(略) </body> </html>
サンプル

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

ここで見出しを格好良くしたり、ヘッダに背景がつくとそれっぽいのですが、一杯やってしまうと混乱してしまうと思うので、最後にフッタを付けて終わりにしましょう。
このままではフッタの文章がないので、著作権表示を付けてみます。

<html>
<head>
<meta charset="Shift-JIS">
<title>webページっぽくしちゃうよ!</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

20xx (c)○○大学△△学園祭 All rights reserved.
tel: 0xx-xxx-xxxx fax: 0yy-yyy-yyyy </body> </html>

著作権表示と電話番号、FAX番号を入れてみました。
ちなみに、「All rights reserved.」といった著作権表示は、あなたがどこまで著作権を持っているかによって変えないといけないので、
うんまあそっから先は調べてください。とりあえずこの著作権表示・連絡先を<footer>でくくり、フッタであることを示します。

(略)

20xx (c)○○大学△△学園祭 All rights reserved.
tel: 0xx-xxx-xxxx fax: 0yy-yyy-yyyy
</body> </html>

更にもうひと工夫。連絡先であることを示すタグ、<address>があります。27行目の10桁の数字がただの数字ではなく連絡先であることを示しておきましょう。

(略)

20xx (c)○○大学△△学園祭 All rights reserved.
tel: 0xx-xxx-xxxx fax: 0yy-yyy-yyyy
</body> </html>

よく見ると26行目にあった<br>がなくなっていますね。
これは、<address>の前後には改行が自動的に入るからです。改行してくれるので、わざわざ27行目の連絡先を改行して次の行に持っていく必要がない、<br>を書く必要がないのです。
タグの種類によって、前後に改行が入るものと入らないものがあるので、使う時は注意してくださいね。

まとめると

html

<html> <head> <meta charset="Shift-JIS"> <title>webページっぽくしちゃうよ!</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body>

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

20xx (c)○○大学△△学園祭 All rights reserved.
tel: 0xx-xxx-xxxx fax: 0yy-yyy-yyyy
</body> </html>

css

h1{
	margin-bottom:0; /*h1の下余白を0に設定*/
}
h2{
	margin-top:0; /*h2の上余白を0に設定*/
	font-size:10px;
}
サンプル

○○大学××祭公式サイト

20xx年度××祭はmm月dd日開催!

20xx年度学園祭開催のお知らせ

20xx年度学園祭テーマ

今年も学園祭やるよ。ちなみにテーマは○×△□だよ。
皆来てね。

20xx年度委員長より

今年度委員長だよ。ちょーがんばるよ。
よろしくね。

20xx (c)○○大学△△学園祭 All rights reserved.
tel: 0xx-xxx-xxxx fax: 0yy-yyy-yyyy

え?addressタグをつけたら文字が斜体になった?斜体が嫌?
そういう時はcssでaddressに対しfont-style:normal;って設定してやってやるんですよ。

大して見栄えが変わらないのにheaderだのfooterだのaddressだのつけるの面倒くさい!と思うかもしれませんが、htmlっていうのは意味づけをするのも大事なんですヨ。