HTMLの最新テクノロジーを使って、自分のウェブページをパワーアップする！

スタイルシート機能を使ってWebページはまだまだチューンナップできる

ホームページをパワーアップするカスケーディング・スタイルシート

WebページDTPのためのCSS入門
（日経WinPC 98年６月号掲載分／完全版）

● IE4のCSS（カスケーディング・スタイルシート）の機能を使って、Webページを書いている人はまだまだ多くない。
● さまざまな表現力や、レイアウト能力を有するスタイルシートを駆使することで、ワンランク上のページを作ることができる。
● ブラウザによって、その仕様は微妙に異なるため、IE4限定となるが、この機能を使うメリットの方が多い。

　多くの人が、自分のWebページを持つようになり、インターネットのWWW上は、まるで「表現力の運動会」状態である。しかし、簡単にできるからといって、安易に画像を貼り付けているだけのページも数多くあるようで、中には、そのために読み込み時間がかかるなどのマイナス要因も生んでいるようだ。さらに、思い通りのレイアウトにするために、すぐに「画像に逃げている」ページも多い。もちろん、それがいちばん簡単な方法論だからなのだが、これも、読み込み時間のみならず、ページ改良が非常にやりにくくなってしまうという弊害がある。
　これに対する解決策としてIE3から搭載されたのが、スタイルシートの機能である。その特徴をひとことで言うなら「詳細なページレイアウトを指定できる」ということに尽きるであろう。指定方法は、いくつかあり、ページ作成者によって、かなり柔軟に対応できるのであるが、基本的には、以下の３つである。

　具体的には、HTMLを見ていただけば、すぐに了解できることであるが、単にソースをエディタ等で変更するだけで、レイアウト等の指定ができるわけである。もっとも、最近では、FrontPage 98のように、簡単にスタイルシートの指定が行えるHTMLのツールも数多く登場して来ているが、ここでは、直接HTMLをエディタで変更することにした。
　また、ブラウザに実装されているスタイルシートの機能は、IE3とIE4では微妙に（あるいは大幅に）異なっており、当然、NC4のスタイルシートとも異なる部分は多い。ここでは、最新のIE4を使って、スタイルシートの実際を見てもらうことにしよう。また、説明を簡易に行うために「インラインスタイル」と「埋め込みスタイルシート」のみを使うことにした。

■1.自分のWebページのどこがよくないのかを認識する

　具体例をあげて進めていこう。
　図1は、もっとも一般的に考えられうるページの例である。使っている画像は３点、ドロップシャドウを使ったタイトル文字と、写真と、ボタンである。上下の罫線は、<HR>タグを使っているので画像ではない。中央のメニューと写真部分は、<TABLE>タグを使って表現し、また全体も<TABLE>タグによって、その幅を決定している。
　実は、これはこれで、それなりにきちんとしているページである。さほど悪い部分は見当たらないような気もするかもしれないが、いくつかの問題点があるので、それらを個別に解説しよう。

●問題1／読みにくい行間隔

　ページ下部の文字は、ブラウザで指定されている標準的なフォント（ＭＳＰゴシック／12pt）である。しかし、その行間隔があまりにも接近しているので、実はかなりに読みにくい。じつはこれでも、IE3から比べれば、多少行間隔が開いたようなのである。このくらいの分量ならば、まだ可読性はあるが、それでも、この文字列の塊を大量に読むとなると、相当に読みづらいことが想像できるだろう。

●問題2／リンク先のアンダーライン

　リンクしている文字列には、アンダーラインが入る。これについては、IE4のメニューから、[表示]→[インターネットオプション]→[詳細設定]に、[リンクの下線]という項目があり、「常に付ける」「付けない」「ポイントしたとき」という３つの中から選べるようになっている。しかし、それは個々のブラウザの設定によるものである。
　例のように明らかにメニューとして存在している文字列の場合は、下線が付けられてしまう必要はないと考える。

●問題3／標準フォントの表現力

　写真の下には、少々おおきめの文字列が1行存在する。これは、<FONT>タグで、サイズ指定を行っているだけのものである（SIZE=+2）。段階的に大きくしたり小さくしたりということは、このように可能であるが、レイアウト上ちょうどいい大きさのフォントを指定することは、難しい。適当な大きさを探して、その値を指定するというのが、一般的である。
　また、ページ上部の欧文は、標準フォントによって表現された欧文であるため、欧文としては、それほど美しいとは言いがたい。欧文は、欧文フォントを指定することによって、その可読性も、またときには装飾性も向上するのだ。

●問題4／大きなJPEG画像

　写真は、JPEG画像である。実はサイズはそれほど大きいものではないし、また、JPEG圧縮されている画像であるから、読み込みもさほど時間はかからない。それでも、これが大きなサイズの画像であったり、圧縮率が小さかったりすると、ブラウズする際のストレスは相当なものだ。

●問題5／無意味なボタンGIF

　メニューについているボタンのようなものは、GIF画像である。「悪しき伝統」とでも呼ぶべきか、何の疑問も抱かずに、メニューにこのようなボタンを付けるページのなんと多いこと。もちろんそれが効果的であるなら、躊躇なく使うべきであるが、単なる見た目のアクセントのために、GIFファイルをわざわざ作成（あるいは流用）して、画像として読み込ませるのは、理解できない。

●問題6／大きなタイトルGIF

　かなり多くページが、このような、ドロップシャドウ付きのタイトル文字列を使用している。自分のWebページのイメージに合わせて、最も適当なものを作成しているのであろうが、ほとんどの場合、単なる自己満足である。当然のようにGIF画像であるから、読み込みにも時間がかかるし、なにより、このタイトルを変更しようとした場合に、またGIF画像の作り直し、ということになる。タイトルは、そうそう変わるものではないという意見もあるだろうが、このままでは、「季節に合わせてちょっと色を変える」といった変化への要望にも対応できない。

●問題7／思考停止のセンタリング

　そして、最大にして、最多の問題が、ページの内容をどれもこれもセンタリングしていることにある。ページレイアウトを考える際に、最も失敗が少なく、また最も安直な方法論が、このセンタリングである。左右対称形は、安定的なイメージを与え、それなりにきれいに見えるのであるが、WWWにある多くのページが、この方法論を用いているということは、つまり、「凡百の例」と同じということに他ならない。
　可読性として、最悪の問題点は、ページ下部の文字列部分で、センタリングしているために、最後の行の文字列が、真ん中で表示されてしまい、いかにも変である。これでは、やっつけで作ったと思われても文句は言えないだろう。

■2.読みやすい行間と、考えたフォント指定を行う

　前述の問題を個々に解決していくことにしよう。HTMLファイルの<HEAD></HEAD>の中に、以下のようにスタイルシートを記述する。

　この例の場合、全体は、TABLEタグによって囲まれているため、bodyに対する指定はあまり意味がない。しかし通常は、本文に対して適応することが多いので、あえて、残しておいた。

●解決1／行間隔を指定する

　2番目の指定から解説する。通常「埋め込みスタイルシート」」は、このように、
セレクタ　{スタイルプロパティ1: 値; スタイルプロパティ2: 値;.....}
という形態で宣言する。セレクタの部分には、タグがくることもあるし、また、自分で任意に定義することもできる。個々のプロパティは、セミコロンで区切られるので、これを忘れないこと。
　2番目の指定は「<TABLE>タグ内では、行間隔を16ポイント、フォントサイズを11ポイント、文字間隔を-1ポイントで表示する」という意味である。行間隔とフォントサイズが同じであると、きっちりつまった文字列の塊となり、読みにくいことこの上ない。だから通常は、フォントサイズよりも大き目の値を指定する。ここでは16ptにしているが、これは各自の好みの行間を指定すればいい。文字間隔は、本来指定しなくてもかまわないが、かすかにつめ気味の文字列の方が読みやすいことが多い。

●解決2／アンダーラインを消す

　3番目と4番目は、<A>タグを使って、リンクしている文字列の下線を付けない指定である。4番目のa:visitedは、すでに、読み込んだページのリンクという意味である。これで、このページにおいて、<A>タグを使っている部分の下線は、ブラウザ側でどのような設定を行われていようとも、下線は表示されない。もちろん、リンク部分にマウスポインタがくれば、通常の場合、ポインタの形が「指」になるのは同様である。

●解決3／フォントを指定する

　上記では「埋め込みスタイルシート」を利用したので、こんどは「インラインスタイル」を使って、フォントの指定を行ってみよう。
　ページ上部の欧文は、直接以下のように変更する。

<DIV STYLE="font-family: Comic Sans MS; font-size: 18pt;">
th<SPAN STYLE="color: #406080">is</SPAN> <SPAN STYLE="color: #406080">is</SPAN>olated <SPAN STYLE="color: #406080">is</SPAN>land
</DIV>

　これはあくまで、一般的な場合の話だが、1行ないしは、数行のブロックをまるごとスタイル指定する場合は、<DIV STYLE="指定">～</DIV>という形態をとることが多い。ここでは、「18ポイントのComic Sans MS」を指定している。
　さらに、文字列を部分的にスタイル指定する場合には、<SPAN>を利用する。ここでは、「is」という文字列の色だけを変更してみた。
　また、同様にして見出しの文字列のフォントとサイズも変更し、色も変更した。（図2）

　このように、全般的に適用する必要のないスタイルは、<DIV>や<SPAN>を用いて、指定することが多い。

■3.画像を撤廃し、フォントで代用させてみる

　少々強引ではあるが、写真部分と、ボタン画像をフォントを使って表現してみよう。フォントは、個々のハードディスク内に存在するものを指定するだけであるから、軽くはなる。しかし、ブラウズする側が、その当該フォントを持っていないとなると、まったく、意味のない文字が表示されてしまうことになるので、注意が必要である。ここでは、IE4に限ってブラウズすることを前提として解説してみよう。
　IE4をインストールしているマシンであるなら、「Webdings」という名前のフォントもインストールされているはずである。これは、各種のイラストをフォント化したもので、フォントの種類で、これを指定しサイズを変更すれば、ちょっとしたイラストレーションの代用となるものだ。

●解決4／JPEG画像をフォントで代用する

　JPEG画像を表示させている<IMG>タグを以下のように変更する。

　「孤島のイメージ」イラストは、Webdingsの「J」である。これを120ポイントのサイズで表示させ、その行間も120ポイントとする。色も、他の部分のイメージに合わせたもので指定した。

●解決5／ボタンGIFをフォントで代用する

　写真まで、フォントで表現するというのは、さすがに行きすぎのきらいがあるが、ボタンGIFなどは、これに最も適当な方法論だと思われる。

きょうの近所 <SPAN STYLE="font-family: Webdings; font-size: 24pt; color:#4080DD">)</SPAN>

　吹き出しのようなものは、Webdingsの「)」と「(」で表現されている。
　Webdingsには、他にも数多くのイラスト的フォントがあるので、個々で調べて、使えそうなものを探すといいだろう。
　単純ではあるが、あまりにも局所的な方法論であるため、もちろん濫用は避けなければならない。しかし、IE4ユーザー（当然Webdingsをインストールしている）という読者を限定したコンテンツなどの場合には、効果的で、しかも軽量化できる方法だ。（図3）

■4.タイトル画像もフォントで代用し、それに特殊効果を付ける。

　ここまでくれば、タイトル部分もフォントで表現したいところである。しかし、最大の問題は、いかに色で工夫しても、フォントで表示場合には、GIF画像に比べてあきらかに表現力が劣る、ということである。
　これに対応するために、スタイルシートには、フィルタという機能があり、画像などに、特殊効果をつけることが可能だ。もちろん、フォントに対してもこのフィルタは有効であり、数回の試行錯誤はあったとしても、効果的な表現がすぐにできることがわかるであろう。

●解決6／タイトルGIFをフォントで代用しShadowのフィルタをかける

　最初に「埋め込みスタイルシート」の指定を行った部分に、以下のものを追加して記述する。

.title1 {
font: bold 56pt/60pt 'ＭＳＰゴシック';
letter-spacing:-5pt;
width: 500;
height: 60;
color: #60A0FF;
filter: shadow(color=#206080,direction=135);
}

　ここで「title1」という名前のスタイルを定義している。このように読みやすく改行しても何の問題もない。注意が必要なのは、タグを全般にわたって指定するときと異なり、自分で宣言しているものの場合は、その前に「.（ピリオド）」が必要だということである。
　フォントの指定は、それぞれの間にスペースを挟んで、まとめて行うことができる。「強調、サイズ56ポイント、行間60ポイント、文字種はＭＳＰゴシック」という意味である。大きなサイズのフォントなので、文字間隔を-5にしてみた。色は、同系統のものを指定しているが、問題は、幅と高さを指定している部分である、フィルタ指定する場合には、その効果が有効になる範囲をきちんと指定せねばならない。
　今回は、影付きのフィルタを指定してみた。パラメータで、影の色と方向を指定可能だ。方向は、真上が0度で、時計まわりに360度指定できる。
　つぎに、GIF画像を表示させている<IMG>タグを以下のように変更する。

<DIV CLASS="title1">きょうも孤島</DIV>

　たったこれだけである。
　頭の<STYLE>部分の指定が、このCLASSで適応されるということである。これで「まるでイラストのような」とまでは言わないが、ある程度以上の表現力に富んだ文字装飾が行われることになる。(図4）

　もちろん、フィルタは、この「影付き」のみならず、他にもさまざまなものがある。具体的には、インターネット上のドキュメントを参照していただきたい。
　また、同様にして、前述の吹き出しボタン・アイコンも「埋め込みスタイルシート」に変更してみた。<SPAN>や<DIV>などで、同様の表現をいくつか行っている場合には、上記の例のように、まとめて表現して、当該部分でCLASSを指定する方がいい。このタイトルの場合は、スタイルの内容が長くなりそうだったので、「埋め込みスタイルシート」を利用した。

■5.各種のレイアウトを変更し、最終的に仕上げる

　最後に、センタリングからの脱却を図ろう。もっとも、元のページにスタイル的な変更を加えるだけであるから、抜本的な解決にはなりにくい。コンテンツに合わせたレイアウトの指定を最初から構築することが本来は肝要である。しかしここでは、とりあえず、読みにくくなっている文字列部分を中心として、スタイル指定してみることとしよう。

●解決7／レイアウトを変更する

　まず、「文章のマージン指定」を行う。単にセンタリングするのではなく、左右にマージンを指定し、それによって可読性を高めようというものだ。センタリング指定をしているタグを削除して、文章部分を以下のように括ってしまおう。

　文章の左右に50ピクセル分のマージンを付けるということである。通常、文字列は左寄せで表示されるので、これで、きちんと読みやすい文章になる。これまでは、このようなことを行う場合、<TABLE>タグで指定するとか、透明のGIFを挿入して、強制的にマージンを表現していたが、スタイルシートを用いれば、こういったように、好みの位置にレイアウトできるようになる。最大のメリットは、これが数値を変更しただけで、自在に変更可能だということである。
　つぎに、見出し部分も、マージン指定等を行ってみよう。

<DIV STYLE="font-family: ＭＳＰ明朝; font-size: 24pt; font-weight: medium; letter-spacing:-3pt; text-decoration: underline; margin-left: 30px;">
情報の<SPAN STYLE="font-family: ＭＳＰ明朝;font-size: 32pt; font-weight: medium; letter-spacing:-3pt; color:#406080;">孤島</SPAN>にいらっしゃいませ。
</DIV>

　この行は、左マージン30ピクセルで表示する。さらに、文字列の装飾として、アンダーラインを付け加えた。「孤島」という文字列だけは、<SPAN>で、サイズも色も変更した。
　そしてもうひとつ、

<DIV STYLE="font-family: 'Times New Roman'; font-size: 16pt; letter-spacing: 12pt;">th<SPAN STYLE="color: #406080">is</SPAN> <SPAN STYLE="color: #406080">is</SPAN>olated <SPAN STYLE="color: #406080">is</SPAN>land</DIV>

　ページ上部の欧文フォントは、可読性よりも、装飾性を優先させるとこにする。文字間隔を空けることによって、欧文による装飾性が高まる。文字は、どのWin95マシンにもインストールされているはずのTimes New Romanを使った。
　あとは、スタイルシートの可変性の高さを利用して、「タイトル文字列の変更」と「ボタンフォントの変更」を行う。GIF画像ではないので、文字列の変更が容易なことは、いうまでもない。
　さらに、ちょっとした見栄えのために、スタイルシート以外の変更も加えてみた。まず「バックグラウンドに薄い色を付ける」ことにする。これはほとんど趣味の問題と思われているようだが、バックグラウンドに不必要にGIF表示させることには慎重にならねばならない。読み込み時間がかかるのは当然のこと、文字色によっては、読みにくいといった事態が頻繁に発生しかねない。「自分のブラウザでは、ちゃんと読めると考えていても、他の人間のディスプレイでは、読みにくい」というというのは、実はよくある話である。個人的には、バックグラウンドを真っ白にするのは、かえって見にくいことがあるので、ここでは、薄い色を指定してみた。
　また、TABLEタグ内の位置をいくつか変更し、あえてレイアウトに動きを付けてみた。（図5）

　最初の、スタイルシートを使わない例と比べてみて欲しい。かなりに強引な部分もあるにはあるのだが、なんとも、このページは、図版を1点も使用していないのである。

　＊　＊　＊

　スタイルシートの指定の仕方や、その他のプロパティなど、かなり省略して解説したが、その「有効性と力量」は理解していただけたと思う。さらに詳細を知りたい方は、http://www.microsoft.com/japan/sitebuilder/workshop/author/css/css-ie4-f.htm に日本語のドキュメントがあるのでそれを参照していただきたい。また、このページから、参考となるページへのリンクや、スタイルシートを使った例が多数あるので、それも、役に立つだろう。

for Cascading Style Sheets