せめて色をつけよう

スタイルシート

これから学ぶのはカスケーディングスタイルシートといいます。CSSと略します。W3CのHTML4.0から取り入れられた手法で、画像などを利用しなくてもかなりの見栄えを確保し、なおかつ指定も易しく、文章の内容もわかりにくくならない優れた方法です。

文章内の役割をタグで表し、見栄えをスタイルシートにまかせます。文章はそのままで、スタイルシートだけを取り替えて全く違う見栄えにすることができます。

CSSの書き方

カスケーディングスタイルシート（以下CSS）はタグごとに見栄え（以下スタイル）を指定します。指定の方法はいくつかありますが、最も簡単なヘッドの部分に書くやり方からはじめます。

例えば次のように指定します。

<head>
<meta charset="utf-8">

<title>情報で学んだこと</title>
<style type="text/css">
 h1 {color:blue; }
 h2 {color:green;  background-color:palegreen; }
 p  {color:teal; }
 body {background-color:ivory; }
</style>
</head>

書く場所を確保

スタイルシートは head の部分に、<style></style> で挟んで記述します。

最初のタグに type="text/css" を入れてテキストで書かれたcssの形式のものであると宣言します。html5ではこれは省略可能です。

<style type="text/css">

スタイルシートの指示がここに入る

</style>

スタイルシートの指示の仕方

基本的にCSSの設定は、以下のような書式で行われます。

セレクタ {属性 : 値}

例えばこのように書きます。

h1 { color : blue }
h1 タグについては 色(color) を 青(blue)にする

複数の指定をするときは ; (セミコロン)でくぎって書きます。

h2 {color:green;  background-color:palegreen }
h2 タグについては
    色(color)を緑(green)にし、背景色(background-color)を薄緑(palegreen)にする。

最後の ; (セミコロン)はいらないのですが、書いてもかまいません。

h2 {color:green;  background-color:palegreen; }

書式の自由

改行や半角スペースは無視されますから工夫すると見やすく書けます。つぎの２つの書き方は全く同じ意味になります。

 h2  {color:green; background-color:palegreen; }

 h2 {
   color: green;
   background-color: palegreen;
 }

指定する属性が多くなると下の書き方の方が人間にとって見易くなります。ただし全角スペースは絶対にいれないこと

ここで使ったCSSの全部の説明

h1 {color:blue; }

h1 の 色を blue にする。

h2 {color:green; background-color:palegreen; }

h2 の 色を green にし、背景色を palegreen にする。

p {color:teal; }

p の 色を teal にする。

body {background-color:ivory; }

body の 背景色を ivory にする。

結果はこのようになります

css 適用の効果をイメージ図で表します。下のボタンを押してください。

cssなし　 cssあり　

下のリンクはそれぞれのページにリンクしています。ここに戻るときはブラウザの「もどる」ボタンを使ってください

cssなしのjoho.htmlへ　　cssを使ったjoho.htmlへ　

色の種類

これらの色の名前がhtmlで定義されるのは、html4.01までです。それ以降はcssに見栄えを任せる方向になり色の定義もcssでされるようになります。css2.1ではhtmlの16色にorangeを加えたものが定義されています。

この他の色名はブラウザごとに定義されたものでしたが、CSS Color Level 3 で Extended color keywords として定義されました。140程度の色名がありますが、カラーコードを使うのがいいでしょう。