CSSの実習(1) - 色の指定。

お詫び(平成23年11月12日)
本コンテンツでサンプルとしている HTML 文書に以下のマークアップ漏れがありました。

平成23年11月10日以降に本コンテンツをご利用の方は、訂正した HTML 文書を御覧ください。

ご迷惑をお掛け致しました事を深くお詫び申し上げます。

これから、実際にCSSでのスタイル定義ファイルをHTML文書に適用して行きましょう。

まずは第一歩として、色の指定をやってみましょう。

実例として適用するHTML文書。

お詫び(平成23年11月12日)
以下の HTML 文書にマークアップ漏れがありましたが、平成23年11月12日現在、修正されております。

平成23年11月10日以降に本コンテンツをご利用の方は、以下の訂正された HTML 文書に差し替えてください。

ご迷惑をお掛け致しました事を深くお詫び申し上げます。

実例として適用するHTML文書を以下のものとします。

  • これは、HTML 5 入門篇で書いたHTMLを一部直したものです。
  • ここでは、HTML文書, スタイル定義ファイルともにシフトJISコードで記述するものとしておりますが、他のエンコーディングを用いる場合には適宜読み替えてください。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="shift_jis" />
        <title>HTMLとは何か</title>
        </head>

    <body>
        <article>
            <h1>HTMLについて。</h1>
            <section>
                <h2>HTMLとは。</h2>
                <p><dfn>HTML</dfn>はウェブで公開する電子文書を作る為の言語です。</p>
                <p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>
                </section>

            <section>
                <h2>HTMLの特徴。</h2>
                <p>HTMLの特徴は</p>
                <ul>
                    <li>画像を埋め込める</li>
                    <li>文字の色など表示方法を指定出来る</li>
                    </ul>
                <p>では<em>ありません</em>。</p>
                <p>確かに画像を埋め込んだりする事も可能です。</p>
                <figure class="sample">
                    <img alt="" src="HorikitaUsagi.GIF" width="218" height="269" />
                    </figure>
                <p>しかし、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
                <p>HTMLの最大の特徴は</p>
                <ul>
                    <li>ハイパーリンクが使える</li>
                    <li>どんな環境でも読めるようになっている</li>
                    </ul>
                <p>この二点に尽きます。</p>
                </section>
            </article>

        <hr />
        <address>Copyright(C) 2011 しらぎくさいと <a href="mailto:marguerite.site@gmail.com">marguerite.site@gmail.com</a></address>
        </body>
    </html>

さて、現時点ではまだスタイル定義が行われていないため、このHTML文書をブラウザで表示させた場合ウェブブラウザのデフォルトスタイルでの表示となる筈です。

実際に表示させると、こんな感じになるでしょう。

  • 普通の文字は白地に黒文字、リンクのアンカーは青文字(訪問済みなら紫)で表示されてます。
  • 実際には、使用するウェブブラウザやフォントなどの設定に依り見え方は違ってくるかも知れませんが、取敢えずデフォルトの表示スタイルとなっているのは分かると思います。

これから、この実習ではこのHTML文書に適切なスタイルを与えていくものとします。

色の指定で出来る事。

CSSを用いる事で、前景色(文字の色)や背景色を指定する事が出来ます。

  • 更に背景には画像を指定する事も可能ですが、これについては後ほど解説する事とします。
  • 詳しくは、色関連の主なプロパティをご覧ください。

今回やりたい事。

今回は、色に関して以下のようにしたいと思います。

  1. 基本として、無色透明の背景に黒文字とします。
  2. 文書全体の背景を白地にします。
  3. <h1>要素(第一等級見出し=大見出し)は背景黄色で緑文字とします。
  4. <h2>要素(第二等級見出し)は背景白で緑文字とします。
  5. 更に、<a>要素(アンカー)は未訪問は緑・訪問済みは黒とし、
  6. <dfn>要素(定義語)は緑、<em>要素は赤とします。

ここでは、実習としてやりたい事を挙げております。

もし、読者の方がここで挙げている色遣いではなく、別の色遣いにしたいと思うのであれば、それを実際にやってみるのが何よりの実習です。

是非挑戦してみてください。

事前に準備しておく事。

HTML 文書に CSS でスタイルを適用するには、幾つかの準備が必要です。

ただ、その内の一部は初めに一回やっておくだけで、後はちょっと変えた方がいいかなと思った時だけ修正すればいいので、文書を何枚も作成される場合でもそれ程手間にはならない筈です。

スタイル定義ファイルの用意。

まず、スタイル定義ファイルを用意します。

ここでは、HTML文書と同じディレクトリに style.css と言うファイル名のPC向けスタイル定義ファイルが用意されているものとします。

  • 今回は実習のため、同じディレクトリにスタイル定義ファイルを置いておりますが、実際にサイトを作る場合にはHTML文書とは別に専用のディレクトリを置いて、そこにスタイル定義ファイルを纏めると管理し易くなるでしょう。

このスタイル定義ファイルは今のところ文字コードのエンコーディング名指定が書かれているだけとします。

つまり、以下の一行だけとなっているものとします。

  • ここでは、HTML文書, スタイル定義ファイルともにシフトJISコードで記述するものとしておりますが、他のエンコーディングを用いる場合には適宜読み替え或いは書き換えてください。
@charset "shift_jis";

尚、スタイル定義ファイルについての作業は、

  1. 実際に初めてサイトを作る時
  2. サイト作成後の場合でも、スタイルの修正をしたいと思った時

にだけやれば良いので、文書を作る度にいちいち作業をする必要はありません。

インターネットエクスプローラ対策スクリプトの用意。

CSS(カスケーディングスタイルシート)の書き方使い方内のHTML 5 の場合の準備で述べた通り、インターネットエクスプローラではある手続きをしておかないと、HTML 5 で新たに導入される予定の要素は全て無効にされ、スタイルの適用が出来なくなります。

  • HTML 5 より前の、現行の規格で定められた要素についても、一部のヴァージョンでは認識されません。

このため、以下のようにして、インターネットエクスプローラ対策スクリプトを用意します。

  1. インターネットエクスプローラ対策スクリプトの作成 - 先ず、テキストエディタで以下のインターネットエクスプローラ対策スクリプトを作成します。

    以下はプログラムですので、誤字が一箇所でもあるとエラーとなって動作しなくなる事があります。

    このため、間違いを避ける意味でも、可能なら以下からコピー・ペーストする事をお勧めします。

    h5=new Array('abbr', 'article', 'section', 'nav', 'aside', 'figure', 'figcaption', 'header', 'footer', 'hgroup', 'mark', 'time', 'bdi', 'details', 'summary', 'video', 'audio', 'source', 'track', 'progress', 'meter', 'datalist', 'command', 'keygen', 'canvas');
i=h5.length; while (--i>=0) document.createElement(h5[i]);
  2. このファイルを、forIE.js と言うファイル名で、スタイル定義ファイルと同じディレクトリ(フォルダ)に保存します。
    • ファイル名は特に定められている訳ではありませんが、IE対策と言う事で、上記のようなファイル名にしました。
    • 尚、JAVAスクリプトの場合、拡張子は大抵 .js とします。

この作業は、サイト作成時に一回だけやれば良い事ですので、文書を書き足す度に行う必要は一切ありません。

HTML文書側での準備。

続いて、HTML文書側でも準備をしておきましょう。

を併せて行います。

ここでは、HTML文書と同じディレクトリにある

  • style.css と言うファイル名のスタイル定義ファイル
  • forIE.js と言うインターネットエクスプローラ対策スクリプト

をリンクまたは埋め込みするので、ヘッダには以下のように加筆される事になるでしょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="shift_jis" />
        <title>HTMLとは何か</title>
        <!--[if IE]><script type="text/javascript" src="style/forIE.js"></script><![endif]-->
        <link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
        </head>

    <body>
    (中略)
        </body>
    </html>
  1. <script type="text/javascript" src="style/forIE.js"></script>要素でIE対策スクリプトが埋め込まれ、
  2. <link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />要素でスタイル定義ファイルをリンクしている

のが分かりますね。

尚、この作業は文書を作る度に必要ですが、一連の作業に組み入れればそれ程手間にはならない筈です。

予め準備すべき事はここまでです。

実際のスタイル定義。

さて、漸く準備が整いました。

これから実際にスタイル定義ファイル style.css にスタイルを記述していきましょう。

スタイル定義ファイルの書式で述べた通り、スタイルの定義には、

  1. 定義の対象となるセレクタを指定して
  2. 必要なプロパティ(スタイルの属性)を指定する

と言う形となります。

セレクタもプロパティも多岐に亘り、一通り覚えるのは困難なので、実際に必要に応じて覚えて行くようにしましょう。

まずは、基本となる色を。

通常、ウェブブラウザには、デフォルトの表示スタイルが定義されております。

これらが紛れ込むと、スタイルが巧く設定出来なくなるかも知れません。

そこで、基本となるスタイルを定義して、これらの定義をリセットする必要があります。

  • 基本となるスタイルを定めるもうひとつの利点として、予め基本のスタイルを定める事で、特に基本から外れていない要素に関してはスタイル定義を書く必要が無くなると言うものがあります。CSSの最大の特徴がこの基本を定めて、必要に応じて例外を定める事で記述が簡素になると言うものがあるのです。

初めに述べた通り、基本となる色遣いとして、

  • 背景は原則無色透明
  • 文字の色を黒

と言うスタイルを定義します。

そこで、全称セレクタに対して、スタイル定義ファイル style.css の続きに、以下のスタイルを定義します。

* {
    background-color: transparent;
    color: #000;
    }

ここで、

  1. background-color プロパティは背景色
  2. color プロパティは前景色(文字の色)

となっております。

この全称セレクタに対するスタイル定義は、特にプロパティが指定されていない全ての要素に適用されると言う事は忘れないでください。

文書全体のスタイル定義。

基本となるスタイルを決めたら、今度は各要素ごとの細かな指定を行います。

先ずは、文書全体の背景を白とするスタイルを当ててみたいと思います。

文書全体と言う事は、文書の最上位の要素である<html>要素に適用すれば良い事となります。

つまり、<html>要素の要素セレクタに対して、スタイル定義ファイル style.css の続きに、以下のスタイルを定義すれば良い事になります。

html {
    background-color: #fff;
    }

ここでは background-color プロパティ(背景色)だけが指定されております。

<h1>要素(第一等級見出し)へのスタイル定義。

続いて、<h1>要素(第一等級見出し)の色について、初めに決めた通り、

  • 背景は黄色で文字は緑の太字

と言うスタイルを当ててみたいと思います。

この場合、<h1>要素の要素セレクタに対して、スタイル定義ファイル style.css の続きに、以下のスタイルを定義します。

h1 {
    background-color: #ff0;
    color: #090;
    }

ここでも、

  1. background-color プロパティ(背景色)
  2. color プロパティ(前景色(文字の色))

が指定されておりますね。

<h2>要素(第二等級見出し)へのスタイル定義。

次に、<h2>要素(第二等級見出し)の色について、初めに決めた通り、

  • 白の背景に緑の太字

と言うスタイルを当ててみたいと思います。

この場合、<h2>要素の要素セレクタに対して、スタイル定義ファイル style.css の続きに、以下のスタイルを定義します。

h2 {
    background-color: #fff;
    color: #090;
    }

勿論ここでも、

  1. background-color プロパティ(背景色)
  2. color プロパティ(前景色(文字の色))

が指定される事になります。

アンカーへのスタイル定義。

今度は、リンクアンカー(<a>要素)のスタイル定義です。

アンカーの場合、未訪問と訪問済みの二つの場合がありますが、これはリンク擬似要素セレクタで指定する事が出来ます。

ここでは、<a>要素の色について、初めに決めた通り

  • 未訪問は緑
  • 訪問済みは黒

としましょう。

すると、リンク擬似要素セレクタに対して、スタイル定義ファイル style.css の続きに、以下のスタイルを定義すれば良い事になります。

a:link {
    color: #090;
    }

a:visited  {
    color: #000;
    }

ここでは、背景色は指定せず、

  1. color プロパティ(前景色(文字の色))

のみを指定しております。

基本となるスタイルとして、デフォルトの背景は白としているため、background-color プロパティ(背景色)を指定していないこれらの要素については、自動的に白が適用される事となります。

その他のフレージング内容要素(インライン要素)へのスタイル定義。

この他、初めに決めた通り、フレージング内容要素(HTML 4/XHTML 1 で言うインライン要素)として、<dfn>要素(定義語)及び<em>要素(強調)にも色を定義する事にします。

そこで述べた通り、

  • <dfn>要素(定義語)は緑
  • <em>要素(強調)は赤

とする事としました。

この場合、<dfn>要素及び<em>要素の要素セレクタに対して、スタイル定義ファイル style.css の続きに、以下のスタイルを定義します。

dfn {
    color: #090;
    }

em {
    color: #f00;
    }

上記のフレージング内容要素(インライン要素)についても、背景色は指定せず、

  1. color プロパティ(前景色(文字の色))

のみを指定しております。

基本となるスタイルとして、デフォルトの背景は白としているため、background-color プロパティ(背景色)を指定していないこれらの要素については、自動的に白が適用される事となります。

ここまででのスタイル定義ファイルの纏め。

以上のスタイルを纏めると、スタイル定義ファイル style.css は以下のようになっているでしょう。

@charset "shift_jis";

* {
    background-color: transparent;
    color: #000;
    }

html {
    background-color: #fff;
    }

h1 {
    background-color: #ff0;
    color: #090;
    }

h2 {
    background-color: #fff;
    color: #090;
    }

a:link {
    color: #090;
    }

a:visited {
    color: #000;
    }

dfn {
    color: #090;
    }

em {
    color: #f00;
    }

このスタイル定義ファイルを適用したHTML文書を表示させると以下のようになります。

見出しやアンカーなどが緑で、特に<h1>要素(第一等級見出し)は黄色の背景での表示となりました。

ずいぶん見栄えが変わったと思われた事でしょう。