目次:
【第10回】CSS(2) 第1章
--ボックスモデル
--ボックスの配置
第3章
--エディタの設定
|
CSSに必要な単位など
【本節の目的】
CSSでスタイル設定するときに必要な単位や色コードなどについて学習します。 長さの単位CSSでは暗黙の(デフォルト)単位がありませんので、 長さ(大きさ)を指定するときには必ず単位をつける必要があります。 CSSで指定できる長さの単位には、 大きく分けて「絶対単位」と「相対単位」があります。 「絶対単位」というのは、mm(ミリメートル)、in (インチ)、 pt (ポイント、1/72インチ)などの、 我々が日常生活で使っている長さの単位です。 CSSでこれらの単位を用いてスタイルを指定すると、 設定した長さ(大きさ)がそのままWebブラウザで表現されるのですが、 あまり好まれません。それは、Webブラウザの環境が、 ディスプレイのサイズやそのときのブラウザのウィンドウサイズによって変わるため、 どちらかと言うと絶対的なサイズよりその時点での環境に合わせた表示の方が、 より見やすいからです。 そこで登場するのが「相対単位」です。相対単位には以下の3つがあります。
通常、文字の大きさの単位は「em」を用い、 それ以外の画像や文書ブロックの大きさなどの単位は「px」を用います。
(註1) いくつかのプロパティでは、整数だけではなく小数を含んだ実数が指定できるものもあります。
p.sbg { font-size: 1.8em; }
(註2) 一部のプロパティでは、
「%」を単位とするパーセンテージ値が指定できるものもあります。
p.db { font-size: 200%; } URI
CSSで値にURIを指定する場合は、「url()」関数を利用します。
「url()」は、関数の引数 (関数の入力) として、
相対URIまたは絶対URIを指定します。
そのURIで指定されたファイルがその値として設定されます。
body { background-image: url("./img/bg.jpg"); } 上記の例では、HTMLの本文の背景画像として、 CSSファイルから見た相対URI「./img/bg.jpg」の画像ファイルを指定しています。
(註) ここで言う「関数」は、数学のときに出てきた関数と同じように、
何か値を入力すると、何らかの処理がされて出力が得られるものです。
【注意】 url関数で利用する相対URIは、
CSSファイルから見た相対URIです。
HTMLファイルからの相対URIではありませんので、注意して下さい。
色の表現 (色コード)色 -- それは光の三原色(RGB)により構成されるPCの世界で色は、光の三原色(Red、Green、Blue)の強さを混成して表現します。 三原色のそれぞれを16進数 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) で表現します。 "
ただ、人間の目には、上記のような色の違いは分りませんので、
もう少し荒い区別でも、十分利用できます。そのため、Webページの色としては、
"
(註) ただし、"
#RGB " は "#R0G0B0 " ではなく、
"#RRGGBB " と解釈されます。たとえば、 " #fa8 " は "#ffaa88 " と同じです。
色の名前以下の16種類の色は、代表的な色なので名称 (色名) が定義されています。 これらの色は、16進数表記だけでなく色名で指定することができます。
下記の2つのCSSの記述は、全く同じ効果を指定していることになります。 body { background-color: #00ffff; } body { background-color: aqua; } 色サンプル
下のバーは、色表現のサンプルです。
バーの下にある三原色のそれぞれの明るさ(強さ)を、
0?255の範囲で変えることで、
いろいろな色を出すことができます。
R、G、Bの明るさを適当に変化させて、
自分の必要な色を見つけて下さい。 16進表現ボックスに現われた数が、
表示されている色のコードです。この数を、CSSで利用して下さい。 代表的な色のサンプル (16進三桁表記)RGBそれぞれ一つずつの強さを変えた色サンプルを以下に示します。
RGBを混ぜ合わせた代表的な色のサンプルを以下に示します。
(註) 上記以外の色やフルカラーの色見本を参照したいときは、google等で、
「色見本」や「カラーコード」などをキーワードにして検索するとよいでしょう。
|