CSSの備考とまとめ

  1. 単位について
  2. 色について
  3. 擬似クラスと擬似要素
  4. CSSの継承と詳細度、そしてカスケード
  5. 三章でやってきたこと

単位について

これまでCSSをHTMLに適用させる方法やセレクタの書き方などを学びました。プロパティについては目的別に分けて、実際に使用した形と記述例を併せて次の章で説明して行きます。この章の最後ではそのプロパティの値である数値の単位の説明から入ります。CSSでは文字の大きさや線の太さ、範囲の指定などを設定する時に数値を用いますが、使用できる単位には幾つかの種類があります。

相対単位

%は長さにおける相対単位とは言い難いですが、新たな節を作って説明するほどでも無いので便宜上併せて説明させてもらいます。

ただしpxは出力する画面の解像度などに依存し、そういった意味での相対単位なので実質は絶対単位に近いです。

絶対単位

相対単位と絶対単位にはどんな違いがあるんですか？

簡単に言えば絶対単位は決まっている物理的な単位で、どこで計っても同じ長さ、環境に左右されない長さです。1cmという単位は沖縄でも北海道でも変わりませんよね。逆に環境によって変化する物や、ユーザが変更できる物を相対単位といいます。

em（エム）
その要素の font-size の値を参照し、指定がなければ親要素から計算し、親要素にも指定が無い場合はUAのデフォルトの設定に従います。例えば font-size が 12pt の場合は 1em = 12pt のような関係になります。
ex（エックス）
英小文字の『x』の高さを基準とします。
px（ピクセル）
画面解像度によって相対的な値を返します。
%（パーセント）
様々な対象に対しての相対的な値を返します。
in（インチ）
1in = 25.4mm
cm（センチメートル）
1cm = 10mm
mm（ミリメートル）
10mm = 1cm
pc（パイカ）
1pc ≒ 4.23mm
pt（ポイント）
1pt ≒ 0.353mm

こんなにいっぱいあってどれを使えばいいのかわかりませ〜ん。

基本的には相対単位を用いましょう。使い易いのはpxだと思いますが、大雑把に一文字の大きさを1emだと考えるとそれもわかり易いかもしれません。ただしemの場合は該当要素に依存しますので、同じ1emでも幅が違ったりするのに注意です。exは諸々の理由からオススメしません。%は感覚的にも使い易いと思います。

センチとかの方がわかり易いし、きちんと固定されていた方がデザインし易いんですけど。

それは確かにそうかもしれませんね。でもその文字の大きさでは読めないという人はどうしましょう。新聞などなら虫眼鏡やルーペなどを用いて読んだりしますが、Webサイトの場合はブラウザの機能で文字を大きくしたり出来ます。しかしこれが絶対指定で決められていると大きさが変わらないのです。せっかくそのような便利な機能があるのにそれを阻害して、ユーザに虫眼鏡やルーペなどを使用させますか？そこまでして読んで貰えるでしょうか。何の為のデザインでしょう。読ませる為のデザインではなかったでしょうか。

色について

文字の色、線の色、背景の色など、色を指定できる場所はたくさんあります。ここではその色の指定の仕方を説明します。

色名で指定する
色の名前を直接記入します。定義されているのは基本色である十六色とシステム色のみです。他の色名はブラウザによる独自拡張ですので、ブラウザによって意図しない色になる可能性があります。 
p {color:red;}
#RRGGBBで指定する（光の三原色）
16進法の6桁の数字で色を指定する事が出来ます。16進法というのは「0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,12,…19,aa,ab…fe,ff…」という数え方で、6桁で指定するというのは #6699ff や #9acd32 のようにして記述します。これは左から、最初の二桁が赤の量を示し、次の2桁が緑の量、最後の2桁が青の量を表しています。だからR（red）G(green)B(blue)なのです。cssの場合はこのように二桁ずつに分かれて各色の強さを示しています。その強さは00が一番弱くてffが一番強いです。ですから #ff0000 は赤色になり、#00ff00 は緑色になり、#0000ff は青色になり、#000000 は黒色になり、#ffffff は白色になります。（以下の例は赤色です） 
p {color:#ff0000;}

16進法の二桁では16×16で256種類まで表現できます。よってRGB全てでは256×256×256で1677216色まで表現が可能という事です。

#RGBで指定する
#RRGGBBで指定するのと概念は同じです。省略版とでも言えばわかり易いでしょうか。#ff0000 を #f00 の様に表し、二桁で表していた所を一桁ずつにします。もちろん一桁では表現できるのが16個に限られるので16×16×16で4096色しか表現できません。（以下の例は赤色です） 
p {color:#f00;}
rgb(***,***,***)で指定する
基本的な考え方は同じですが、16進法ではなく10進法の0から255の数字で指定します。0が一番弱くて255が一番強いです。（以下の例は赤色です） 
p {color:rgb(255,0,0);}
rgb(***%,***%,***%)
10進法でも分かり難い場合はパーセンテージで指定する事が可能です。0%が一番弱くて100%が一番強いです。（以下の例は赤色です） 
p {color:rgb(100%,0%,00%);}

これもどれを使ったらいいのかわかりませ〜ん。

基本的には #RRGGBB で指定しましょう。それで簡略化出来る色ならば #RGB で指定するのが良いと思います。

でもどの色をどのくらい混ぜたらどんな色になるのかなんてわかりません。

カラーチャートや色を抽出するツールなどがありますのでそれを観ながら指定するのが良いと思います。以下に基本の16色と、256色環境でも表現できる色の内、MacintoshとWindowsで異なる40色を除いた216色のWebセーフカラーと呼ばれる色をRGB値と共に紹介して置きます。ついでにシステム色についても説明します。

基本色
Webセーフカラー
CSS2のシステムカラー（アルファベット順）

システムカラーはパソコンによって表示する色が変わります。これはユーザが標準的に利用しているインターフェイスと同じ色を再現するようになっているからです。

ふぅ。疲れました。労力の割りには還元できる情報が少ないですね。他にもブラウザ（UA）によって独自拡張をしている色などがありますが、Webセーフカラーや標準色、システムカラーを使用したほうが意図しない色が再現されるなんて事もなくなるでしょう。他にも「Web カラー」「カラーピッカー」「Web 配色」「色見本」「カラーチャート」などで検索すると多くの情報を得られるでしょう。何にしても環境に依存しない、誰もが読める配色を心掛けましょう。

擬似クラスと擬似要素

セレクタの説明の時に同時に説明すれば良かったのですが、実はセレクタに擬似クラスや擬似要素といった物を付加する事により、その要素の特定の箇所にスタイルを適用させる方法があるのです。しかしこれもブラウザの対応状況がまちまちなのでまとめて説明するのは避けました。特に使用頻度の高いと思われるリンクに関する疑似クラスなどの説明については次の章からのCSS目的別プロパティ一覧などで、実際の使用法と併せて説明した方が理解し易いと思うので保留させて頂きます。

例えばどんな事ができるのですか？

マウスカーソルが乗った時とか、その要素の一行目とか、その要素の始めの文字とか、その要素の前もしくは後にとか、そういった細かい部分の指定ができるのです。

訪問済みのリンクの色が変わったり、マウスカーソルを乗せると色が変わったりするのがそれですか？

そうです。それも疑似クラスを用いています。

CSSの継承と詳細度、そしてカスケード

この部分がCSSの最たる特長と言って良いのかもしれませんが、現時点では執筆者の説明の技量が追いついていません。申し訳ございません。ただ一つだけ覚えて置いて貰いたいのは、後に記述されたCSSの方が適用される事と、詳しく書いたセレクタの方が強いという事、そして入れ子になっているより内側のセレクタの方が強いという事です。

同一CSS内の順番
p{color:#ff0000;}
p{color:#0000ff;}
このような場合は後に書かれた #0000ff が適用されます。
適用方法での差異
<link rel="stylesheet" href="./common.css" type="text/css">

<style type="text/css">
p {color:#ff0000;}
</style>

<p style="color:#000000;">
このような場合は #000000 が適用されます。よりその要素に近い位置で指定したCSSが適用されます。
入れ子の構造
p {color:#ff0000;}
strong {color:#0000ff;}

<p>真面目に創るWebサイトは<strong>初心者の為の</strong>Webサイト作成支援サイトです。<p>
このような場合は『初心者の為の』という部分が #0000ff になります。これは書き方を 
strong {color:#0000ff;}
p {color:#ff0000;}
このように逆にしても同じです。これは継承と呼ばれる部分と関係してくるのですが、やはり説明は難しいです。

本当に申し訳ありません。いずれ別途ページを用いまして詳しく説明出来たらなと思っています。それまではリンクページに紹介していますサイト様で勉強して下さい。もちろん他の部分に関しても圧倒的に他のサイト様の方が詳しいです。

三章でやってきたこと

一章や二章に比べると機械的な説明だったかもしれませんが、基本を学んだ後はどのようなHTMLタグを用いて文書をマークアップをするか、そしてマークアップを施したHTMLファイルに如何にしてCSSを適用させるかの問題になるので、先ずはどのようなHTMLタグがあるのかを学びました。これで見栄えはともかくコンピュータに文書の意味を読み取らせる事ができるようになり、ユーザもその意味付けを理解できるようになりました。そうしたら次に考えるのがどのように見せるかですが、それはCSSという物を用いると学びました。そしてその適用法までをこの三章で学びました。現段階ではCSSをHTMLファイルに適用させる方法を学んだだけで、どのようなCSSがあるのかは説明していません。次の章からはそういった部分を中心に説明して行きます。

確かにマークアップの方法も、ある要素に対してCSSを適用させる方法も学びましたが、body要素の背景色を赤くする方法すら学んで無いですね。

その通りです。これからはそのCSSのプロパティの部分について説明して行きます。まあいつに出来上がるかはわかりませんけれども…。

[ トップページ ] [ 目次 ] [ ページの先頭 ] [ 前項目 ] [ 次項目 ]

Google