ホーム 頭の体操 お役立ちソフト 視 角 ザ・掲示板 リンク




スタイルシートの基本



今回もページ自体にスタイルシートを用いています。IE 4.0 以上で見ると綺麗に見えますが、NC 4.0x や IE 3.0x でもある程度は見ることが出来るんじゃないかと思います。 しかしそれ以外のブラウザ・バージョン(例えば NN 3.0)だと、全くスタイルの崩れた悲惨な見え方になっているはずです。これは、スタイルの定義にタグを使っていないからです。

ソースを見てもらうとわかりますが、ページのヘッダー部分に <STYLE TYPE="text/CSS">〜</STYLE> というタグがあり、その中でスタイルの設計をずらりと書いています。 こういう形式を Embedding Style Sheet といい、ページ単位でスタイルの設計を丸ごと規定したいとき、特に、ページの中に属性を共有するタグが何カ所もあるときに便利です。

例えば、文の見出しを赤い字で表し、本文中のある語も赤い字で表したいとき、ヘッダー部分で .aka {color:red } のようにクラス定義しておき、タグの中でそれぞれ <H1 class="aka">、<SPAN class="aka"> のように規定すれば、赤い色という属性を共用することが出来るのです。 <FONT color="red"> を何度も使うよりスマートですよね。<SPAN> は文中の特定の語句(文字列)を定義したいときに使う新しいタグです。

同じことをヘッダー部分ではなく、タグの中で直接決めたいときには、<H1 style="color:red">、<SPAN style="color:red"> のように表します。 こういうやり方を Inline Style Sheet といい、同じ属性を共用するタグがたくさんないとき、スタイルシートを小出しに使いたいときに向いています。

もし同じスタイルを使うページがたくさんあるときには、あらかじめスタイルの設計図を作っておいて、これを各ページで共用する方が便利です。 スタイルを規定したファイルを .css という拡張子を持つファイル名にし、これを共用するHTMLのヘッダー部に <LINK REL="stylesheet" HREF="(ファイル名).css" TYPE="text/css"> と定義してリンクします。 これを Linking Style Sheet といいます。スタイルシートをフルに使う場合にはこのやり方が主流になるでしょう。

これら3つのどれか1つを選択しなければいけないということはなく、3つを共用することもできます。もし1つのページが3つすべてを使用している場合、Linking Style よりも Embedding Style の、Embedding Style よりも Inline Style の定義が優先されるので、機に応じた柔軟な Web 構築が出来ると言えるでしょう。

スタイルシートで、というかHTML4.0 で可能となった大きな特徴の1つは、タグにIDを付けることが出来るようになったことです。例えば <P id="1"> のように指定します。このIDは Embedding Style に於るクラスのように、ヘッダーで定義した属性をタグが継承するときに使われるほか、従来 <A NAME="・・・"> で指定したアンカーのリンク先も、タグに付けた ID名で指定できるようになったのです。 更にIDは、Dynamic HTML でスクリプトがページ中のタグをコントロールするための名前ともなります。

以下に、従来のタグだけを使ったページ・レイアウトと、カスケーディング・スタイルシート(CSS)を応用したページレイアウトとを、表示結果ではなく設計方法の違いに限定して、簡単な例で比較してみます。

タグだけを使用したレイアウト

<HTML>
<HEAD>
<TITLE>入会案内</TITLE>
</HEAD>
<BODY bgcolor="yellow" LINK="blue" VLINK="red">
<A NAME="top"> </A><BR><BR><BR>
<CENTER><FONT size="5" color="green"><B>入会案内</B></FONT><P>
<TABLE>
<TR><TD><I>1.</I></TD><TD><a href="#1">はじめに</a></TD></TR>
<TR><TD><I>2.</I></TD><TD><a href="#2">趣旨</a></TD></TR>
<TR><TD><I>3.</I></TD><TD><a href="#3">入会方法</a></TD></TR>
</TABLE><BR><BR><BR>
</CENTER>
<blockquote>
<B><a name="1">
はじめに</a></B><P>



<P>
<B><a name="2">趣旨</a></B><P>



<P>
<B><a name="3">入会方法</a></B><P>



<P>
</blockquote>
<CENTER><a href="#top">上に戻る </a></CENTER>
</BODY>
</HTML>

CSS(Embedding Style)を使ったレイアウト

<HTML>
<HEAD>
<TITLE>入会案内</TITLE>
<STYLE TYPE="text/css">
<!--

BODY {background:yellow}
A:link {color:blue}
A:visited {color:red}

DIV {text-align:center}
DIV#1,#2,#3 {font-weight:bold;text-align:left;margin-left:30pt}
H1 {font-size:16pt;color:green;margin-top:43pt}
TABLE {margin-bottom:35pt}
.it {font-style:italic}
P {margin-left:30pt;margin-bottom:14pt}

-->
</STYLE>
</HEAD>
<BODY>
<DIV id="top">
<H1>入会案内</H1>
<TABLE>
<TR><TD class="it">1.</TD><TD><a href="#1">はじめに</a></TD></TR>
<TR><TD class="it">2.</TD><TD><a href="#2"> 趣旨</a></TD></TR>
<TR><TD class="it">3.</TD><TD><a href="#3">入会方法</a></TD></TR>
</TABLE>
</DIV>
<DIV id="1">はじめに</DIV>
<P>



</P>
<DIV id="2">趣旨</DIV>
<P>



</P>
<DIV id="3">入会方法</DIV>
<P>



</P><DIV><a href="#top">上に戻る</a></DIV>
</BODY>
</HTML>


見開きでないのでちょっと見づらいと思いますが、両者の対応部分を色分けで表しています。例えば <CENTER> タグを使う代わりに <DIV> タグに "text-align:center" という属性を定義し(青色)、<FONT> タグの代わりに <H1> タグの属性定義でフォントのサイズと色を指定し(赤色)、ついでにトップ・マージンを定義することによって <BR> の連続による間取りを回避しています(橙色)。 ブロック(<DIV>)、見出し(<H1>)、表(<TABLE>)、パラグラフ(<P>)といった論理タグ以外は徹底的に廃し、<BLOCKQUOTE> さえ使っていませんが、結果として外観は全く同じとなります。

アンカーは、A タグに NAME 属性を指定する代わりにジャンプ先のタグにIDを指定する方法を採っています(緑色紫色)。 タグに直接ジャンプ先を定義できるようになったため、ページの先頭などにもきっちり移動できるようになりました。従来の方法だと、全角スペースのようなダミーを使わなければ、これは出来ませんでした。

もちろん上の例は表示結果ではなく設計方法の違いを強調するためのものなので、スタイルシートのユニークさが必ずしも十分に出ていないと思います。表示位置などを精密に数値指定できるスタイルシートならば、タグだけのレイアウトでは不可能だった表現も可能になります。 別の機会に紹介しますが、これまでは画像を使うしかなかったビジュアルな図案文字もスタイルシートを使って表示可能です。

しかし問題は、スタイルシートに対応していないブラウザのユーザーにどう対応するかでしょう。非スタイルシートバージョンも用意するか、いっそスタイルシート非対応ブラウザのユーザーを切り捨てるか?・・・乱暴な話です。現状では、スタイルシートに対応していないブラウザを基本に考えるべきです。<FONT> タグや <CENTER> タグなども当分廃止されることはないでしょうから、多くのブラウザが対応しているこれらのタグを使うようにした方がよいと思います。 その上で、ページデザインの効果を上げるためにスタイルシートを部分使用するか、スタイルシート専用のページを作るのが賢明なやり方です。

また現在 CSS 1 をサポートしている Internet Explorer 4.0 と Netscape Communicator 4.0 にも、対応の程度に微妙な違いがあります。例えばこのページ上部のリンク一覧には、後者でみると背景色が表示されていないはずです。これは TABLE タグ内の背景色を bgcolor ではなく CSS の background で色指定しているためです。およそスタイルシートや Dynamic HTML のような先進的なことをやろうとするなら、少なくとも IE と Netscape の2大ブラウザで表示チェックしなければなりません。

次回は、CSS を使ったレイアウト効果について見てみることにします。




次のトピックは「HPで使えるボタン(1)」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで