CSSことはじめ

今まで学習してきたHTMLは、あくまで文書の構造を表現することしかできませんでした。CSSを用いると、HTMLによって形作られた文書構造を、極めてリッチに装飾することができます。

style属性を使用してCSSを使ってみる

以下のようなHTMLファイルを作成しましょう。

<div style="color: red; font-size: 40px;">Hello World</div>
caution

これ以降、HTMLを記述する際は、必要な部分のみを記述するものとします。例えば、上記の例であれば、実際のHTMLファイルは

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div style="color: red; font-size: 40px;">Hello World</div>
</body>
</html>

となるのでしょうが、今回関心があるのはbodyタグの内部のみです。

上記の例の実行結果は、以下のようになるはずです。

Hello World

CSSは、プロパティ名: 値;の形式で記述します。上記の例で使われているcolorプロパティは文字色を設定するため、font-sizeプロパティは文字サイズを指定するためのプロパティです。セミコロンで区切って複数のプロパティを使用することができます。

CSSを別ファイルに分離する

Webサイトの見た目に対する社会の要求の高まりに応えてCSSのプロパティの種類は増え続け、現在ではとても数えきれないほどとなっています。CSSの記述量はHTMLのそれとは比較にならないほど多い場合がほとんどです。

このため、CSSをすべてstyle属性で記述するのは現実的ではありません。数が多すぎて、見通しが悪くなってしまうからです。このため、通常CSSファイルはHTMLファイルとは別に用意します。

CSSを別ファイルに分離する

CSSファイルの拡張子は通常.cssです。今回はindex.htmlと併せてstyle.cssを作成しました。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="element">Hello World!</div>
</body>
</html>
style.css
#element {
color: red;
font-size: 40px;
}

まず注目すべきはlinkタグです。href属性を指定することにより、外部に作成したCSSファイルを読み込ませることができます。

外部CSSファイルの中身はcolor: red; font-size: 40px;だけというわけにはいきません。なぜなら、このCSSがHTML上のどの要素に適用されるのかを指定しなければならないからです。

その役割を担っているのがセレクタ、この例では#elementの部分です。「id属性がelementである要素」を示します。id属性は、HTML要素に対して開発者が自由に設定できますが、1ページ内に同じid属性を持つ要素が複数存在してはならない、というルールがあります。

これに対し、class属性は、開発者が好きな値を設定できるのは同じですが、同じ値を複数の要素が持つことを許されています。また、スペース区切りで複数の複数の値を設定することもできます。セレクタは、.elementのようにドット記号に続けて記述します。

セレクタ意味
#elementid属性がelementである要素
.elementclass属性にelementが含まれる要素
elementタグ名がelementである要素

また、セレクタをスペースで区切ると子孫要素、>で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。

セレクタ意味
div.elementclass属性にelementが含まれるdiv要素
#parent .childid属性がparentである要素の子孫の、class属性にchildが含まれる要素
#parent > divid属性がparentである要素の直属の子のdiv要素

セレクタを上手に活用すると、HTMLを最小限必要なものに抑えながら、変更に強くて柔軟なCSSを作成することができます。

Edit this page