スタイルシートの初歩

プログラミング

スタイルシートのさわり


 スタイルシート(CSS.Cascading Style Sheets)は,HTML文書の見栄えを記述するための規格です. TeXを使っていた人なら,文書の論理構造と見栄えを分離するという考え方はよくわかると思いますが, そのようなことが論理構造はHTML,見栄えはCSSという役割分担によって実現できるというわけです. スタイルシートは,TeXで言うところのスタイルファイルに相当するんです.

とは言っても,実際には同じCSSを表示させても,実装されているブラウザ (Internet Explorer 3.x, 4.x, 5.x, Netscape Navigator 4.x)によって, 見栄えが違ったりもしくはブラウザによっては未実装のスタイルもあるのが現実で, なかなかうまくはいきません.

このページでは,カモランドで使っているスタイルシートを取り上げて, 簡単な解説をしてみようと思います.


スタイルシートの書き方 その1 (インラインスタイルシート)

 一番簡単な書き方は,HTMLタグにそのまま埋め込む方法です.
<a href="http://kamoland.com/comp/index.html" style="text-decoration: none">ホームに戻る</a>
 index.htmlへのリンクを記述しているアンカータグに,style=...として埋め込んでいます. text-decoration: noneというのは,テキストの装飾を無効にするという意味で, 結果として,リンク文字列に付くはずの下線が表示されなくなります.こんな感じです.

ホームに戻る

最近は,リンクの下線を消しているページが非常に多いですね. 下線があると読みづらいのでしょう.


スタイルシートの書き方 その2 (リンキングスタイルシート)

 HTMLタグに埋め込む方法だと,たくさんのタグ,あるいはHTMLファイルに適用するときに, 無茶苦茶面倒です.そういうときは,styleの記述をHTMLとは別のファイルとして作って, HTMLファイルからこれを参照するようにします.HTMLファイルのヘッダ内で,
<link rel="stylesheet" type="text/css" href="http://kamoland.com/comp/kamoland.css">
このように記述すればOKです.

私は以下のようなファイルを使っています. この例ではBODY,H1,Aの各タグに対して見栄えを指定し, さらにUL.whatnewというクラスを定義しています.

kamoland.cssから一部抜粋
BODY {
    background: #f0f0f0; }

H1 {
    border-color: #60e0d0;
    border-style: solid;
    border-width: 0px 0px 5px 0px;
    width: 100%;
    font-size: large;
    font-weight: bold; }

A {
    font-weight: bold;
    text-decoration: none; }

UL.whatnew {
    line-height: 140%;
    text-indent: -1.5em;
    list-style-image: url(image/ball.gif); }

一つずつ順番に見てゆきましょう


スタイルシートの例 その1 (BODY)

BODY {
    background: #f0f0f0; }
これは,HTMLファイル内で<BODY BGCOLOR="#f0f0f0">と記述するのと同じです. それでは,なぜわざわざこうするのかというと,全てのHTMLファイルの背景色を変えたくなっても, このスタイルシートの記述を変更するだけで済んでしまうからです. 全てのページの背景色を,ここで一元管理できるというわけです.HTMLファイルでは,
<BODY>
とだけ記述します.これで背景色は#f0f0f0になります.

スタイルシートの例 その2 (H1)

H1 {
    border-color: #60e0d0;
    border-style: solid;
    border-width: 0px 0px 5px 0px;
    width: 100%;
    font-size: large;
    font-weight: bold; }
H1タグの見栄えを設定しています.見ておそらく想像つくと思いますが,
  • 罫線色は#60e0d0 (ほぼ水色)
  • 罫線は実線
  • 罫線の幅は上左右は0px,下は5px
  • 幅は親タグの幅に対して100%
  • フォントの大きさは大
  • フォントは太字
という指定をしてます.よく意味がわからないかも知れませんが,こうなります.

H1はこんな感じ

幅の100%というのは,ここではBODYの幅に対して100%という意味になります.

スタイルシートの例 その3 (A)

A {
    font-weight: bold;
    text-decoration: none; }
次はアンカータグですが,これは簡単です. 文字を太字にして,下線を無効化するというわけです.

アンカーはこんな感じ


スタイルシートの例 その4 (UL)

(注) この例は,Netscape Navigator 4.6では正しく表示されません
Internet Explorer 4.x以上なら正しく表示されます

UL.whatnew {
    line-height: 140%;
    text-indent: -1.5em;
    list-style-image: url(image/ball.gif); }
これは少々,凝ってます.ULというと番号をつけずに項目を列挙するためのタグですが, これ用にwhatnewというクラスを定義しています.その内容は,
  • 行間隔は140%
  • インデント(左余白)は-1.5em
  • 項目列挙時のラベルとして image/ball.gifを使う
このクラスを使って次のようなHTMLを書くと,
<ul class=whatnew>
<li>項目その1
<li>項目その2
</ul>
こんな風に表示されます.
  • 項目その1
  • 項目その2
スタイルシートを使わずにこれを作るとなると,こんな感じでしょうか.
<img src="http://kamoland.com/comp/image/ball.gif">項目その1<br>
<img src="http://kamoland.com/comp/image/ball.gif">項目その2<br>
項目その1
項目その2

スタイルシートを使ったほうが,HTMLが見やすいですね. 項目の列挙という意味もわかりますし.


おわりに

 スタイルシートを使うと,色々と細かいこだわりを表現できますが, Internet ExplorerとNetscape Navigatorで, かなり見え方が違うので気をつけてください.実装が中途半端なNetscapeを捨てて, Internet Explorer4.x以上限定にしてしまえば,かなり凝れるとは思いますが, インターネットでそれはしたくないと思います.(FRAMEすら使いたくない)


© 2024 KMIソフトウェア