６．スタイルシートを使う

　ＷｅｂページはＨＴＭＬ(HyperText Markup Languege)を使って記述しますが、ＨＴＭＬ４．０／４．０１では表示方法やレイアウトなど表現に関するタグを廃止する方針が示されています。例えば、色やフォントサイズの指定、レイアウトのためのテーブルの利用などがそれにあたります。これらについてはスタイルシートの利用が推奨されています。

　また、ホームページを苦心して作っても、見る人のブラウザの設定によっては文字のレイアウトが意図したとうりには表示されません。また、行間隔が狭いので文字ばかりのページは目が疲れます。
　こんな悩みを解決してくれるのもスタイルシートです。しかしスタイルシートへの対応がブラウザ毎に違うのでスタイルシートを過信するのも禁物です。


 ６．１スタイルシートの基礎
　６．１．１ スタイルの基本記述形式
　６．１．２ スタイル指定を適用する方法
　６．１．３ PROPERTYとVALUE
　６．１．４ CLASSを使う
６．２スタイルシートの応用
　６．２．１ 背景色と文字色を指定する
　６．２．２ 文章の位置を指定する
　６．２．３ 行間隔を広くする
　６．２．４ テーブルの中の文字を小さくする
　６．２．５ 左側に余白を入れる
　６．２．６ 文字の大きさを固定する
　

６．１ スタイルシートの基礎

６．１．１ スタイルの基本記述形式

スタイルを指定するには、次の様に記述します。
PROPERTY:VALUE
PROPERTYは定義するもので、VALUEはそれに対する値です。複数指定する場合は；（半角のセミコロン）で区切ります。

［例］
font-size:20pt;color:green　フォントサイズ２０ポイント、色は緑

[ページのトップへ]

６．１．２ スタイル指定を適用する方法

スタイル指定を適用するのに次の４つの方法があります。
  1. スタイル指定したものを一つのファイルにまとめておき、そのファイル名（ＵＲＬ）を指定することでページ全体に適用させる。
  2. ヘッダー情報（<HEAD>）としてスタイル情報を記述し、そのページ全体に適用させる。
  3. ＨＴＭＬタグを拡張させる形で指定し、そのタグの範囲にのみ適用させる。
  4. <SPAN>タグや<DIV>タグでスタイル情報を記述し、タグ内の一部に適用させる。
これらは重複して使うことができますが、最後に読み込まれたものが有効です。すなわちホームページ全体に適用したいスタイル指定は一つのファイルにまとめてａ．を使い、あるページだけに適用したい場合はｂ．を使い、ページの一部だけに適用するものはｃ．やｄ．を使うということです。

それでは次にそれぞれの指定方法について述べます。

　ａ．一つのファイルにまとめる場合

各タグに対してスタイル指定したのもを一つのファイルにまとめます。このファイルの拡張子は.cssとします。.cssファイルには次のように記述します。 <HEAD>〜</HEAD>間に次の様に記述してスタイル指定したファイルを読み込ませます。

　ｂ．ヘッダー情報としてスタイル情報を記述する場合

ヘッダー情報として<STYLE>〜</STYLE>の間にタグ名と指定するPROPERTY:VALUEを記述します。 同じスタイルを複数のタグに適用する場合は、
タグ名1,タグ名2,タグ名3{PROPERTY:VALUE;……}と記述します。 <!--　-->は無くても動作しますが、スタイルシートに対応していないブラウザではスタイルの記述内容がそのまま見えてしまうのでこれを記述して見えなくします。

　ｃ．ＨＴＭＬタグを拡張させる場合

ページの一部だけに適用する場合は、そのタグに次の様に記述します。ページ全体の指定と異なる指定をしたい時にも使えます。

　ｄ．<SPAN>タグや<DIV>タグを使う場合

<SPAN>タグや<DIV>タグを使うとタグ内の一部にスタイルを適用することができます。
[ページのトップへ]

６．１．３ PROPERTYとVALUE

PROPERTYとVALUEで、使って便利なものを紹介します。

　ａ．フォントの大きさ、太さ、形状を指定

{font-size:★｝　★=数値+単位、または=xx-small,x-small,small,medium,large,x-large,xx-large
{font-weight:☆}　☆=extra-light,light,demi-light,medium,demi-bold,bold,extra-bold
{font-style:◆}　◆=nomal,italic
単位：px=ピクセル、pt=ポイント、in=インチ、cm=センチ、％（デフォルトに対する）

　ｂ．テキストの行間を指定する

{line-height:★}　★=行送りの数値+単位（単位は上に同じ）

　ｃ．フォントに関するスタイルをまとめる

フォントに関してはサイズ、種類、太さ、形状などありますがPROPATYをfontでまとめて、VALUE部のみをつなげるだけで指定できます。
{font:font-weight font-size/line-height font-style}

　ｄ．表示位置をマージン指定する

{margin-top:★}　上部余白
{margin-left:★}　左側余白
{margin-bottom:★}　下部余白
{margin-right:★}　右側余白
　　　　★=数値+単位（px、pt、in、cm、％）

　ｅ．テキスト等の色指定

{color:★}　★=#RRGGBBまたは色の名前（red、greenなど）

　ｆ．テキスト等の位置指定

{text-align:★}　★=left、center、right
[ページのトップへ]

６．１．４ CLASSやIDを使う

CLASSやIDを使うと、異なる種類のタグで同じ指定をしたり、同じ種類のタグで異なる指定をしたりすることができます。

CLASSは異なる種類のタグで同じ指定をする場合で、次の様に指定します。 適用するタグに次のように記述します。 IDは同じ種類のタグで異なる指定をする場合で、次の様に指定します。 適用するタグに次のように記述します。 具体例を示します。
[ページのトップへ]

６．２ スタイルシートの応用

６．２．１ 背景色と文字色を指定する

背景色や文字色はBODYタグの属性で指定できますが、廃止予定ですのでスタイルシートで次のように指定します。 色１：ページの背景色
色２：文字色
色３：まだ見ていないページへのリンク部分の色
色４：リンク部分を選択した瞬間の色
色５：既に見たページへのリンク部分の色
（色３〜色５は指定しなければ、見る人のブラウザの設定によります。）
[ページのトップへ]

６．２．２ 文章の位置を指定する

左寄せ、中央揃え、右寄せは次のように指定します。（例は中央揃え）
[ページのトップへ]

６．２．３ 行間隔を広くする

文章主体のページでは、行間隔を広くすると読みやすくなります。行間隔を広くするにはBODYタグのスタイルを次のように設定します。 150%の数値を変えれば行間隔が変わります。
この場合は、テーブルの中までは適用されないので、テーブルの中も行間隔を広げるにはSTYLE部に次の指定も追加します。
[ページのトップへ]

６．２．４ テーブルの中の文字を小さくする

テーブルの中の文字を全て小さい文字にしたい時、<TD>毎にFONT SIZEを指定しないといけませんが、スタイルを使うと簡単です。 85%の数値を変えると、文字の大きさが変わります。
[ページのトップへ]

６．２．５ 左側に余白を入れる

節・章・項、本文などに応じて左側の余白の幅を変えると、見やすいページになります。 12ptなどの数値を変えれば、余白の広さが変わります。
[ページのトップへ]

６．２．６ 文字の大きさを固定する

写真やイラストが主体のページの場合は文字の大きさにもこだわりますね。せっかくバランスのとれた文字にしても、見る人のブラウザの設定によってはバランスが崩れてしまいます。そんな時次のように設定しましょう。 12pxなどの数値を変えれば文字の大きさや行間隔が変わります。
大きさの単位にはpx（ピクセル）を使っていますが、他の単位（pt,cm,in）を使うとネットスケープではブラウザの設定で変わってしまいます。

しかし、文字を大きくして見たい人にとっては大変迷惑な機能ですので、使い方には十分注意しましょう。

（このページではスタイルシートを使って、行間隔や左側余白の設定をしていますが、文字の大きさは固定していません。）

[ページのトップへ]
　
左の目次の各欄をクリックすれば別のページが表示されます。
フレーム表示されていない場合はここをクリックして下さい。