Step.8 見出しとアウトラインについてとCSS縦横幅の最小値最大値の設定とページ内リンクについて

見出しをつけよう

じゃ、前回話していた見出しのつけ方について、いこうか。

あれ、そんな話してたっけ？

レシピのメニューでジュースならジュースばっかり並べるように、とかいう話したでしょ？
種類分けをしたならせっかくだし見出しつけたほうがもっとわかりやすいじゃない。

あぁ、そういうことね。OK

じゃ、見出しのタグいくよー。見出しにはね、レベルがあるのよ。見出しの中に見出しがあったりするでしょ？小見出しってやつ。適当に例文を出すとこんな感じかな

パソコン操作のスピードアップ指南

タイピングを早くするためのコツ

パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。

ポジションを守ろう。

キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。

変換を覚えよう。

日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いのですが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます……

パソコンの操作で覚えておくべきショートカットキー

パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは….

ははーん、なるほどなるほど。

見出しをつけるタグには現状1～6までの見出しレベルをつけられるんだ。
<h1>要素が一番大きな見出しで、<h2>が1つ下のレベルの見出し。といった感じに「h」の横の数値が減るごとにレベルが下がって、<h6>まで存在するよ

[code language=”html” title=”HTML” highlight=”1,2,4,6,8″]
<h1>パソコン操作のスピードアップ指南</h1>
<h2>タイピングを早くするためのコツ</h2>
<p>パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。</p>
<h3>ポジションを守ろう。</h3>
<p>キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。</p>
<h3>変換を覚えよう。</h3>
<p>日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いのですが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます……</p>
<h2>パソコンの操作で覚えておくべきショートカットキー</h2>
<p>パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは….</p>
[/code]

さっきの例文のソースはこんな感じね。
メルちゃんのページでは<h1>に「レシピ一覧」として、<h2>に「デザート」とか「煮物類」とかいったように分けたらいいんじゃない？
あとは適当にそれぞれの見出しにCSSで装飾を付ければいいよ。

ちょっとやってみるよ！

あ、ちなみに<h>タグもデフォルトで margin とか入っているから相殺注意ね。

[code language=”html” title=”HTML” highlight=”12,13,15,18,20″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><p>メルちゃんの素敵なサイト★</p></header>

<main>
<h1>レシピ一覧</h1>
<h2>オムライス</h2>
<a href=""><img src="image/demo3.jpg"></a>
<h2>パスタ</h2>
<a href=""><img src="image/demo6.jpg"></a>
<a href=""><img src="image/demo4.jpg"></a>
<h2>添え物</h2>
<a href=""><img src="image/demo5.jpg"></a>
<h2>デザート</h2>
<a href=""><img src="image/demo1.jpg"></a>
<a href=""><img src="image/demo2.jpg"></a>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
[/code]

[code language=”css” title=”CSS” highlight=””]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
}
header {
background:#ffb0c6;
height:180px;
font-size:20px;
font-weight:bold;
}
main {
background:#ffffff;
height:400px;
}
footer {
background:#ffb0c6;
height:50px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

Sample

でき……た……あれ？
一番上の変な余白は margin の相殺とやらとして、下側おかしくない？

あら、いつの間にか画像用意してたのね。

えらいでしょ！
じゃなくて！下側なんなの？突き出ちゃってるんだけど！何がおかしいの？私何か変なことした？

あぁ、ごめんごめん、これは CSS の height の仕業だよ。
見出しはちゃんと問題なくできているよ。

CSSの縦幅横幅の中身が飛び出る対処・最少or最大幅の指定をしよう

最初の方で<main>要素の縦幅を指定しているの覚えてる？まぁ覚えてなかったらCSSのソースコード見てごらん。

あ、 height:400px; になってるね。

そ。そういうわけで、縦幅は400pxになってるわけ。だから背景色は400pxまでしかないし、そのすぐ下に<footer>要素が来ているんだけれど、<main>要素が400pxに収まりきらず突き抜けちゃって、<footer>要素と被っちゃってるね。
最初に縦幅400pxに指定したのは<main>要素がある程度縦幅ないとデザイン的におかしいと思ったから入れただけなんだ。高さ指定を一切なくしてしまえばこれは解決するよ。

[code language=”css” title=”CSS” highlight=””]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
}
header {
background:#ffb0c6;
height:180px;
font-size:20px;
font-weight:bold;
}
main {
background:#ffffff;
}
footer {
background:#ffb0c6;
height:50px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

Sample

あ、ほんとだ。高さの指定がなかったら要素の中身に合わせて高さ勝手に決まるんだね。

そういうこと。要素の中が一行だったら一行分の高さしか入らなくて不格好になっちゃうけどね。

んー、まぁ<main>要素の中は基本沢山書くことになるから、高さ指定はなくて大丈夫そう……かな？

まぁ大丈夫だろうけれど、最低限指定した高さは用意して、指定した高さを突き抜けたらちゃんとそれに合わせて縦幅を伸ばすようにするプロパティもあるよ。

ちょっと！紹介してよそんな便利なプロパティ！

min-height だよ。最低限の縦幅を用意してくれるよ。試しにこれを400pxにして、一度<main>要素の中身を空っぽにしてみてよ。400px分の背景色がしっかり出ているのを確認できたら、次は<main>の中身を戻してもう一度確認してみて。

[code language=”css” title=”CSS” highlight=””]
header,main,footer {
display:block;
width:1000px;
margin:0px auto;
}
header {
background:#ffb0c6;
height:180px;
font-size:20px;
font-weight:bold;
}
main {
background:#ffffff;
min-height:400px;
}
footer {
background:#ffb0c6;
height:50px;
}
body {
margin:0px;
color:#9e2634;
font-size:14px;
line-height:23px;
background:#fff7de;
font-family:’ＭＳゴシック’;
}
p {
padding:10px;
margin:0px;
}
[/code]

Sample

おお！おおおおお！ちゃんとできてる！便利！！！

結構便利よ。ちなみに同じように横幅で min-width もあるからね。
あと、反対に縦幅横幅の最大値を指定しておけるプロパティが max-width と max-height だよ。最小値のほうと併用もできるからね。

てか、<h1>って文字すんごい大きくなるのね。

見出しもブラウザ側のデフォルトのCSSで大体文字がすごく大きくなったり、太字になったりするみたいね。
あとで好きなCSSに変えればいいよ。

アウトラインとセクショニングについて

はて、見出しのタグを使ってしまったことだし、頭の痛いお話をしようか。

何を突然に

ただ、ここはあくまで一度もHTML・CSSに触れたことのない初心者さんがサイト作りの楽しさを知ってくれたらな～。っていう軽いノリで作っているサイトだから、こういうのもあるのよ。って程度の話しかしないよ。難しいんだもんこれ。

ん、いや、だからどうしたの

HTML5にはね、HTML文書の構造を明確にしようっていうアウトラインを意識したタグがあるのね。

アウトライン？

例えば一番最初に出した例文があるよね。

パソコン操作のスピードアップ指南

タイピングを早くするためのコツ

ポジションを守ろう。

変換を覚えよう。

パソコンの操作で覚えておくべきショートカットキー

パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは….

このHTML文書のアウトラインはこんな感じになるの。

1．パソコン操作のスピードアップ指南(<h1>)
	1．タイピングを早くするためのコツ(<h2>)
		1．ポジションを守ろう(<h3>)
		2．変換を覚えよう(<h3>)
	2．パソコンの操作で覚えておくべきショートカットキー(<h2>)

見出しタグばっかりが出てるね。なんか目次みたいだ。

そうだね。まぁ、これがアウトラインなの。
で、このアウトラインに関わってくる要素がいくつかあるわけなのね。その一つが<section>要素なの。
これを使うことによって見出しタグが、どこからどこまでの内容に対しての見出しなのかっていうのを明確にさせることで、アウトラインをしっかり作ってくれるよ。

[code language=”html” title=”HTML” highlight=”1,3,6,9,10,13-15,18-20″]
<section>
<h1>パソコン操作のスピードアップ指南</h1>
<section>
<h2>タイピングを早くするためのコツ</h2>
<p>パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。</p>
<section>
<h3>ポジションを守ろう。</h3>
<p>キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。</p>
</section>
<section>
<h3>変換数を覚えよう。</h3>
<p>日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます……</p>
</section>
</section>
<section>
<h2>パソコンの操作で覚えておくべきショートカットキー</h2>
<p>パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは….</p>
</section>
</section>
[/code]

ただ、これも機械が読み取るだけだから、現状人間がサイトを閲覧する分にはあんまり関係ないよ。
あと、アウトラインは見出しタグを使えば暗黙で作られるから<section>要素を使用しなくても大丈夫らしいけど、あんまり過信しすぎるのもよくないとか色んな意見あるからもうどうでもよくなったよ

なにその投げやり！

どうせメルちゃん目に見える箇所が変化しないとやる気起きないでしょ？これに関しては知りたいなって思った時に自力で調べてよ。

まぁ仰る通りですが！

ちなみに、<section>の変わりになり、尚且つほかの意味を持ったりする要素もあるよ。
<article>とかね。これは一つの記事ですよ。といった意味になるんだ。
ブログとかだったら1つ分の記事がこれになるね。
普通のサイトならば<main>要素とほぼ一緒かな。サイトのメイン内容の部分になるよ。ただ、<main>要素はアウトラインに関わり持たないから<article>と併用して使わないとだけどね。

……。

まぁ、そんな反応になるとは思った。
はて、メルちゃんのサイトでとりあえずやってみようか。あと、ついでにサイトのタイトルは<h1>要素使って書くことが多いから<h1>要素に変えておくね。

[code language=”html” title=”HTML” highlight=”9,12,16,19,21,25,27,30,32,36,38″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><h1>メルちゃんの素敵なサイト★</h1></header>

<h1>レシピ一覧</h1>

<section>
<h2>オムライス</h2>
<a href=""><img src="image/demo3.jpg"></a>
</section>

</article>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
[/code]

まぁ大体こんなところじゃないかな。
しっかし、画像のサイズ揃ってないなぁ。こういう並べる画像は横幅縦幅きれいにそろえた方がステキよ？

んー画像編集とか全然わかんなくて。

えぇ………うーん、気が向いたら画像編集のやり方も教えるよ。すんごい話それるなんてレベルじゃないから番外編とでもしとく。

うわ！ロロちゃんイケメンすぎ！！！

id属性を使ったページ内リンク

さて、せっかく見出しも付けたことだから、id属性を生かしたページ内リンクについて話しておくね。

ほう……？そういやIDにはCSSを指定する以外にも使い道がある、みたいなこと言ってたっけ？

そう、それ。
メルちゃんはページ内リンクって見たことある？
リンクされているテキストとか画像をクリックしたら、同じページ内のスクロールされた下部のほうに飛ぶ、みたいな

んん……あんまり覚えがないな

ぶっちゃけると、このメルロロのHTML+CSS入門のページでも使っているんだけどね。
一番上の目次をクリックしたらそれぞれの見出しのところへ勝手にスクロールされるようになっているよ。
これがページ内リンクって言うんだ。

ほう！

実際にやってみよう。
メルちゃんそれぞれの<h2>要素にID名を付けて行って。
覚えてるかな？IDは同じ名前を使っちゃだめだからね。

あいよ！

[code language=”html” title=”HTML” highlight=”17,22,28,33″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><h1>メルちゃんの素敵なサイト★</h1></header>

<h1>レシピ一覧</h1>

<section>
<h2 id="omurice">オムライス</h2>
<a href=""><img src="image/demo3.jpg"></a>
</section>

</article>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
[/code]

こうやってID名を入れておくと、それぞれの見出し箇所までスクロールした状態へリンクさせることができるんだ。
リンクの方は<a>要素を使うよ。
<a href=”#omurice”>オムライス一覧へ</a>といったように、URLのところに#を頭につけてID名を入れるんだ。

[code language=”html” title=”HTML” highlight=”16-19″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><h1>メルちゃんの素敵なサイト★</h1></header>

<h1>レシピ一覧</h1>

<p><a href="#omurice">オムライス一覧へ</a></p>
<p><a href="#pasta">パスタ一覧へ</a></p>
<p><a href="#garnish">添え物一覧へ</a></p>
<p><a href="#desert">デザート一覧へ</a></p>

<section>
<h2 id="omurice">オムライス</h2>
<a href=""><img src="image/demo3.jpg"></a>
</section>

</article>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>
[/code]

Sample

スクロールできるほどの余白が下側にない場合のデザートなんかはちょっと微妙になっちゃうけれどね。

ほー便利！レシピが増えて縦長になったときなんかにはいいかもね！

今の状態じゃいらなさそうね。

うっ……増えたら使うもん！

はいはい。
さて、次回はページを量産する前にページのデザインを決め終えてしまおうか。
次回はCSS回だよ。メルちゃん大歓喜だね。

おっしゃー！！！

Step.7 画像にリンクを貼ってみよう

Step.9 よく使うCSSを覚えよう