3分 : 第2章 CSS
_04 CSSとは何か？
スタイルシートは、 HTML で作成したドキュメントが実際にどのように表示されるかを記述するための言語です。もし、皆さんがHTMLを使って子犬を描いたと想像してみてください。
その子犬の尻尾がどれくらい長いか、頭がどれくらい小さいか、体格はどれくらいか。このようなことを記述できるようにした言語が、まさに CSS です。
言い換えれば、皆さんが骨組みを描いて、その上に服を着せたとします。ここまでの作業が HTML だとすれば、その服のサイズはどれくらいか、何色かといった属性を加えていくのがCSSの役割です。
では、整理してみましょう。 HTML と CSS の役割は以下の通りです。
HTML
- 骨組みに服を着せる。
CSS
- 服がどのような見た目か（サイズや色など）を指定する。
さて、CSSの役割がわかりましたね。それではCSSの基礎を学んでみましょう。
CSSの使用方法
- css ファイルを作成後、 HTML ファイルで参照して使用します。
- HTML ファイル内に直接 css を記述して使用します。
- Javascript を利用してスタイルを適用します。
もちろん他にも方法はありますが、最も一般的に使われる方法を紹介しました。これらの方法を使えば、皆さんは思い通りに HTML の見た目を整えることができます。
例を挙げてみましょう。
以下のようなHTMLコードがあります。
<
html
>
<
head
>
</
head
>
<
body
>
<
p
>
Hello
</
p
>
</
body
>
</
html
>
上記の HTML ソースにある「Hello」という文字を赤く表示したい場合、どうすればよいでしょうか？
以下のようなスタイルコードを追加すれば、赤い「Hello」が表示されます。
<
html
>
<
head
>
<
style
>
.red_hello
{
color
:
red
;
}
</
style
>
</
head
>
<
body
>
<
p
class
=
"red_hello"
>
Hello
</
p
>
</
body
>
</
html
>
CSSについて詳しく説明していると3分を過ぎてしまいそうです。ですので、くどい説明は抜きにして、ポイントを整理します。
HTMLコードでCSSを使用する
- classを作成し、HTMLタグに適用する。
- HTMLタグに直接styleを記述する。
この2つの方法があります。
1つ目は上で使用した方法です。では、直接記述する方法はどうするのでしょうか？ 次の例で紹介します。
... 中略 ...
<
p
style
=
"color:red;"
>
Hello
</
p
>
... 中略 ...
このように記述すれば、クラスを作らずにそのタグに対して直接スタイルを適用できます。
では、なぜクラスを使うのでしょうか？ もし特定の単語をすべて赤くしたい場合、直接記述する方法だとタグごとに一つずつスタイルを書き込む必要があります。しかし、最初に紹介した方法を使えば、そのクラス（またはid）を持つすべてのタグに対して一度でスタイルを適用できるという利点があります。
また、スタイルを「class」として整理しておけば、後から複数のクラスを組み合わせたタグを作ることも可能です。
CSSの重ね合わせ（継承・組み合わせ）
- btnクラスを作成し、文字サイズを20ptにする。
- .btn { font-size:20pt; }
- btn-dangerクラスを作成し、文字色をredにする。
- .btn-danger { color:red; }
上記のようにクラスを複数作っておき、タグに必要なクラスを並べて記述すると、スタイルが重ね合わせて適用されます。 なお、同じ属性が重複している場合は、後に適用されたクラスの属性が上書きします。
適用例は以下の通りです。
<
div
class
=
"btn"
>
大きなボタン
<
div
>
<
div
class
=
"btn-danger"
>
赤いボタン
<
div
>
<
div
class
=
"btn btn-danger"
>
大きくて赤いボタン
<
div
>
このように、スタイルを使えば HTML のタグを思い通りに表現できます。
まとめ
- スタイルはHTMLの表現方法を定義する。
- スタイルはクラスを通じて重ね合わせて適用できる。ただし、同じ属性の場合は後に適用したクラスが優先される。
- スタイルはタグに直接適用することもできる。
3分予告
- さて、服を着せることはできました。次は、これを動かすにはどうすればいいでしょうか？