スタイルシート(CSS)入門編その2|ゼロからのWeb制作 Vol.5

こんにちは、鈴木です。
今回は前回に引き続き、スタイルシートについて書いてこうと思います。

目次

  1. スタイルシートでの色の指定
  2. CSSのレベル
  3. スタイルシートのボックスモデル

1.スタイルシートでの色の指定

スタイルシートでは文字の色を変え、背景に色を付けることが出来ます。このとき、色の指定が必要になりますが、CSSでは大きく分けて「カラー名」による指定と、「数値(RGB)」による指定の2種類に分かれます。さらに、「数値(RGB)」による指定方法は、細かく4種類に分かれます。

「カラー名」による指定

カラー名による指定は、赤なら「red」、黒なら「black」のように指定できます。カラー名が表示色になっているので、実際の色をつかみやすいという利点があります。しかし、指定できる色が限られますので、微妙な色表現はできないのが欠点です。なお、CSSレベル1ではカラー名は16色が割り当てられています。

h1 { color:red; }

「数値(RGB)」による指定

微妙な色表現を実現するには、より細かい数値による設定が必要です。色の3原色は「Red」、「Green」、「Blue」ですが、24ビットカラーでは、1ドットに対してRGBの3色それぞれに8ビット(2^8=256諧調)ずつ割り当てると、3色の組み合わせで256×256×256=16,777,216色表現することができます。ただし、閲覧する環境がこの色数に対応していることが条件となります。

なお、CSSではこのRGBによる指定は以下の4種類の方法があります。

h2 { color:#fff ; }

赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「0~9、a~f」までの16段階で示す。

h3 { color:#008000 ; }

赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「00~99、aa~ff」までの256段階で示す。

h4 { color:rgb(0,126,255) ; }

赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「0~255」までの256段階の数字で示す。

h5 { color:rgb(10%,30%,100%) ; }

赤(Red)、緑(Green)、青(Blue)それぞれの濃さを、「0~100%」までの101段階のパーセントで示す。

2.CSSのレベル

CSSレベル1

CSSのレベル1は最初に規定されたものです。HTMLで対応できる書式をほぼカバーできる程度のデザインを規定しています。現在のブラウザではこのCSSレベル1にほぼ対応していますが、同じブラウザの種類でもバージョンが古いブラウザでは完全に対応しきれておらず、デザインが崩れてしまうこともあります。

CSSレベル2

CSSレベル2は、CSSレベル1の機能をさらに拡張したものです。CSSレベル1よりも詳細な設定ができるほか、文字の音声読み上げ機能や印刷における指定など、ブラウザの表示以外についても指示できるものになっています。

CSSレベル3

CSSレベル3はCSSレベル2をさらに進化させたもので、現在も規格化が進められています。現在のブラウザでは対応しきれてはいませんが、レベル3のプロパティを先行して対応させているブラウザも中にはあります。

3.スタイルシートのボックスモデル

WEBブラウザでは、長方形の領域で表示されることが多いですが、この領域のことを「ボックス」と呼び、ボックスは要素の内容、余白、境界線/ボーダー、マージンで構成されています。

内容 (width/heightプロパティ)

ボックスを表すとき、そのブロックレベル要素の骨格となる部分がこのボックスパーツの内容です。
widthとheightプロパティでブロックレベル要素の骨格となる部分の横の長さと縦の長さをそれぞれ指定します。

余白 (padding – パディング)

「border(境界線)と内容の間」の余白サイズに相当します。上下左右を指定することも出来れば、四方向個別に指定することもできます。

境界線 (border – ボーダー)

境界線はボックスの外枠となる部分です。外枠の太さや線種、色を個別に指定できるほか、パディングと同様に四方向一括に指定することも出来ます。

.box{
width:400px;
height:150px;
padding:10px 5px 15px 20px;
border:3px solid #f00;
}

次回もCSSについて書いていこうと思います。