CSS(カスケーディングスタイルシート)の書き方使い方。

まず初めに、CSS(カスケーディングスタイルシート)の書き方と使い方を説明して行きましょう。

CSS でのスタイルを HTML 文書に適用するための考え方。

まず初めに、CSS(カスケーディングスタイルシート)を利用する際の考え方を簡単に書いておきましょう。

基本的には

  1. CSS でスタイル定義ファイルを書く
  2. それを HTML 文書からリンクする

この二つとなります。

一度スタイル定義ファイルを書いておけば、後から HTML 文書が幾ら増えても、当該 HTML 文書に用意してあるスタイル定義ファイルへリンクするようにしておけば、予め用意したスタイル定義が自動的に適用される事となります。

また、スタイルの変更をしたい時は、用意したスタイル定義ファイルだけを修正するだけで、即座にそれをリンクしている全ての HTML文書 にスタイルの変更が行き渡る事となります。

スタイル定義ファイルを作成するには。

スタイル定義ファイルも HTML 文書同様、普通のテキストエディタで書く事が出来ます。

CSS(カスケーディングスタイルシート)でのスタイル定義ファイルはRFC 第2,318号に依れば拡張子に .css を付ける事とされております。

  • HTML 文書と違い、公的な文書で拡張子が明確に定められております。
  • ファイヤーフォックスではサーヴァで指定された拡張子(当然多くの場合 .css)で配信しないとスタイル定義ファイルとして認識されないようになっております。

尚、ファイル名にはHTML文書同様、

  • 半角の英数字
  • 半角のハイフン -
  • 半角のアンダスコア _
  • 半角のドット .
  • 半角のティルダ ~

のみを使うようにしましょう。

また、スタイル定義ファイルは、ウェブ上にないとアクセス出来ないので、

  • HTML 文書を収めているディレクトリ(フォルダ)内に専用のディレクトリを作ってそこに入れる
  • HTML 文書を収めているディレクトリ(フォルダ)内に直接入れる

などとする事になります。

  • 制作者は管理し易くするため、前者の専用ディレクトリ(フォルダ)に入れる方法をお勧めしております。

本文書では、HTML文書を収めたディレクトリ内に、style と言うサブディレクトリ(サブフォルダ)を作って、そこに style.css と言うファイル名で置く事と仮定します。

以下、参考までにその他の適切なファイル名の例と適切でないファイル名の例をに挙げておきます。

スタイル定義ファイルのファイル名の一例
  • Style.css
  • css.css
  • pc-style.css … PC向けスタイルと携帯電話向けスタイルを分ける場合などはこのようにファイル名にメディア名を記述する事も考えられます。
ファイル名として適さない例
  • Style.style … CSS の拡張子は .css と指定されているので、特に変更しなければならない場合を除いて他の拡張子を用いない方が安全です。
  • スタイル.css … 日本語の文字を用いたファイル名は、ウェブブラウザが正しく読み込めなかったり、サーヴァに置く事さえ出来ない場合があります。

CSSでのスタイル定義ファイルの書式。

CSS(カスケーディングスタイルシート)でスタイル定義ファイルを作成する場合、以下のような書式になります。

@charset "文字コードのエンコーディング名";

/* スタイル定義 1 */
セレクタ 1 {
    プロパティ名 1: プロパティ値 1;
    プロパティ名 2: プロパティ値 2;
    …
    }

/* スタイル定義 2 */
セレクタ 2 {
    プロパティ名 1: プロパティ値 1;
    プロパティ名 2: プロパティ値 2;
    …
    }

…

ここで、

を意味します。

スタイル定義の記述には原則として半角文字を使います。

記号, セレクタ, プロパティ名, 及びプロパティ値に全角文字を用いると認識されなくなってしまいますので注意してください。

  • 特に半角空白を間違えて全角空白にしてしまうとエラーですので注意してください。
  • 改行及び字下げは CSS の文法としては特に意味はありませんが、見易くするために行っております。
  • プロパティは複数個指定する事が多いのですが、複数指定する場合は各プロパティ指定の直後の ; を区切り符号として入れる必要があります(一番最後のプロパティでは省略出来ます)。
  • /* と */ で挟まれたテキストは注釈です。必要に応じて記述すると良いでしょう。

CSS での文字コードのエンコーディング名指定。

CSS(カスケーディングスタイルシート)でのスタイル定義ファイルでは、冒頭の@charset 規則で記述に用いている文字コードのエンコーディングを指定出来ます。

@charset 規則の書式は以下のようになります。

@charset "エンコーディング名";

例えば、今回作成するスタイル定義ファイルがシフトJISコードで書かれたものであれば、その一行目は以下のようになります。

@charset "shift_jis";

尚、@charset 規則は、全てのスタイル定義の前に書かなければなりません。

つまり、@charset 規則はスタイル定義ファイルの冒頭に書く事となります。

スタイル定義ファイルをHTML文書に適用するには。

実際のスタイル定義ファイルの作成は次の記事以降で解説して行きます。

本記事ではその前に実際に作ったスタイル定義ファイルを HTML 文書に適用するための方法を解説します。

HTML 5 の場合の準備。

先ず、適用する HTML 文書が HTML 5 である場合は、以下のようにします。

  • HTML 5 以外の言語(例えば XHTML 1.0)で書かれた HTML 文書に対しては、この準備は不要ですが、行なっていたとしても何のトラブルにもならない筈です。

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

インターネットエクスプローラでは、ある手続きをしておかないと、HTML 5 で新たに導入される予定の要素は全て無効にされ、スタイルの適用が出来なくなります。

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

このため、以下のような作業を行なっておきます。

  1. インターネットエクスプローラ対策スクリプトの作成 - 先ず、テキストエディタで以下のインターネットエクスプローラ対策スクリプトを作成します。
    • スクリプトとは、スクリプト言語と呼ばれる簡単なプログラミング言語で書いたプログラムの事です。PC向けの多くのウェブブラウザでは、JAVAスクリプトと呼ばれる簡単なプログラミング言語が使えるようになっており、ここでもこれを利用する事となります。

    尚、以下はプログラムですので、誤字が一箇所でもあるとエラーとなって動作しなくなる事があります。このため、間違いを避ける意味でも、可能なら以下からコピー・ペーストする事をお勧めします。

    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 とします。

    ここまでの作業は、サイト開設時の一回だけで良いでしょう。

    以後は、今回作成したファイルを使い廻して行く事になります。

  3. インターネットエクスプローラ対策スクリプトの HTML 文書への埋め込み - 実際にスタイル定義ファイルを適用したい HTML 文書の<head>要素内に、以下の一行を記述します。 
    <!--[if IE]><script type="text/javascript" src="作ったファイルへのURL"></script><![endif]-->

    ここで、作ったファイルへのURLとは、実際にウェブ上に置いた際のURLとなりますが、例えば HTML 文書を収めているディレクトリ上に作ったサブディレクトリ・style 内に作ったファイルを置いている場合は、以下のような相対URLで記述出来ます。

    <!--[if IE]><script type="text/javascript" src="style/forIE.js"></script><![endif]-->

    尚、この作業は、HTML文書を作成する度に行ないます。

これらの手続きについて、詳しくお知りになりたい方は別文書・インターネットエクスプローラ対策の詳細に纏めておりますので、そちらをご覧ください。

使用するスタイル定義ファイルのリンク。

スタイル定義ファイルは HTML 文書からリンクされなければ意味はありません。

HTML では、文書から他の文書類をリンクするために、<link>要素が用意されております。

<link>要素は文書全体と他の文書類の関係を表す要素であり、文書そのものを構成する要素ではなく、文書に関する情報(メタ情報)の要素です。

このため、<link>要素はHTML 文書内の<head>要素(HTML文書内のメタ情報部分)内に記述される要素となります。

スタイル定義ファイルをリンクする場合の<link>要素の書式は以下のようになります。

<link rel="stylesheet" type="text/css" media="メディア名" href="スタイル定義ファイルへのURL" />

ここで、<link>要素の属性は以下のようになります。

rel="stylesheet"属性
スタイルシート(スタイル定義ファイル)へのリンクである事を明示します。
type="text/css"属性
リンク先がCSSに依るスタイルシートである事を明示します。
media 属性
media 属性はどのメディアでリンクされるスタイル定義ファイルかを明示します。
  • PC向けのスタイル定義ファイルなら、media="screen, projection"属性を
  • 携帯端末向けのスタイル定義ファイルなら、media="handheld, tty"属性を
  • 全てのメディア向けのスタイル定義ファイルなら、media="all"属性を

それぞれ指定します。

  • media属性を省略した場合も、全てのメディアが対象となります。しかし、ある理由から必ず指定するようにしてください。

尚、media 属性についての詳細はHTML 5 リファレンス内の media 属性に関する記事をご覧ください。

href　属性
<a>要素のhref　属性同様、リンク先を明示します。

例えば、HTML文書があるディレクトリに設置したサブディレクトリ・style 内にある style.css と言うPC向けのスタイル定義ファイルへリンクする場合には、以下のように記述する事になります。

<link rel="stylesheet" type="text/css" media="screen, projection" href="style/style.css" />

また、上記の PC 向けスタイルと別に、同サブディレクトリ・style 内にある携帯電話向けのスタイル style-mobi.css もリンクしたい場合は、以下のように二行記述する事となります。

<link rel="stylesheet" type="text/css" media="screen, projection" href="style/style.css" />
<link rel="stylesheet" type="text/css" media="handheld. tty" href="style/style-mobi.css" />
  • 尚、複数のスタイルシートをリンクする事も可能ですが、その場合はリンクしたい全てのスタイル定義ファイルに対する<link>要素を一行ずつ記述して行く事となります。

この記述は、HTML文書を作成する度に必要になりますので、予めテンプレートとして作成しておくと良いでしょう。

スタイル定義ファイルをリンクする<link>要素で必ず media 属性を書くべき理由。

旧いブラウザの中には、CSS の実装に大きな問題を抱えているものがあります。

具体的に言えば、ネットスケープ・コミュニケータ 4.x(通称・ネットスケープ 4.x)と呼ばれるブラウザが問題になりました。

  • ネットスケープは今日では既に聞かれなくなった名前ですが、ファイヤーフォックスの祖先と言えるブラウザでした。

勿論、今日ではネットスケープと言う名前すらご存知ない方もいるであろうほど旧式のブラウザとなってしまい、今では利用している方は殆どいないと思われますが、万が一の事を考えてネットスケープ 4.xでは CSS がリンクされないようにする事をお勧めします。

ネットスケープ 4.xでは、media 属性に screen 以外の値が含まれている<link>要素を無視しますので、上記のようにPC向けのスタイルであれば media="screen, projection" とする事でネットスケープ 4.xでのCSS適用を避ける事が出来ます。

また、全てのメディアに適用出来るスタイルの場合には、media="all" を指定するようにしましょう。

まとめ。

ウェブサイトでCSS(カスケーディングスタイルシート)でのスタイル定義ファイルを適用する場合、以下の記述を常に行っておく事となります。

この記述は当該スタイル定義ファイルを利用する場合に必要ですので、予め HTML 文書のテンプレートとして用意しておくと良いでしょう。

  • 以下、シフト JIS コードでエンコードした日本語文書を HTML 5 でマークアップしているものとします。エンコードや文書型を変える場合は、適宜変更してください。
  • また、

    とします。

    • HTML 文書の設置ディレクトリを変更したり、
    • 或いはスタイル定義ファイル及びインターネットエクスプローラ対策スクリプトを異なったファイル名にしたり、異なったディレクトリに置きたい場合

    は、適宜変更してください。

  • その他、変更・追加しておきたい箇所がございましたら、ご自由に変更してください。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="shift_jis" />
        <title>(ここに題名が入ります)</title>
        <!--[if IE]><script type="text/javascript" src="style/forIE.js"></script><![endif]-->
        <link rel="stylesheet" type="text/css" media="screen, projection" href="style/style.css" />
        </head>

    <body>
        (ここに本文が入ります)
        </body>
    </html>

補足・HTML 5 以前で推奨されていたスタイルシート言語の指定について。

HTML 5 より前の世代の HTML (XHTML 1.0 など)では、スタイルシート言語について特に何の仮定もしないと言うことになっておりました。

このため、HTML 文書内で、使用するスタイルシート言語を指定する事が推奨されておりました。

具体的には、<head>要素内に、以下のような<meta>要素を記述します。

<meta http-equiv="content-style-type" content="text/css" />

ですが、この記述に依るスタイルシート言語の指定は HTML 5 では出来ない事となりました。

HTML 5 では、スタイルシート言語は常に CSS であると仮定しているからです。

  • 実際、現在の HTML 文書に対しては、CSS 以外のスタイルシート言語は全く使われておりません。

このため、スタイルシート言語の指定は、HTML 5 では行なう事はないとされました。