ウェブサイト製作総合支援サイト：たこやき ～Openソース～
←トップページに戻る ←目次に戻る

スタイルシートの書き方入門 (作成中)

HTMLとスタイルシートの関係

HTMLとスタイルシートの関係は、文書の構造を明示するのがHTMLの役目で、その明示した物をどの様に表現するかを決めるのがスタイルシートの役割です。

HTMLで用意されているタグの殆どのものは、どのような形で表現するかを決められておりません。したがってブラウザによりその表現方法の違うタグも存在します。(文字サイズや行間に違いが有るのは周知の事実だと思いますし、Lynxではh1タグをセンタリングします。)

このタグの見え方を決める為の物がスタイルシートです。

一般的に使用されているスタイルシートはW3Cの規定したCascading Style Sheets(CSS)のlevel 1 及びlevel 2 のサブセットです。(現在level 3 を審議中)

CSS2の主な特徴は出力メディア毎に設定できるようになった事と、音声メディアへの対応規格が盛り込まれた事です。(詳しく読んでないのではっきりした事は言えませんが、CSS3に至っては、PDAや携帯電話と言った、もっと細かなメディアへの対応ができるようです。)

ちと蛇足：

CSSに関しては、規格はすばらしいものだと思うのですが、ソフトの対応状況に問題が残るわけですね。

Internet Explorer 6はどうか知りませんが、他のブラウザは完全に対応しているとはとてもいいがたいのが現状です。

ここでは、基本的な設定項目しか扱いませんので、新しいブラウザだと問題ないとおもいます。(Netscape6以降、Internet Explorer5.5以降、Opera6以降が対象となります。)

スタイルシートの書き方

最も基本になる書き方

基本的な構文は次のようになります。

Selector（セレクタ）{ Property（属性）: Value（値）}

セレクタ(Selector)とは、属性と値が適用される範囲を指示する働きをし、HTML用のCSSではタグの要素名などを書きます。

属性(Property)とは、CSSによって定義できる項目です。

値(Value)とは、CSSによって定義できる項目をどのように変化するかを決めるための物です。
注：値が<length>又は<percentage>を取る場合で０以外の数値を指定する場合は必ず単位を付ける必要があります。CSSの規定書では、単位がない場合はその属性自体を無視するように指示してあります。(無視しないブラウザもあるので確認時には要注意です。)

属性と値の間は:(コロン)で区切ります。また、複数の属性を定義する場合は;(セミコロン)を使用して区切ります。

複数の値を取る属性の場合、値の区切りには半角スペースを使用します。

/*スタイルシートのサンプル*/
/*bodyタグの背景色と文字色を設定*/

body{
background-color:#ffffff;
color:#000000;
}
/*h1タグの文字色を濃い青、文字サイズを2倍にして
センタリングする指定方法*/
h1{
color:#000090;
font-size:2em;
text-align:center;
}

スタイルシート内のコメントの付け方

HTML内ではコメントは<!--と-->の間に記載しますが、スタイルシート内では/*と*/の間に記載します。

スタイルシートを使用するに当たって必要なHTMLの設定

<head>～</head>間にスタイルシートを使用する事を記載する必要が有ります。

<meta http-equiv="Content-Style-Type" content="text/css">と言うmeta要素のタグを<head>～</head>間に記載します。

スタイルシートを記述する場所

次の3箇所にスタイルシートは記載する事ができます。

1の方法:外部ファイルに記載する。

一般的にサイト全体に使用するスタイルに付いて使用します。外部ファイル(ファイル形式はテキストで拡張子は.cssが一般的です。)に記載し、HTMLのヘッダー部分に
<link rel="stylesheet" href="ファイル名" type="text/css" charset="Shift_JIS">
と書いてWWWブラウザがスタイルシートを読み込めるようにします。スタイルシートのサンプル(このページに適用しているスタイルシートです)

書き方は、最初に@charset "(使用する文字コード)";を入れ、後は前述のサンプルのようなスタイルを列記していくだけです。

たとえば、背景色が淡い水色で、文字色が濃い青、行間が1.5emと言ったスタイルを、standerd.cssと言うShift_JISで書かれたファイル形式で作成する場合、次のようなファイルの内容になります。

@charset "Shift_JIS";
body{
background-color:#f0ffff;
color:#000090;
line-height:1.5em;
}
エスケープコードと@charset規則

CSSでは\をエスケープコードの開始文字として使用しています。

エスケープ処理についてはここで特にふれませんが、\に続く文字によって特殊な挙動を行うと言うことだけを覚えておいてください。
また、Shift_JISの中には２バイト目に\と同じコードを持つ文字が存在しており、この２バイト目のコードをエスケープ文字と勘違いして挙動がおかしくなる事があります。

(たとえば/*予定表*/と言ったコメント文がコメントとして認識されないと言った不具合)

@charset規則でShift_JISで有ることを宣言しておけば、これらの挙動を回避できるのではないでしょうか？

ちなみに、Shift-JISにおいて2byt目が\と同じコード(0x5c)になっている文字は次の通りです。
表 予 ソ 十 ― 暴 構 能 貼 申 噂 饅 兔 砡 欺 圭 蚕 曾 箪 禄
浬 喀 媾 彌 拿 杤 歃 濬 畚 秉 綵 臀 藹 觸 軆 鐔 鷭 偆 Ы Ⅸ

2の方法:HTMLのヘッダー部に記載する。

そのページのみにスタイルを適用したい時に使用します。
書き方は、HTMLの<head>～</head>間にstyleタグを使用し、次のような形で記載します。
この際の注意事項は、スタイルシートに対応していないブラウザで見た時に、スタイルシートの内容が見えるのを防ぐために、スタイルシートの中身はコメント文として記載します。

<head>
<!--(色々な設定)-->
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body{
background-color:#ffffff;
color:#000000;
}
-->
</style>
</head>

3の方法:タグの中に埋め込む。

タグの内部にstyle属性として記載します。
この方法はその場所だけにスタイルを適用したい時に使用し、次のように書きます。

emタグで囲まれた部分の文字を赤くするサンプル。
<em style="color:#ff0000;">ここの文字が赤くなります</em>

ボックスに関する説明

HTMLではタグに囲まれた範囲を一つの区切りとして考え、その部分を一つの枠(ボックス)として見ることができます。

マージン(margin)、ボーダー(border)、パディング(padding)の説明。
ボックスの外側に対する余白をマージン(margin)、内側に対する余白をパディング(padding)、ボックスの枠をボーダー(border)と呼びそれぞれ次のような位置関係になります。

    _______________________________________
   |                                       |
   |           margin                      |(外余白)
   |   _________________________________   |
   |  |                                 |  |
   |  |        border                   |  |(枠)
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |     padding               |  |  |(内余白)
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |  content            |  |  |  |(内容)
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|
            |<-    中身の横幅    ->|
   |<-             box の横幅            ->|
(REC-CSS1-961217 より抜粋)

CSSではマージン、ボーダー、パディングをそれぞれ上下左右別々に指定することが可能です。

Netscape4.xはスタイルシートに不完全な対応を行っているために指定値が通りに表示されない事があります。
CSSの規定書にはheight(高さ)やwidth(幅)の値はpaddingの内側から取るように指示されていますが、Internet Explorer では、その値をborderの外側から計算します。
(Internet Explorer 6 の標準互換モードはCSSの規定書に準じています。)

メディアタイプ(CSS2)

CSS Level2ではメディアによってスタイルを分ける事を推奨しています。

メディアタイプの指定方法

メディアタイプの指定方法は、以下のように書きます。

@media (メディアの式別名){
(ここにスタイルを記載)
}
/* ディスプレイとプリンターに対応したメディア指定 */
@media print,screen{
(ここにスタイルを記載)
}
/* プリンターのみに対応したメディア指定 */
@media print{
(ここにスタイルを記載)
}

適用メディアの分類

@media規則

Netscape 4.x や Intrnet Explorer 4 等の古いWWWブラウザは、メディア識別の対応が不完全です。

Netscape 4.xではscreenしか認識しません。Mac版のInternet Explorer ５も@media規則を認識しないそうです。

したがって、
@media print,screen{
(ここにスタイルを記載)
}
とすることにより@media規則に対応していないブラウザで認識しないスタイルシートを書くことが可能です。

指定できる項目と指定方法

各項目が取り得る詳しい値は、[スタイル 属性 リファレンス]と[スタイルシートで使用する値の説明]を参照して下さい。

背景

背景には色と画像を指定できます。

背景色の指定(background-color:)

背景色を変更したい時は、 background-color:色の値; で背景の色を指定できます。

たとえばbodyタグの背景色を水色にする場合は次のように設定します。

body{background-color:#c0ffff;}

この指定は全てのタグに使用できます。

色の値の指定方法は、スタイルシートで使用する値の色の項目をお読みください。

背景画像の指定(background-image:)

背景に画像を使用したい時は、 background-image:url("画像のurl"); で背景に画像を使用する事ができます。ただこの指定のみを行なった場合は、上下左右に同じ画像が繰り返し表示されます。

また、背景画像の繰り返しを制限したい時は、 background-repeat:で繰り返し方向を制限し、画面スクロール時に固定したい時は、 background-attachment:fixed;で画像を固定できます。

また、背景画像の位置を指定したい時は、background-position:位置;で指定します。

背景に関する一括指定(background:)

background:を使用すると背景に関する設定を一括で指定できます。

書き方は、background: 色 URL 繰り返し 固定 位置;となります。

たとえば、背景色を水色にし、back.pngと言う画像を左右方向にのみ繰り返すような背景を使用したい時は次のように書きます。

body{background:#c0ffff url("back.png") repeat-x;}

また、背景色を黄色にし、back.pngと言う画像を画面真中に固定したい時は次のように書きます。

body{background:#ffffc0 url("back.png") no-repeat fixed center center;}
背景を指定できるタグ

ここではサンプルとしてbodyタグのみを扱いましたが、すべての要素のタグに指定できます。
ただし、インライン要素に画像を指定した場合、画像を表示しないブラウザもあるので注意してください。

文字

文字の大きさ、太さ、色等を指定できます。

文字色の指定(color:)

タグに囲まれている部分の文字色を変更したい時は、 color:(色の値);で文字の色を指定します。

たとえば、strongタグで囲まれた部分の文字を赤色にするには、次のように書きます。

strong{color:#ff0000;}

文字の大きさの指定(font-size:)

タグで囲まれている部分の文字の大きさを変更したい場合は、font-size:(大きさ);で文字の大きさを指定します。

文字の大きさは、<length>(em, ex, px, in, cm, mm, pt, pc)又は<percentage>(%)で指定します。

たとえば、h1タグで囲まれた部分の文字サイズを４倍角で表示する場合は次のように書きます。

h1{font-size:2em} 又は h1{font-size:200%}
Copyright© All rights "ZABAN-SANGYO" reserved 2002.
全ての画像、及び文章の無断使用を禁じます。お問い合わせは座板産業まで。
このページの作成は「諸冨」です。