メルロロのWEBデザイン

サイトを作る為のちょっとした知識や素材を置いています。

Step.4 CSSの書き方の基本を学ぼう

HTMLのバージョンについて

はて、前回後回しにした<!doctype html>が何なのか、から話してもいい?
スタイルシートのほうもかなり気になるけど……いいよ、その謎のタグも地味に気になってたし。
ちゃんとスタイルシートの話も今回してあげるって。
はて、<!doctype html>何だけど、まずこれ、タグじゃないんだよね。
これはね、使用しているHTMLのバージョンを宣言しているんだよ。
へ?HTMLってバージョンとかあるの?
うん、あるよ。
ちなみにCSSも実はバージョンがあったりするよ。まぁこっちはバージョンの宣言とかはいらないんだけどね。
で、ちなみにこの宣言では「HTML5の使用」を意味しているよ。そんなわけでこの勉強会ではHTML5を使っていくからね。
はぁ……まぁ今何も知らない状態だから好きにしてくれたらいいけど
あと、前にメルちゃんが言ってた<font>要素なんだけれど、HTML5では廃止されているからね。
ふええ!そうなの。なんかよく見かけた気がするんだけどなぁ
とりあえず一番最初に触れるタグって感じはあったかもね。
<font>は文字の色とか文字の大きさを変えるタグだったんだよね。で、後々装飾はCSSでやったほうがいいからって話になって、HTML5では廃止されちゃったみたい。
そんなわけだからHTML5を使うよって宣言した以上、<font>要素は使わないからね。
ちなみに、前回使った<header><main><footer>全部HTML5で追加された要素だよ。
ふーん……。
バージョンごとに使える要素が違うのか。うわー考えたくない内容だね。
うん。私もそう思う。
なので、さくっとCSSの話に行こうか。
待ってました♪

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]

うん!ばっちりだよ♪<head>要素に書くんだよね?へへ、賢いでしょ
カシコイ、カシコイ。
<style>要素の意味は、この中にはCSSが書かれますよって感じね。要素の中に書かれている内容は、なんか見慣れない感じでしょ?
んー、一部の行頭のはタグ名で見たけど、それ以外はさっぱりだ。タグと全然違うね。
そうそう。CSSとタグは全然違うからね。そんなわけで軽く説明するよ。
まず、<style></style>のすぐ内側が<!– –>ってなっているの、わかるかな?
これはCSSとはあんまり関係なくてね、この中に書かれているものをメモ書きとしてブラウザ上には表示させないようにするよ。
ソースコード上にメモ書きとして使ったりするの。
例えば、 <!– ここからヘッダーの内容 –> って書いておくとかね。完全にサイト制作サイドのメモ書き用だね。
ん、それがなんでここで登場するの?中に書かれているのがCSSなんでしょう?メモ書きじゃないじゃん。
CSS未対応ブラウザのためにCSSをわざとこれで囲っているんだよ。邪魔にならないように。まぁ<style>要素とセットとして覚えておいたらいいよ。
えぇ!未対応ブラウザとかあるの?じゃあその未対応のブラウザで見たら、今のindex.htmlは一番最初の3行書かれているだけで背景色とか縦幅横幅一切ないの?
そうなるだろうね。でも一般のブラウザでCSS未対応なんてそうそうないし、最初のうちはそこまで気にしないでいいと思うよ。
何より話進まないから次行っていい?
あい、すんません!
そんなわけで、<style><– –></style>はCSSを書くための場所を作っているだけだから実際の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だからね。全角スペースもだめだよ?
ふむ……具体例をよろしく。
じゃあわかりやすい横幅、縦幅の指定を抜き出してみようか。横幅と縦幅を指定する<header>要素のスタイルシートはこれね

[code language=”css” title=”CSS” highlight=”4,5″]
header {
display:block;
background:#666666;
width:1000px;
height:180px;
}
[/code]

width:1000px;の部分が、横幅を1000ピクセルにする。って指示だよ。
widthが横幅ね。heightが縦幅だよ。
先生、ピクセルってなんですか。
単位だよ。1cmとか1mmとかの感覚でとりあえず使ってくれたらいいよ。厳密には違う気がするけど。実際に数値いじって自分の目で見て確認すればいいと思うよ。
ほーほー。ちょっとわかってきた!
でもあと2つのCSSがよくわからないんだけど!一つは背景色の指定のはずだよね?
background:#666666;の部分が背景色だね。ただ、backgrondは厳密には背景色じゃなくて「背景」になるよ。正しく背景色ってするにはbackground-colorになるよ。
ん、また省略できるとかいう話?
まぁ似たような話。追々説明するよ。
ふむ……でさ、色はどうやって指定してるの?その謎の#666666っていうのが色?数字で色って指定できるの?
カラーコードっていうんだよ。数字とアルファベットの6ケタの数字で出来てるね。これも実際に試したほうが早いね。
カラーピッカーを用意したから、ここで好きな色を作ってみるといいよ。
カラーピッカーでカラーコード確認
色が決まったら6ケタの数字かアルファベットが出ていると思うから、それをコピーしてヘッダーの背景色を変えてみて。#の後ろの6ケタを書き換えたらいいだけよ。
おおお!おおおお!変わる!色が変わるよ!へぇええ!!!!
あ、ちょっと私気に入った色探してるから、その間にdisplayとかいうの教えてよ
………displayも実際やってみたほうが早いから、やってみてほしいんだけどね?
要素の表示形式を指定するよ。よく使うのはinlineblockあたりじゃないかな?
試しに<header>要素のdisplay:block;をdisplay:inline;に変更してごらん。
あら、縦と横の幅がなくなっちゃったよ。
そういうことー。
表示形式が inline になっていると横幅縦幅の指定ができなくなるよ。ほかにも一部余白の設定ができなかったりね。
ちなみにSTEP.2の改行のときに教えた<p>要素はデフォルトだと block になっているよ。block は縦幅横幅を設定できるけれど、自動的に前後に改行がついちゃうのが特徴だね。
要素によってデフォルトの表示指定が違うのよ
ほー。ってことは<header>要素、<main>要素、<footer>要素はデフォルトがblock以外の何かだったから、わざわざdisplay:block;にしているの?
んー……、まぁ半分あってるかな。
これに関してはちょっとブラウザの話になるんだよね。

ブラウザによるCSSの違い

HTMLはブラウザがタグとかCSSを読み取って私たちにサイトとして表示してくれているわけなんだけれど、若干ブラウザによって表示結果に違いが生じるんだよね。非常にやっかいなことにね。
メルちゃんは今 IE しかブラウザ知らないと思うけれど、IE 以外にも有名なブラウザが4つ程あってね、それらを使っている人も結構多いんだよ。
それに同じ IE でもバージョンによって使えるCSS、使えないCSSも出てくるしね
えぇぇ……何か厄介そう……
どれくらい違いが生じるの?
今回ではこの<header>要素、<main>要素、<footer>要素かな。デフォルトがblockになっているブラウザもあれば、一部inlineになってしまっているブラウザもあるね。この3つはblockになっていてもらわないと話にならないから、すべてに念のためにdisplay:block;って入れているんだ。
ほかにも余白とかに違いが生じて、 IE で見たときは思った通りになっていたのに、違うブラウザでは実は若干違いが!なんてことになったりしてね。
だから、できるだけサイトを作成したら最後に有名なブラウザは一通り表示確認して回ったほうがいいよ。
ひゃあ……大変そう。で、その有名なブラウザっていうのは何があるの?
Internet explorer、Firefox、Chrome、Safari、Opera
この辺をよく見かけるかな?
つらい。
つらいね。でも、やったほうがいいんだよねー。
あとブラウザにもバージョンってあるでしょう?同じブラウザでもバージョンによっても違いが起きたりするよ。しかもCSSだけじゃなくてHTMLもブラウザやブラウザのバージョンによって使えないHTMLのバージョンがあるから要注意ね。
………。
まぁ……うん、気が向いたら調べたらいいよ。
(あれは、考えることを放棄した顔だ)
そうする

CSSを書く場所について

はてさて、さっき<head>要素にCSSを書いたわけなんだけれど、実はCSSを書く場所というか、方法は他にも2つあったりするのよね。
今回やった<head>要素内に直接書くのはあんまりしないかも。
そんなわけで、一番よく使われる方法、CSSファイルを作成し、そっちにCSSを書いておき、そのCSSファイルをHTMLに読み込ませる方法について教えるよ
えぇ……最初から一番使う方法で教えてくれればいいのに!
まぁまぁ。そう言わないの。進めるよ。
index.htmlがあるフォルダと同じ場所にテキストドキュメントを新規作成して。ファイル名は何でもいいけれど「style」にしておこうかな。拡張子は「.css」ね。
拡張子含めてファイル名が style.css になるようにしてね。
ほいほい。index.html以来のファイルの新規作成だね。……できたよー!
ではでは、そのファイルをメモ帳で開いて、さっきのソースの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ファイルにはちゃんと書いたんだけどなぁ
うん。あってるよ。
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]

<link rel=”stylesheet” href=”CSSファイルのURL”>
という風に、CSSファイルのURLを入れることでHTMLファイルのCSSを指定することができるよ。
ん、これタグ?タグってこんなんだっけ?
タグだよ。終了タグがないタイプだね。あ、ちなみに終了タグがない要素は「空要素」って呼ばれているよ。
これは<link>要素だね。
で、多分メルちゃんが見慣れないのは rel=”stylesheet” とかの部分だよね
これはね、属性って言われていて、CSSと似た感じで、要素に追加で「○○を=”○○する”」みたいな指定ができるよ。
属性を使ってこの<link>要素は「スタイルシートのstyle.cssファイルを呼び出します。」って感じになってるわけ
ほうほう。ところでさ、URLってなんか、http://~~とかいうのがURLじゃなかったっけ?style.cssってファイル名じゃないの?
あぁ、そこのところはもうちょっとページ数が増えたときに実際に試しながら教えたいから詳細は後回しにするけれど、同じフォルダ内のファイルへのアクセスはファイル名だけでできるのよ。そんなわけで、今はそのファイル名を入れた状態だけでURLの代わりとして呼び出し可能なの。
とりあえず試しにやってみて。
おっ、本当だ。できたできた♪ちゃんとCSSを指定してたときの状態に戻ったね!
CSSって結構な量書くことになるから、HTMLファイル内に書いていると行数とか文字数とかどえらいことになって編集がめんどくさかったりするのね。だからこうやって別のファイルにCSSを書くとHTMLファイルはほぼタグと内容だけになって、編集が楽だったり。
あと、同じCSSファイルを複数の違うHTMLファイルで呼び出すこともできるからとっても便利よ。
そんなわけでCSSは基本CSSファイル作って書くね。
ほうほう……。
それ以外に、要素にstyle属性を入れて要素の中に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]

ん、フッターが黒くなったね。CSSファイルより優先されるんだね。
うん、その通り。
今回は背景色だけ指定したけれども、これまた続けて複数のスタイル指定ができるからね。
1つのページの1か所にだけこのスタイルを指定したい。っていうような時とかはこれを使ってもいいかもしれないね。
セレクタがなくて、プロパティと値を””の間に書く形になるよ。
ふーん……。
やっていくうちにわかるさ。
はてさて、今回はとりあえずここまでにしておこうか。次回はよく使うCSSをいくつか上げて教えるからお楽しみに。追加でもうちょっとCSSの書き方について触れて行こうかな。