CSS(カスケーディングスタイルシート)とは何か。

先ず、CSS(カスケーディングスタイルシート)とは何かを解説します。

スタイルシートと言う概念。

スタイルシートとは、コンピュータプログラム一般の出力フォーマットの事です。

プログラムがウェブブラウザであれば、画面等への表示フォーマットがスタイルシートとなります。

同様に、HTMLなどのデータファイルをあるフォーマットに変換するプログラムならデータの変換フォーマットがスタイルシートとなります。

HTMLに於いては、原則として表示方法を規定しないものとしております。

このため、ウェブブラウザの場合に限っても、環境に応じて各要素に対して適切なデフォルトスタイルを定める事が出来ます。

ウェブブラウザのスタイルシートの例。

今、以下のようなHTML文書があったとします。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="shift_jis" />
        <title>HTMLとは何か</title>
        </head>

    <body>
        <article>
            <h1>HTMLについて。</h1>
            <section>
                <h2>HTMLとは。</h2>

                <p>HTMLはウェブで公開する電子文書を作る為の言語です。</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>ではありません。</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>
        </body>
    </html>

これを、ファイヤーフォックス 5とLynx(リンクス)でそれぞれ表示させてみましょう。

特に<h1>要素と<h2>要素に注目して下さい。

ファイヤーフォックス 5で表示した場合
  • ファイヤーフォックスで表示した場合のスクリーンショット(GIF画像)

ファイヤーフォックス 5で表示した場合、<h1>要素と<h2>要素はともに大きな太字で表示されているのが分かります。

リンクスで表示した場合
  • リンクスで表示した場合のスクリーンショット(GIF画像)

一方、リンクスで表示した場合、<h1>要素はセンタリングされ、<h2>要素も通常のテキストより左に寄せて表示されております。

このように同じHTML文書であっても、環境に依って様々な表示方法が適切に撰べる事がHTMLの利点の一つと言えるのです。

スタイルシート言語とCSS(カスケーディングスタイルシート)。

ウェブブラウザの表示デザインは各ブラウザに実装されたスタイルシートに依って行なわれます。

そこで、ウェブサイト制作者や閲覧者がこのスタイルシートを自由に定められる方法があれば、それを用いる事でウェブサイトのデザインが可能になります。

この、スタイルシートを自由に定めるためのコンピュータ言語がスタイルシート言語と呼ばれる言語であり、ウェブではそのうちの一つであるCSS(カスケーディングスタイルシート)と呼ばれる言語を用いてスタイルを設定します。

CSS(カスケーディングスタイルシート)の特徴。

CSS(カスケーディングスタイルシート)の機能を一言で言えば、どの要素にどんなスタイルを適用するかを指定する言語となります。

要素の指定(セレクタ)に対し、適用したいスタイルの属性(プロパティ)を与える事に依り、対応しているウェブブラウザは該当する要素に指定されたスタイルを当てられるようにすると言う訳です。

CSS(カスケーディングスタイルシート)で出来る事。

CSS(カスケーディングスタイルシート)を用いる事で、以下のような事が可能になります。

自由なスタイルの指定が可能になります。

CSSを使えば、ウェブ文書のデザインに関するいろいろな指定が自由に出来ます。

文字の色や背景を要素ごとに指定出来ます
文字の色や背景色を要素ごとに適切に指定する事が出来ます。

また、必要に応じて背景画像を与える事も出来ます。

文字あるいはテキストの表示スタイルを細かく指定出来ます
  • どのタイプのフォントを使うか
  • 直立体にするか斜体にするか
  • 文字の太さはどうするか
  • 文字の大きさはどうするか
  • 行の高さ、すなわち行間の幅はどのくらいにするか
  • 下線や字消し線などのテキストへの装飾はどうするか

などが要素ごとに決められます。

要素の余白や枠線を指定出来ます
各要素には枠線を付ける事が出来ます。

さらに、適切に余白を与える事も出来ます。

また、余白の値を調整する事で、要素の配置をある程度自由に変更する事も可能です。

要素の配置を指定出来ます
例えば、画像を左に寄せてテキストを廻り込ませたりするようなデザインも簡単に出来ます。

また、例えばメニューとなる要素をページの左側に固定したり、あるいは画面上に固定したりする事も可能です。

  • 但し、インターネットエクスプローラでは6.0まで画面上に固定する事は出来ませんでした。

つまり、文書のレイアウトが自由に出来るようになります。

CSSではこれらの事が、簡単な記述で出来るようになります。

スタイルの指定が非常に簡単に出来ます。

また、サイト全体で適用出来るスタイルの定義をスタイルシートファイルとして纏めておけば、幾つものHTML文書からリンクして利用する事が可能になります。

つまり、

  • 一度スタイルシートを決めておけば、後はリンクするだけでサイト内の全ての文書に統一的なスタイルが自動的に適用される
  • リニューアルなどでスタイルを変更する場合にも、HTML文書が何万本あろうともスタイルシートファイルのみを修正するだけで可能になる

と言うのが大きな特徴と言えます。

PCと携帯端末など、メディアごとに適切なスタイルが指定出来ます。

加えて、CSS(カスケーディングスタイルシート)では、例えばPC向けのスタイルシートと携帯電話向けのスタイルシートと言うように、対応メディアを指定してスタイルを当てる事も可能です。

現在、エヌ・ティ・ティ・ドコモのｉモードブラウザ 1.0 端末とウィルコムの一部旧型機を除く全ての携帯電話・PHSに実装されているモバイルブラウザでも、CSSが利用出来ます。

また、ニンテンドー・ウィー, ニンテンドーDSやプレイステーションシリーズ用のウェブブラウザもCSSに対応しております。

このため、これらのメディア毎に適切なレイアウトを指定しておく事で、どんな環境でも適切に読めるようになると言う訳です。

CSS非対応の環境でも適切に読めます。

CSS(カスケーディングスタイルシート)のもう一つの特徴としては、無くても文書の閲覧には困らないと言う事が挙げられます。

CSSは後発の技術ですので、旧式の環境では利用出来ない場合もあります。

  • もっとも、PC向けのウェブブラウザではもはやCSSに対応していないブラウザはリンクスくらいしか見なくなりました。リンクスは敢えてCSSに対応しないウェブブラウザと見る事も出来ます。
  • 携帯電話については、エヌ・ティ・ティ・ドコモのｉモードブラウザ 1.0 端末など非対応端末が残っておりますが、他社については各社とも対応が充分進んでおります。

しかし、CSSに対応していないウェブブラウザでも、マークアップに則った表示がされる筈であり、従ってCSSが無くても文書として利用する事は全く問題がない事となります。

CSS以外の方法でスタイルを決めてはいけないのか？

人に依っては

  1. わざわざHTMLと別にスタイルシート言語など覚えたりせず、文字の色など表示方法をHTMLのタグで直接書く方法があれば簡単ではないのか？

と言う方もいるかも知れません。

確かに、かつてはウェブ文書の表示方法を指定するために、文字の色や配置などを指定するHTMLのタグが多用されておりました。

しかし、これらの物理タグ・物理属性に依るスタイル指定の方法はCSSに較べると遙かに不便なものです。

サイト内の全てのHTML文書にいちいち書かなければならない
このため、記述漏れや記述ミスを誘発する事になります。

また、タグが増える分HTML文書が無駄に長くなってしまいます。

変更が容易でない
サイト内にある全てのHTML文書にいちいち書かなければ適用されないため、変更したいと思ったら全てのHTML文書を修正しなければなりません。

一本二本ならともかく、何百本何千本ものHTML文書があったらもうお手上げです。

また、ウェブで公開する以上、サーヴァに更新した文書を置かなければならないのですが、本数が多くなればそれだけ作業に時間が掛かってしまいます。

指定出来るスタイルは限られている
物理要素・物理属性で指定出来るスタイルはせいぜい
  • 文字の色・大きさ・書体と
  • 配置

くらいです。

  • 余白
  • 枠線の指定
  • 行の高さ(行間の幅)

の指定を出来るタグはありません。

メディアごとのスタイル分けが困難
HTMLに書かれてしまう以上、メディアごとに変更する事は出来ません。

その結果、PCでは見られても、他の環境では見るに堪えないウェブ文書と化してしまう事もあります。

例えば、あるフレーズを強調するのに文字の色やスタイルだけを指定する方法では、音声出力や点字出力ではその効果が出せず、強調されたと認識出来ないでしょう。

このように、物理タグ・物理属性を用いたデザインには問題点が非常に多いため、好ましくない方法と言えるのです。

CSSの方が簡単でしかも出来る事は遙かに多いので、やはり可能な限りCSSを用いてデザインしたいものです。

このコンテンツでは、CSSでウェブ文書のデザインを行う方法を一から解説して行きます。

CSSを使う上で注意したい事。

CSS(カスケーディングスタイルシート)を有効に利用するために、以下の点に注意するようにしてください。

正しいHTML文書を作成する。

CSS(カスケーディングスタイルシート)を使う使わないに拘らず守るべき事ですが、CSSを有効に使うためにも改めて強調しておきます。

CSSはどの要素にどのスタイルを与えるかを指定するものです。

HTMLの記述が出鱈目だと、ウェブブラウザは要素の解析を誤ってしまい、結果思いも拠らない表示になってしまう事も予想出来ます。

また、CSSの特徴はそれがなくても文書としては問題無く利用出来るものである事も挙げられます。

正しいマークアップで作成したHTML文書であれば、CSSが無くても問題は起こらない筈ですが、そうでなければCSSがないと問題が起こるかも知れません。

良いスタイルのためにも正しいHTML文書を作成しましょう。

CSSを当てにした文書作成はしない。

前項でも書きましたが、CSS(カスケーディングスタイルシート)の特徴はそれがなくても文書として問題なく利用出来るものです。

CSSがあれば正しく読めるが、CSSがないと読めなくなるなどと言ったマークアップでは、CSSがなくても読める文書とは言えません。

例えば、文書中で本文中の赤い文字と書いたとしても、CSSで赤い文字にした場合、CSSに対応していない環境では赤くはならないため、どの文字か分からなくなります。

  • CSSを使う使わないに拘らず、はじめに紹介したLynx(リンクス)など、そもそも色などのスタイルを表現出来ない環境がある事を忘れないでください。つまり、CSSを使わず HTML のタグで文字を赤くすれば良いと言う問題ではないのです。

文字の色に限らず、文字の大きさ, 背景, レイアウトなど表示に関しては、すべてのウェブブラウザで等しく実現出来る保証は一切ありません。

いずれにしても、これらのようなCSSでのスタイル操作を当てにした文書作成は絶対にしてはいけません。

  • スタイル操作を当てにした文書を作ってはいけない事も、実はCSSを使う使わないに拘らず守るべき事なのですが、改めて強調しておきました。

なるべく統一されたスタイルを作るようにする。

CSS(カスケーディングスタイルシート)で作成するスタイルシートはHTML文書とは別に用意する事に依り、複数のHTML文書から参照する事が可能になります。

このため、サイト内の全ての文書でなるべく同じスタイルを利用するように心掛けましょう。

そうしないと、わざわざ個別にスタイルシートを用意しなければならなくなり、CSSの長所が薄れてしまうからです。

補足。

補足・携帯電話向けサイトの場合。

現在、日本国内で利用出来る携帯電話に搭載されているモバイルブラウザについては、エヌ・ティ・ティ・ドコモのｉモードブラウザ 1.0 端末を除いた殆どの機種がCSSに対応しております。

  • エヌ・ティ・ティ・ドコモは平成21年 5月に発売開始となったｉモードブラウザ 2.0 端末で漸くCSS対応となりましたが、従来のｉモードブラウザ 1.0 端末はCSSには対応していません。
  • 逆にKDDI/沖縄セルラー, ソフトバンク及びイー・モバイルは全機種がCSS対応となっております。
  • ウィルコムは初期の端末で非対応のものがありますが、今日の製品でウェブサイトが見られるものは全てCSS対応です。

最も利用者数の多いエヌ・ティ・ティ・ドコモ端末の多くが未だにCSSに非対応とは言え、適切に作成されたHTML文書であればCSSの効果がなくても文書を適切に表示出来る筈です。

ただ、そう言う環境が今も多い事を考慮すると、「絶対にCSSでデザインしろ、物理タグは絶対に使うな」とまでは言えないのが実情です。

それでも、CSSを適切に使えば、CSSに対応している端末ではより多彩な表現が出来るので、やはり検討に値すべきと言えるでしょう。

HTML 5 について。

平成23年 7月現在、策定作業が進められている次世代の HTML である HTML 5 では、文字の色や配置などを指定する物理タグは、全て廃止されるか定義が変更される事になっております。

つまり、物理タグは HTML 5 の文書では使ってはいけないと言う事になります。

その一方で、HTML 5 に対応するウェブブラウザは、これら廃止されるタグも全て実装する事が求められております。

この措置は、HTML 5 でマークアップされた文書でも物理タグを使って良いと言う意味ではなく、ブラウザのメーカは物理タグを多用していた時代の HTML 文書も閲覧者が正しく読めるようにせよと言う意味です。

ですから、HTML 5 でサイトを作る人は、これらの物理タグを使ってはいけないのです。

  • もっとも、HTML 5 でこれらのタグを使っていてもエラーとしたりはしません。だからと言って、使ってはいけない事に変わりはないのです。