サイトのレイアウトについて
それじゃあ、実際にサイトのトップページを作ってみようか。前回の作成予定サイトを覚えてる？
メルちゃんの素敵なサイト★
ここにホームページの説明
メイン
コピーライト
今、目の前に出してもらったから思い出したよ！
まぁ、あんまりに簡易だからイメージしづらいかもしれないけれど、こういう感じのサイトは多いと思うよ。ヘッダーとフッターがついてるやつね。
ヘッダーとフッター……？
上側の濃い灰色がヘッダー、下側の濃い灰色がフッターね。まぁ、かといって絶対この通りに作成しないといけないって決まりはないから、好きにデザインしていいんだよちなみに、薄い灰色は背景色ね。わかりやすいように色つけてるだけだから、文字とかは何も入れないからね。
んー、言われてみれば……なんか一番上に画像があって、そこにサイト名があったりとか見かけるかも？特にブログなんかはそうかも！
そうだね、ブログは大抵こうなっている気がするね。さて、この作りなんだけれど、四角が複数あるなーっていうのはわかるよね？
うん、わかるわかる。四角が5個かな。
5……？あぁ、背景のことか。惜しいね、じつはこの背景の薄い灰色は右と左でわかれて見えるけれど1個の大きい四角だよ。こうしてみるとわかりやすいかな？
メルちゃんの素敵なサイト★
ここにホームページの説明
メイン
コピーライト
これが余白なしにぴたっとくっついた状態が、目指してるサイトの形だね。
あぁ！なるほど！わかったよ！で、文字の書き方はわかるけど、この四角いのはどうやって作るの？
CSSを使って作るよ。
スタイルシート（CSS）とは？
はて、メルちゃんはCSSって知ってるかな？またはスタイルシートでもいいんだけれど、聞いたことない？
ん、なんか最初のほうにロロちゃんが言ってたような……。意味はわかんないよ。HTMLと一緒に目にするからHTMLによく似た何かかな、とは思ってるけど。
スタイルシートはね、文字の色とかサイズ、余白の指定とか、ページの背景色、背景画像などなど、デザイン、ページの装飾とかができるんだ。一部タグでも文字の大きさを変える効果をもつものがあるけど、こういう見栄え関連はHTMLではなくCSSで指定することが推奨されているよ。
へぇ。じゃあ私が知っている
<font size=5>ここに文字のサイズを変えたい言葉</font>
ってやつはスタイルシート？
いや、それはHTMLだね。ちなみに、その<font>要素だけれど、このメルちゃんHTML勉強会ではそのタグは使えないよ。
使えない？使わないじゃなくて？てか、これそんな名前の勉強会だったんだ。
うん、使えない。その理由はまぁ、また今度話すね。さて、スタイルシートは本当に色んなことができるんだよ。やろうと思えば簡単な絵くらい描けるからね？
えぇ！そうなの？なんか謎にすごい世界だなぁ
CSSを指定する要素を書こう。
さて、あの目標のサイトの四角をCSSを使って作りたいのだけれど、CSSを使うにはその対象になる要素がいるんだよね。
ん？どういうこと？
実際にやってみたほうが早いね。とりあえず先に要素を書いてしまおう。そんなわけで、いつもながら下記のソースを丸々コピー＆ペーストしてね。
[code language=”html” title=”HTML” highlight=”1,9-11″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>
</body>
</html>
[/code]
<header> と <main> と <footer> ？なんか新しいタグでてきたね。さっき話してたヘッダーとかフッターのことかな？あ、一番上に更に何か増えてる！<!doctype html>？
一番上のやつは説明後回しにするね。あとは想像通り、<header>要素はヘッダーに表示する内容を入れていくよ。サイト名だったり、サイトのイメージ画像やロゴだったり、時にはページのメインコンテンツへ飛べるリンクを置いたりもするね。ここではとりあえずサイト名だけを入れてるね。
<main>は何？その名の通り？主要内容って感じなのかな。
うん、合ってる。サイトにはヘッダーとかフッターがよくついているけれど、ぶっちゃけそのページを見に来た時ってヘッダーとフッターを見に来たわけじゃないよね？そのページの記事とかを見たいよね。そういうそのページのメイン内容はこの<main></main>タグで挟むよ。<footer>要素も同じようにフッターに表示する内容を書くとこだよ。
正直まだ実際にヘッダーとかフッターの中に何を書いたらいいかわかんないけど……多分ロロちゃんが実践してくれることに期待して今は聞かない！多分聞いても6割くらいしか理解できそうにないし！
うん。何事も実践したりあとは他のサイトとか見て回るがよろし。さて、じゃあ気を取り直して、上記のソースを丸々コピーでいいからindex.htmlに入れて保存してね。
いや、実はロロちゃんが頑張って説明してくれている間に確認したんだけどさ……文字が三行書かれただけで特に驚くような効果はなかったよ
うん。それでいいの。これでCSSを使う前の対象となる要素の準備はできたから。そんなわけで、早速 背景色をつけてみよう。CSSを弄り始めたら楽しくてたまらないよ？
CSSを使って背景色をつけてみよう。
CSSの書き方やルールは後でさらっと触れるとして、とりあえず次のソースをindex.htmlに入れちゃって。
[code language=”html” title=”HTML” highlight=”5-20″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<style>
<!–
header {
display:block;
background:#666666;
}
main {
display:block;
background:#aaaaaa;
}
footer {
display:block;
background:#666666;
}
–>
</style>
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>
</body>
</html>
[/code]
うおおお！色がついたよ！文字がすっごい読みづらくなったけど！
なんかすっごく横長になるんだね。
現状、横幅と縦幅の指定とかしてないからデフォルトの状態だね。デフォルトだと親の要素の横幅いっぱいまで横幅広がっちゃうよ。
親の要素？要素にご両親がいたとは知らなかったよ。紹介してよ。
要素の親子関係について
HTMLってね、タグで挟んで作られるでしょ？やっていくうちに、要素の中に要素を書いたりするのよ。入れ子って言うね。外側の要素が中側の要素から見て親要素ってことになるよ。反対に、親要素の中にある要素が子要素って呼ばれるよ。さぁ、問題だ。<header><main><footer>の親要素は何でしょうか。考えてごらん。
<body>？ あと、<html>にも挟まれているよね。
[code language=”html” title=”HTML” highlight=”2,22,28,29″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<style>
<!–
header {
display:block;
background:#666666;
}
main {
display:block;
background:#aaaaaa;
}
footer {
display:block;
background:#666666;
}
–>
</style>
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>
</body>
</html>
[/code]
その通り。ただ、ひとつ外側の要素を親要素っていうから、<html>は<body>の親要素だね。この要素の親子関係については結構重要だから、理解できるようになってね。とはいっても、そんなに難しくないでしょう？
うん。大丈夫！
CSSで要素の横幅と縦幅を指定しよう。
さて、じゃあ次は横幅と縦幅を指定しようか。これらを指定する要素はもちろん<header><main><footer>の3つだよ。って、当たり前のように言ってるけど、ちょっと前に言ったCSSを使うにはその対象となる要素が必要の意味はもうなんとなくわかったよね？
うん、多分！背景色を変えるにも、何の背景色を変えるかってことだよね。で、その何っていうのが要素のことなんだと思う！さっき背景色変わったの、<header><main><footer>だったもんね。
そうそう、あの4つの四角っていうのは要素が4つあるってことだったの。よかった優秀なお姉ちゃんで。要素の指定の仕方とかは……まぁ、わかりやすいからソース見て既に勘付いているかもしれないけれど、もうちょっと実際にCSSを書いてから教えるね。そんなわけで、恒例のソースだよ。
[code language=”html” title=”HTML” highlight=”10,11,16,17,22,23″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<style>
<!–
header {
display:block;
background:#666666;
width:1000px;
height:180px;
}
main {
display:block;
background:#aaaaaa;
width:1000px;
height:400px;
}
footer {
display:block;
background:#666666;
width:1000px;
height:50px;
}
–>
</style>
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>
</body>
</html>
[/code]
おお、四角い！四角い!!!! すげぇええ!!!!
こんな感じに、劇的に見た目が変わるのは基本CSSをいじったときかな。面白いでしょう？
かなり！
それはよかった。じゃ、次回は今回説明を省いた<!doctype html>の話と、CSSの書き方のルールとかやろうね。CSSも書き方がわかれば簡単だし、楽しいよ。きっと次回にはこのモノクロ背景色もメルちゃんの好きな色にできるから
まじで！？超楽しみ！！