ＨＴＭＬタグ講座

[Home] [-5] [<] [>] [+5]

スタイルシート１　基礎編

表現方法を拡げる手段の一つ、スタイルシートの基本です。

【スタイルシート概説】

スタイルシートとは、ＨＴＭＬタグの中から見栄えを向上させる部分を切り離してできた別の表現方法で、ＨＴＭＬタグより多彩な指定もできます。
この項目までのいくつかのタグの説明時に「スタイルシートで代用します」等の記述がありました。ＨＴＭＬのタグで見栄えを向上させる部分は音声での閲覧などでの障害になるので、将来的には廃止予定となっています。廃止となるものはほとんどスタイルシートで代用できます。
ただし、すべてのブラウザでスタイルシートに対応しているわけではありません。Netscape Navigator 4.0 以降、Internet Explorer 3.0 以降で部分的に対応しはじめました。W3C（World Wide Web Consortium：WWW技術の標準化推進などをしている団体）が定義したスタイルシートに未対応のために、せっかくスタイルシートで表記しても見ている人のブラウザによっては作成者の意図通りに見てもらえないことがあります。
しかしそれを防ぐために、従来のＨＴＭＬタグとスタイルシートを併記していては、「見栄えを向上させる部分を切り離して障害の発生を減らす」という意図が無意味になってしまいます。ＨＴＭＬタグでもスタイルシートでも全く同じになる場合は、タグのみを用いた方が現状では良いでしょう。
このページではスタイルシートを網羅するのではなく、より多くのブラウザでほぼ正しく見てもらえるものに限ってご紹介します。そのため、一部足りない部分もありますが、ここで掲載されていないスタイルシートは古いブラウザでは対応しきれていないものだと解釈して下さい。
W3Cで定義されており、Netscape Navigator 4.0 以降、Internet Explorer 3.0 以降で対応しているものは無印です。Internet Explorer 3.0では対応していないものには ^[×IE3] と表示されます。それ以外のものは紹介しておりません。
また、スタイルシートもNetscape NavigatorとInternet Explorerでは解釈の異なる部分があるため、細かな見栄えが異なります。
スタイルシートにはCSS（Cascading Style Sheets）とJSS（JavaScript Style Sheets）の２種類がありますが、主流であるCSSについて説明します。

【スタイルシートの特長】

スタイルシートはＨＴＭＬのタグに比べて以下のような特長があります。
・さらなる見栄えの向上（タグではできなかった表現の追加、詳細な設定）
・色や長さの値の指定方法が多様化
・特定のタグの色や大きさなどを一括して指定可能でき、変更も１ヶ所だけで完了
・複数のタグも一括して指定可能。
・外部のスタイルシート（CSSファイル）などを読み込むことで、複数のページにまたがって一括指定・変更可能
・クラス（分類方法の１種）として指定しておけば、異なるタグでも一括指定が可能
スタイルシートは対応していないブラウザでは影響ないようにするため、指定する場合はコメント（）の中に記述します。

【スタイルシートの使い方】

スタイルシートの使い方は、スタイルシートを使う個所の量に応じて使い分けると良いでしょう。
２・３個所程度のごく（１）部分的に使う場合、（２）ページ全体を一括指定する場合、（３）複数ページにまたがって指定する場合で分けられます。
（１）部分的に使う場合は、文章の途中などインラインで指定する場合は

　<SPAN STYLE="プロパティ: 値; ">～</SPAN>　

段落などブロックで指定する場合は

　<DIV STYLE="プロパティ: 値; ">～</DIV>　

とします。
既存のタグはほとんど「STYLE」という属性が使えるので、

　<(タグ) STYLE="プロパティ: 値; ">～</(タグ)>　

として（タグ）の部分に任意のタグを使うこともできます。
例えば、ある段落の行間を1.5倍に拡げたい場合、「<P STYLE="line-height: 150%; ">（段落内の文章）</P>」とすると、その範囲に限って指定をすることができます。この段落もスタイルシートを指定して行間を拡げてあります。
※プロパティや値については次のページを参照して下さい
（２）ページ全体を一括指定する場合は<HEAD>～</HEAD>の中で指定しておきます。このとき、<STYLE>タグ内にコメントとして書きます。
特定のタグにまとめてスタイルシートの内容を反映させる場合は、本文中に何も指定しなくても一括して反映されます。部分的に反映させたい場合は、タグの属性として「CLASS="クラス名"」や「ID="ID名"」（１回限り）を使います。特にタグのない場合は「<SPAN CLASS="クラス">」や「<DIV CLASS="クラス">」を使います。
以下のサンプルのようになります。

<HTML><HEAD>
<STYLE TYPE="text/css"></STYLE></HEAD>
<BODY>
<A HREF="index.html">このリンク</a>には下線が付きません。<BR>
<I>斜体</I>の字は<I>赤色</I>の文字に<I>黄色</I>の背景が付きます。<BR>
<B CLASS="small">あるタグの一部</B>を<B>変更</B>したり、<SPAN CLASS="small">不特定の部分</SPAN>を変更することも可能です。

↓見た目はこのようになります

このリンクには下線が付きません。
斜体の字は赤色の文字に黄色の背景が付きます。
あるタグの一部を変更したり、不特定の部分を変更することも可能です。

<STYLE TYPE="text/css"> ～ </STYLE>

　（タグ）（.クラス名）{ プロパティ: 値; }　

　（タグ）（.クラス名）{ プロパティ: 値; プロパティ: 値; ... }　

　SUP SUB { プロパティ: 値; }　

　A,B { プロパティ: 値; }　

　（タグ）#ID名 { プロパティ: 値; }　

（３）複数ページにまたがって指定する場合はhtmlファイルの変わりに、cssファイルを用意します。このファイルは通常のテキストファイルと同じですのでWindowsのメモ帳やMacintoshのSimpleTextで作成できます。一般的には拡張子を「～.css」とします。
このファイルの中に、

　（タグ）（.クラス名）{ プロパティ: 値; }　

を必要な分だけ書いておきます。<STYLE TYPE="text/css">  </STYLE> は不要です。
上記サンプルでは太字の部分だけを書いておきます。
ここで定義したスタイルシートをhtmlファイルに呼び出して利用するには

　<LINK REL="styleseet" TYPE="text/css" HREF="～.css">　

のように<HEAD>～</HEAD>内で<LINK>タグを用います。
以下のように「@import」を用いる方法もありますが、Internet Explorer3.0 やNetscape Navigator4.0では使えないようです。
　<STYLE TYPE="text/css">  </STYLE>