Step.4 CSSの書き方の基本を学ぼう
HTMLのバージョンについて
はて、<!doctype html>何だけど、まずこれ、タグじゃないんだよね。
これはね、使用しているHTMLのバージョンを宣言しているんだよ。
ちなみにCSSも実はバージョンがあったりするよ。まぁこっちはバージョンの宣言とかはいらないんだけどね。
で、ちなみにこの宣言では「HTML5の使用」を意味しているよ。そんなわけでこの勉強会ではHTML5を使っていくからね。
<font>は文字の色とか文字の大きさを変えるタグだったんだよね。で、後々装飾はCSSでやったほうがいいからって話になって、HTML5では廃止されちゃったみたい。
そんなわけだからHTML5を使うよって宣言した以上、<font>要素は使わないからね。
ちなみに、前回使った<header><main><footer>全部HTML5で追加された要素だよ。
バージョンごとに使える要素が違うのか。うわー考えたくない内容だね。
なので、さくっとCSSの話に行こうか。
CSSの書き方
はい、これ前回のソースだよ
[code language=”html” title=”HTML” highlight=”5-26″]
<!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]
<style>要素の意味は、この中にはCSSが書かれますよって感じね。要素の中に書かれている内容は、なんか見慣れない感じでしょ?
まず、<style></style>のすぐ内側が<!– –>ってなっているの、わかるかな?
これはCSSとはあんまり関係なくてね、この中に書かれているものをメモ書きとしてブラウザ上には表示させないようにするよ。
ソースコード上にメモ書きとして使ったりするの。
例えば、 <!– ここからヘッダーの内容 –> って書いておくとかね。完全にサイト制作サイドのメモ書き用だね。
何より話進まないから次行っていい?
[code language=”css” title=”CSS” highlight=””]
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;
}
[/code]
って感じかな。ちゃんと名前があってね。
“要素の指定”をしている箇所がセレクタ
“どの部分”を指定する箇所がプロパティ
“どうするか”を指定する箇所を値と呼ぶよ。
セレクタ { プロパティ:値; } って形ね。
プロパティと値は当然セットで書くよ。プロパティと値の間には必ずコロン(:)を入れて、値の最後にはセミコロン(;)で閉じるようにしてね。
あと、一つのセレクタに対してプロパティと値は複数入力可能だよ。
セレクタ { プロパティ:値; プロパティ:値; プロパティ:値; } って感じにね。
あと、HTMLと同じく全角はNGだからね。全角スペースもだめだよ?
[code language=”css” title=”CSS” highlight=”4,5″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
}
[/code]
widthが横幅ね。heightが縦幅だよ。
でもあと2つのCSSがよくわからないんだけど!一つは背景色の指定のはずだよね?
カラーピッカーを用意したから、ここで好きな色を作ってみるといいよ。
【 カラーピッカーでカラーコード確認 】
色が決まったら6ケタの数字かアルファベットが出ていると思うから、それをコピーしてヘッダーの背景色を変えてみて。#の後ろの6ケタを書き換えたらいいだけよ。
あ、ちょっと私気に入った色探してるから、その間にdisplayとかいうの教えてよ
要素の表示形式を指定するよ。よく使うのはinlineとblockあたりじゃないかな?
試しに<header>要素のdisplay:block;をdisplay:inline;に変更してごらん。
表示形式が inline になっていると横幅縦幅の指定ができなくなるよ。ほかにも一部余白の設定ができなかったりね。
ちなみにSTEP.2の改行のときに教えた<p>要素はデフォルトだと block になっているよ。block は縦幅横幅を設定できるけれど、自動的に前後に改行がついちゃうのが特徴だね。
要素によってデフォルトの表示指定が違うのよ
これに関してはちょっとブラウザの話になるんだよね。
ブラウザによるCSSの違い
メルちゃんは今 IE しかブラウザ知らないと思うけれど、IE 以外にも有名なブラウザが4つ程あってね、それらを使っている人も結構多いんだよ。
それに同じ IE でもバージョンによって使えるCSS、使えないCSSも出てくるしね
どれくらい違いが生じるの?
ほかにも余白とかに違いが生じて、 IE で見たときは思った通りになっていたのに、違うブラウザでは実は若干違いが!なんてことになったりしてね。
だから、できるだけサイトを作成したら最後に有名なブラウザは一通り表示確認して回ったほうがいいよ。
この辺をよく見かけるかな?
あとブラウザにもバージョンってあるでしょう?同じブラウザでもバージョンによっても違いが起きたりするよ。しかもCSSだけじゃなくてHTMLもブラウザやブラウザのバージョンによって使えないHTMLのバージョンがあるから要注意ね。
(あれは、考えることを放棄した顔だ)
CSSを書く場所について
今回やった<head>要素内に直接書くのはあんまりしないかも。
そんなわけで、一番よく使われる方法、CSSファイルを作成し、そっちにCSSを書いておき、そのCSSファイルをHTMLに読み込ませる方法について教えるよ
index.htmlがあるフォルダと同じ場所にテキストドキュメントを新規作成して。ファイル名は何でもいいけれど「style」にしておこうかな。拡張子は「.css」ね。
拡張子含めてファイル名が style.css になるようにしてね。
<style><!–と–><style>の部分はいらないからね。
[code language=”css” title=”CSS” highlight=””]
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;
}
[/code]
じゃあCSSファイルのほうにCSSは書き込んだから、index.htmlのほうの<style><!–~–><style>は一度消してしまおうか
で、一度表示確認してみてね。
[code language=”html” title=”HTML” highlight=””]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>
</body>
</html>
[/code]
CSSファイルに書いただけではindex.htmlにstyle.cssの内容が自動的に反映されたりはしないの。
このCSSファイルに書かれたスタイルをHTMLに呼び出すにはまたタグを使うよ
これも<head>要素に書くよー。
[code language=”html” title=”HTML” highlight=”5″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer>コピーライト</footer>
</body>
</html>
[/code]
という風に、CSSファイルのURLを入れることでHTMLファイルのCSSを指定することができるよ。
これは<link>要素だね。
で、多分メルちゃんが見慣れないのは rel=”stylesheet” とかの部分だよね
これはね、属性って言われていて、CSSと似た感じで、要素に追加で「○○を=”○○する”」みたいな指定ができるよ。
属性を使ってこの<link>要素は「スタイルシートのstyle.cssファイルを呼び出します。」って感じになってるわけ
とりあえず試しにやってみて。
あと、同じCSSファイルを複数の違うHTMLファイルで呼び出すこともできるからとっても便利よ。
そんなわけでCSSは基本CSSファイル作って書くね。
試しにやってみようか。今度は<footer>要素に入れてみようかな。
現状の状態で、HTMLの方をこう書き換えてみて
[code language=”html” title=”HTML” highlight=”11″]
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>メルちゃんの素敵なサイト★</header>
<main>メイン</main>
<footer style="background:#000000;">コピーライト</footer>
</body>
</html>
[/code]
今回は背景色だけ指定したけれども、これまた続けて複数のスタイル指定ができるからね。
1つのページの1か所にだけこのスタイルを指定したい。っていうような時とかはこれを使ってもいいかもしれないね。
セレクタがなくて、プロパティと値を””の間に書く形になるよ。
はてさて、今回はとりあえずここまでにしておこうか。次回はよく使うCSSをいくつか上げて教えるからお楽しみに。追加でもうちょっとCSSの書き方について触れて行こうかな。