WWW川流れ

最低限の「デザイン」

タレ流し型コンテンツ」を提供するWebサイトの多くで主役となるのは文章だ。主役は文章なのであり、装飾は脇役である。しかしながら幾ばくかの装飾を施してやることで、主役の文章が引き立ってくる。そして装飾の中には、文章の閲覧時間を延ばすという見逃せない効果を発揮するものもある。

長時間の閲覧に耐える配色

文章をコンテンツの中心に据えると、閲覧に要する時間はどうしても長くなる。加えて文面を読み込むために、閲覧者は「画面をじっと見続ける」ことを余儀なくされる。画面をじっと見続ければ、当然疲労が蓄積してくる。

閲覧者が疲労してきた場合、WWWコンテンツには書籍などと比べ不利な事情がある。ベッドに寝ころんで読み続けることは難しいという点だ。デスクトップ型コンピュータならベッドで読み続けるのは不可能であろうし、ノートブック型でも枕元で無理なく使用できる機種は限られる。また、小型の機種ではキーボードやポインティングディバイスの操作性が劣りがちで、画面の見やすさも今ひとつだ。どのみち枕元の「閲覧の延長戦」は長続きしない。

いきおい、「閲覧者が疲労を感じたとき=閲覧が停止するとき」となってしまう。それゆえコンテンツの制作者には、閲覧者をできる限り長くコンピュータの前に「くくりつけておく」ための工夫が求められる。「文面も隙間もデザイン」で取りあげた項目はいずれもこの目的に寄与するものだ。

背景色の設定

閲覧時間を延ばす要素として、背景色の選定について考えてゆく。「文面も隙間もデザイン」で取りあげた項目を書籍における「印刷技術」であるとするならば、ここで取りあげる背景色は「紙」だ。

さて、購入したばかりで初期状態のコンピュータでは、ウィンドウの背景色は白になっていることがほとんどだ。今までこの設定を変更しているユーザはほんの数人しか見たことがない。WWWコンテンツの制作者が何もしないでいると、圧倒的多数の閲覧者は「真っ白なウィンドウに描画された真っ黒な文字」を読むことになる。

何も設定していない状態は、ごく少ない(が、まったく無視してよいとは言えない)ハンディキャップのある閲覧者や知識のある閲覧者にとって、非常に使い勝手のよいものだ。このグループの閲覧者は各自読みやすい環境を工夫して閲覧してくれる。「カスタマイズ性」に関しては、何も設定していないデザインは最良のデザインだ。

しかし、圧倒的多数の閲覧者に「白背景に黒字」の画面で文章を読ませることは、無視しがたい問題を孕んでいる。この配色ではコントラストが強すぎて眩しいことだ。眩しすぎる画面は閲覧者の疲労を高速に進行させ、閲覧時間を縮めてしまう。閲覧時間を少しでも延ばしより多くの文章を読ませるためには、このような画面の「眩しさ」を和らげてやる必要がある。

有効な方法は背景色を真っ白ではなく、やや濁った色に設定することだ。弊サイトではWhite Smoke:#f5f5f5(このページでも採用)やIvory:#fffff0といった色を選択している。白:#ffffffに設定されている場合よりも、眩しさは格段に緩和される。

書籍などの印刷物も、子細に観察すると「真っ白な」用紙に印刷されたものはほとんどないことに気付く。背景色の設定は古典的な「デザイン」の手法をWWWコンテンツに援用しただけだが、その効果は大きい。

文字色の設定

文字色の設定は背景色と組み合わされてはじめて効果を発揮するものだ。背景を黒に設定したページで文字の色も黒くしては、何も見えなくなってしまう。

さて、背景色を真っ白ではなくやや濁った色に設定することを述べたが、これに組み合わせる文字色にはいろいろ選択肢がある。2つの採用すべきではない例と、微妙な改良で効果的と思われる事項についてのみ記述する。

採用すべきではない文字色

まず、文章を中心としたWWWコンテンツで決して本文に使用してはならない色は、青:#0000ff だ。理由は簡単である。青:#0000ff はリンクの設定された箇所と混同されやすいからだ。この問題を軽く捉える者が少なくないが、認識違いも甚だしい。本文に青:#0000ff を使ってしまうと、肝心のリンクが目立たなくなる。目立たなくなったリンクはクリックしてもらう機会が少なくなり、結果として閲覧されるページ数が減ってしまう。

青:#0000ff に近い青:#0000cc も避けておくべきだ。青:#000099 は微妙、紺:#000066 紺:#000033 ならほぼ問題はなく、背景とのバランスを考えれば適切な文字色になりうる。

次に採用すべきではないのは、赤:#ff0000 であろう。こちらはWWWコンテンツということに限らず、一般的に強調を意味するものとして認識されている。若干くすませた赤:#cc0000 赤:#990000 あたりまでは、強調や最強調を現す部分(strong要素やem要素)に用いるために、本文での使用を控えておいた方が無難である。

安定感を高める文字色

このほかの色はおおむね背景色とのバランス次第なので個別の例示はしないが、ひとつだけポイントがある。コントラストがきつすぎないように色を設定すると、安定したイメージのページになることが多い。

Webページの色設定で使われることの多い16進数のRGBによる指定方法ならば、「ff」になっている設定値を「cc」や「99」に変更して試すとよい。また、黒についても真っ黒:#000000 ではなく黒:#333333 の方が、落ち着いたイメージを与えやすい。これらは無難なWeb Safeカラーから選択しているが、適切な色が見つからなければHTML4.01ならびにCSS2で定義されている16色(Web Safeカラーとの重複をのぞくと8色)、それでも適切な色が見つからなければブラウザ側で定義されている140色(HTML4.01ならびにCSS2で定義されている色との重複をのぞくと124色)から選択するとよい。

いずれにしても、文章を中心としたコンテンツに「奇抜な」色使いはそぐわない。「色紙に印刷された書籍」はほとんどないのと同じだ。

背景色、文字色の設定方法

文面も隙間もデザイン」で作成したスタイルシートファイル「bunmen.css」を開き、以下の1行を書き込んでいただきたい。書き込みをする行の位置に指定はない。

body { color: #333333; background-color: #f5f5f5; }

この例では、文字の色が微妙にグレーがかった黒(#333333)に、背景色がごく薄いグレー(White Smoke:#f5f5f5)に設定される。

論理構成の明確化

文章を中心としたコンテンツにおいて、論理構成はコンテンツの骨格となることが多いであろう。「最低限の装飾」を加える際の指針は、「論理構成を分かりやすくする」ということだ。この目的に合致しない装飾を安易に追加すべきではない。

強調部分

HTMLにおいては、「em」ならびに「strong」という、ふたつの強調を示す要素が用意されている。「em」は通常の強調であり、「strong」はより強い最強調だ。実際にHTMLファイルを作成する際は、<em>強調部分</em>、<strong>最強調部分</strong>のように記述する。<>で括った開始タグで始まりを指定し、</em>のようにスラッシュを入れた終了タグで終了部分を指定するという考え方は、「手書きHTMLのススメ」で述べた段落や見出しの記述方法と同様だ。

さて、これらの要素をそのまま日本語のWebページで使用すると、困った問題が生じてしまう。em要素は特に設定していないと斜体で表示されることだ。斜体は日本語のフォントとの相性が非常に悪く、強調部分であるにもかかわらず読みにくい表示になってしまう。そこで、スタイルシートファイルを利用して、これらの要素の表示を調整してやる必要が出てくる。

「bunmen.css」を開き、以下の1行を書き込んでいただきたい。

em { font-style: normal; font-weight: bold; }

「font-style: normal; 」の部分は、斜体ではなく通常の書体(normal)で表示せよという指定だ。一方、「font-weight: bold; 」の部分は、太字(bold)で表示せよという意味になる。これで読みにくい斜体日本語フォントとは「おさらば」できる。

しかし、em要素をこのように設定すると別の問題が生じてしまう。実は、strong要素の方は、何も設定していない状態であれば、通常太字(bold)で表示される。つまり、強調(em要素)と最強調(strong要素)の区別が付かなくなるのだ。まさに、「こちらを立てればあちらが立たず」である。

そこで、最強調であるstrong要素についても、表示の設定を変更してやる必要が出てくる。筆者がよく使う方法は、strong要素に色を付けてやることだ。

再び「bunmen.css」を開き、以下の1行を書き込んでいただきたい。

strong { color: #cc0000; }

これでstrong要素が赤字で表示されるはずだ。この例では色の値を赤(#cc0000)としているが、真っ赤(#ff0000)でも構わないであろう。

しかし、この方法にも不安な点が残っている。強調と最強調は色によって区別されており、色覚障害者には強調と最強調の区別が付かない可能性があることだ。万全ではないがこの不安をいくらかでも緩和する策として、最強調(strong要素)に背景色を設定し、強調(em要素)との区別を付ける方法を示しておく。先ほど「bunmen.css」に書き込んだstrong要素の設定を以下のように変更する。

strong { color: #cc0000; background-color: #ffffff; }

この例ではstrong要素の部分が白い背景色で表示される。この方法は前述したページ全体に対する「背景色の設定」を行っている場合には有効性を発揮するが、行っていなければ他の部分と区別が付かず、意味がない。

見出しに装飾を加える

論理構成を捉えやすくし閲覧者の理解を助けるために、見出しの部分に装飾を加えることも有効だ。しかし、この装飾についてはこれまで試みた設定に比べ選択肢が非常に多いうえ、それぞれのケースについて細かな方法を説明する必要がある。さまざまな装飾を試みたい向きには、技術的な文献を手に作業することをお勧めする*1

ここでは「h1」~「h6」までそれぞれのレベルの見出しについて、スタイルシートファイル(本論では「bunmen.css」)に記述するごくシンプルな設定の例と、その解説を示しておく。これまでと同様、スタイルシートファイルに行を追加していただきたい。

見出し装飾の設定例と解説
h1 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 20px; border: solid #993333; border-width: 1px 1px 1px 40px; font-size: 160%; color: #993333; background-color: #cccccc; }
h2 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 20px; border: solid #660000; border-width: 1px 1px 1px 40px; font-size: 140%; color: #660000; background-color: #ffffff; }
h3 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 40px; border: solid #666666; border-width: 0px 0px 1px 20px; font-size: 130%; }
h4 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 50px; border: solid #999999; border-width: 0px 0px 0px 10px; font-size: 120%; }
h5 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 55px; border: solid #cccccc; border-width: 0px 0px 0px 5px; font-size: 110%; }
h6 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 60px; font-size: 100%; }
設定の解説

実際に数値を変更しながら表示を見てみないとなかなか概念が掴めないが、「margin」は要素の外側に設けられる余白、「padding」は要素の内側に設けられる余白である。「margin」や「padding」の値は、「上、右、下、左」の順に半角スペースで区切って数値を設定する。ここで設定する見出しの例では、後述する枠線(border)も含め、いずれも設定する数値の単位にピクセル(px)を使用している。

border(枠線)は要素の周りに表示される「枠」である。色を適宜変更することもできるし、幅(太さ)の設定次第では、「枠線」という呼び名のイメージとはまったく違う効果をもたらすこともできる。「border: solid #993333; 」のような設定は、枠線の形式(style)と色をまとめて指定している。この例ならば形式は普通に引かれた線(solid)であり、色は16進数のRGB値#993333 である。

「border-width: 1px 1px 1px 40px; 」のような設定は、枠線の幅だ。値を設定する順番はやはり「上、右、下、左」の順である。この例では左側が40ピクセル、その他は1ピクセルずつの設定である。

すべての見出しについて記述されている「font-size: xxx%; 」は、文字通りフォントの大きさだ。標準となる大きさに対し、どの程度のサイズで表示するかを%で示している。「h1」なら160%になっている。

「color: #660000; background-color: #ffffff; 」の部分は「背景色の設定」「文字色の設定」と同じ指定のしかただ。「color: #660000; 」の方は文字の色であり、「background-color: #ffffff; 」は背景を何色にするかという設定だ。この場合、文字色はくすんだ赤#660000 、背景は真っ白#ffffff に設定される。

表示スタイルの解説

このごくシンプルな見出し設定の例では、左側のpadding、および左側の枠線の太さ(border-width)の和を常に等しくすることで、どのレベルの見出しも文字が同じ位置から開始されるようになっている。こうすることで、文面に安定感を与える意図がある。

見出しごとのフォントの大きさ(font-size)は「h1」の160%から「h6」の100%まで順に小さくしていっている。そして、「h1」から「h5」までには枠線を設定しているが、概略としては左側の枠線の太さが順次「細くなる」ようになっている。

これらの設定は論理構造を理解しやすくさせるためだ。フォントサイズが大きければ、より上の階層であることが直感的に分かる。左側の枠線の太さを変えているのも、同じように階層の中での位置を直感的に認識させるためだ。なお、一番下のレベル「h6」には枠線を設定していない。レベルが最下位の「h6」なら、これより下の階層があることを示さなくても構わないからだ。

さて、枠線については左側の枠線の太さを順次細くしているほか、設定する位置も変化させることで階層構造をより分かりやすくしている。「h1」「h2」レベルの見出しには、レベルによって太さが変わる左側の枠線のほか、上、右、下にもそれぞれ太さ1ピクセル(1px)の枠線を設定して、ぐるりと見出しが取り囲まれるようになっている。

「h3」については左側と下のみの設定だ。「h4」「h5」については左側のみの設定である。そして「h3」から「h5」までは、枠線の色が順次薄くなるようにしている。これらも階層の順序を分かりやすくするねらいだ。

なお、「h1」「h2」については設定している枠線の太さと位置が同じなので、文字の色、背景の色での区別も同時に行い、違いを分かりやすくしている。

文章コンテンツにおける画像

常時接続が普及したことで、ダイヤルアップ接続が主流であった時代に比べると、平均的なWWW閲覧者の回線は格段に速くなった。しかし、回線速度の向上から、閲覧者が「重たい画像」を許容するようになったという結論を導き出せるわけではない。たくさんのページを開かせたい(読ませたい)場合、ページの「軽さ」は依然として重要な要素である。

また、画像を効果的に使用するには、周囲のテキストとの関係を吟味し、配置方法に工夫を加える必要もある。適切に配置された画像とテキストは、互いに補い合って相乗的な効果を発揮してくれる。

適切な画像

「サクサク開く軽いページ」が快適な閲覧への最短距離だ。どのように加工を加えたところで、画像がテキストよりも重くなりがちなことは変わらない。

例えば「気を失いそうな」字数を詰め込んだこのページの本体(HTMLファイル)はおよそ50キロバイトある。テキストとしては非常に長くファイルサイズも大きい。しかし、写真などの画像はわずか3、4点使っただけで、この50キロバイトというサイズを簡単に超えてしまう。

「禅問答」のようだが、まずなによりも優先すべきは、不必要な画像を載せないことだ。本文のテキストを補強するための最小限に画像を絞り込む作業には、意外に時間がかかる。

さて、掲載を決めた画像については、1点1点を軽くしておくことが不可欠だ。しかし、作業方法は使っているソフトウェア(あるいはデジタルカメラで作業するケースも多いかもしれない)により異なる部分が多い。作業の詳細はそれぞれ使用しているソフトウェアのヘルプや参考書を参照していただくとして、本論では大まかな考え方のみ記述する。

  1. 表示サイズを大きくしすぎない
  2. 美しい「手抜き」-表示サイズの統一
表示サイズを大きくしすぎない

「画面いっぱいに広がる巨大写真」を掲載しているWebページをしばしば見かける。しかし、出来映えに自信があるのでなければ、「大伸ばし」の写真は粗が目立って見苦しいだけだ。歴史ある「タレ流し型画像サイト」で提供される、しっかり加工がなされた画像を見て赤面しないよう、最初は表示サイズを小さめにして様子をみるべきだ。

特に初心者にとっては、表示サイズの小さい画像の方が取り扱いやすい。ファイルサイズを小さくすることが簡単だから、加工の技術がまだ身についていなくても「軽い画像」に仕上げることができる。そして、ページに画像を配置する際にも融通が利くから、レイアウトであれこれ悩む必要も少ない。

さて、もう少し画像の扱いに手慣れてきた場合にも、表示サイズを小さくするメリットはある。考え方は「初心者」の場合とさほど変わらない。まず、失敗した画像もいくらか「ごまかす」ことができる。作業を進めてゆくうち、この「ごまかし」は多用することになりそうだ。

そして、もう少し手が込んできた場合には、表示サイズの割に「質」を落とさず仕上げることで、かっちりした感じを出すことができる。少なくとも個人的にはモヤっとした「大伸ばし巨大写真」よりこちらの方が好みだ。

美しい「手抜き」-表示サイズの統一

こちらも表示サイズを小さめにしておいた方がやりやすい。異なる画像でも表示サイズを揃えておいた方が、ページに落ち着きが出てくる。反対に大小の画像が入り乱れていると、レイアウトが雑然とた印象になる。じっくり内容を読ませたい文章を中心とした「タレ流し型コンテンツ」において、画面の落ち着きという要素は重要だ。問題はどの程度のサイズで統一するかだ。

写真の場合、もっとも一般的な35ミリフィルムから起こしたサイズは短辺1に対し長辺1.5になる。1対1.5の比率で、縦長、横長の2種類を用意するのが無難である。比率はこれで決まるとして、次は実際のサイズをどの程度にするかである。

弊サイトでアクセス解析を設置して調査したところでは、標準的な閲覧者のウィンドウの横幅は700~800ピクセル程度である。他のサイトが公開している同様の調査の結果もさして変わりがないことから、横幅700~800ピクセルという数字を一応の基準としてよかろう。

ただ、この幅を目一杯に使ってしまっては「芸」がない。効果的な画像配置の方法として後述する「回り込み配置」を意識すると、適切な画像の幅はウィンドウサイズの半分までであろう。使いやすくバランスがよいのは300ピクセル前後まで、最大でも画面の半分である400ピクセルまでになる。

手書きHTMLのススメ」を実践する場合、画像の表示サイズ統一にはもうひとつ「うまみ」がある。カナ漢字変換の辞書に画像を呼び出す記述を登録してしまうことだ。

例えば「<img src="test.jpg" width="204" height="136" alt="">」のような記述を「よこ」、「<img src="test.jpg" width="136" height="204" alt="">」のような記述を「たて」という具合に辞書登録してしまえば、ファイル名を変更し代替テキスト(alt)を書き加えるだけで済む。WWWコンテンツ制作における「手抜き道」はいくらでも突き詰める余地がある。

ページに画像を配置する

効果的な回り込み配置

やや小さめに加工した画像を、テキストの左側、あるいは右側に「回り込ませて」配置することは、印刷媒体でも頻繁に使われるレイアウト方法だ。このようなレイアウトは多くの閲覧者にとって「慣れ親しんだ」配置であるといえようが、WWWコンテンツの場合には、印刷媒体よりも一層効果的に機能する。

どうしてもテキストに比べ重たくなりがちな画像は、高速回線を利用していても表示に「もたつく」ことがある。回り込み配置を行っていれば、閲覧者は画像の表示に手間取っている間、隣接して先に表示されているテキストを読んでいればよい。なかなか表示されない画面を見つめじっとしているよりは、格段にストレスを感じないで済む。テキストを読み終えたころには、隣接する画像も完全に表示されていることだろう。

テキストを中心としたコンテンツでは、画像の回り込み配置という手法を活かさない手はない。

画像配置の設定例

文章を中心とした「タレ流し型コンテンツ」においては、文面を美しくする行間の設定が必要不可欠になる。しかし、行間を設定した段落(p)などの要素に画像を配置すると、古いブラウザの「バグ」に苛まれることになる。ここでは画像配置の設定について、これまた「ごく簡単な例」を記述しておく。

スタイルシートファイル(本文で作成してきたのは「bunmen.css」)の記述にもだいぶん慣れてきたと思うが、今回はひとつ覚えていただかねばならないことがある。クラス(class)を指定するということだ。考え方は簡単だが、文章や表示例を示すだけではなかなか捉えにくい。画像配置の設定例を試してゆくなかで、考え方を理解していただこうと思う。

まず、だいぶん内容の充実してきた「bunmen.css」を開き、以下の3行を書き込んでいただきたい。行頭に「.」(ピリオド)が付くのがポイントだ。

.imgleft { float: left; padding: 10px 10px 10px 0px; }
.imgright { float: right; padding: 10px 0px 10px 10px; }
.imgnone { float: none; padding: 10px 0px 10px 0px; text-align: center; }

上記の例では3種類の画像配置を定義している。なんとなく見当が付くと思うが、「float」により回り込みをさせる。その後の「left」は画像を左側に配置して回り込み、「right」は画像を右側に配置する回り込みである。そして「none」は回り込みをさせないときのものだ。

各行の行頭は「クラス」の名前だ。こちらも見当が付くと思うが、「.imgleft」の行は画像(img)を左側(left)に配置して周りにテキストを回り込ませる設定、「.imgright」の行は画像を右側(right)に配置する設定である。「.imgnone」の行は画像の左右にテキストを何も配置しない(none)設定である。

いずれも周りに配置するテキストとくっつかないよう、余白(padding)を設定している。そして、テキストを左右に配置しない場合(none)は画像が真ん中にくるようにする設定「text-align: center; 」を加えてある。

なお、クラス名は分かりやすい別のものに変えることもできるが、この後の説明では読替が必要になる。

HTMLファイルに画像の呼び出しを記述する

では、実際に画像を配置してみる。「test.png」という名前の幅204ピクセル、高さ136ピクセルの画像を配置するとして説明する。

<div class="imgleft"><img src="test.png" width="204" height="136" alt="テスト画像"></div>
<div class="imgright"><img src="test.png" width="204" height="136" alt="テスト画像"></div>
<div class="imgnone"><img src="test.png" width="204" height="136" alt="テスト画像"></div>

上がHTMLファイルの記載例である。CSSファイルで3種類のクラス(class)を定義したが、HTMLファイルで利用するときの指定は「class="クラス名"」のようにする。CSSファイルの記述とは異なり、「.」は外す。そして、これらクラスを指定した<div class="class名">~</div>を行間の設定された要素(本稿の例では段落<p>~</p>)の中に配置してはいけない。

これはダメな例:
<p>ほげほげ
<div class="class名">
<img src="test.png" width="88" height="31"
 alt="テスト画像">
</div>
ごほごほ</p>
これは良い例:
<div class="class名">
<img src="test.png" width="88" height="31"
 alt="テスト画像">
</div>
<p>ほげほげごほごほ</p>

「"test.png"」の箇所はファイル名であり、作成した画像のファイル名に変更する。幅「width="204"」と高さ「height="136"」の部分も作成した画像の幅と高さに書き換える。「alt="テスト画像"」の箇所は「代替テキスト」と呼ばれる、画像が表示されない場合のための記述だ。しばしば使われているような「写真の補足説明」をするためのものではない(補足説明の場合は「title="補足説明の内容"」とすべき)。

しかし、代替テキストとして書き込むフレーズの決め方はなかなか難しい。

ここはどこだ?

手堅い「タレ流し型コンテンツ」を提供するWebサイトでは、訪問者の多くが検索エンジンを経由してやってくる。そして検索エンジン経由の訪問者は、いわゆる「トップページ」から閲覧を開始するとは限らない。

それゆえ、どのページから閲覧された場合にも、そのページがどこのWebサイトのページなのかを分かるようにしておく必要がある。「ホームへ戻る」「表紙」などのフレーズに設定した、スタートページへのリンクは不可欠だ。単純に段落(p)をひとつ使い...

はじめに戻る

のようにしても構わないが、HTMLには連絡先を表示するための「address」という要素が用意されている。しかし、address要素にはem要素と同様、何も設定しないと斜体で表示されてしまうという問題がある。そこでスタイルシートファイルにより、表示を変更する設定をしてやる必要が出てくる。

設定のしかたはem要素のときと同じだ。「bunmen.css」を開き、以下の1行を書き込んでいただきたい。

address { font-style: normal; }

この設定により斜体ではなく通常の書体で表示されるようになる。日本人的な「奥ゆかしさ」を示すためには(笑)、通常よりも少し小さな文字サイズにした方がよいかもしれない。例えばaddress要素のフォントサイズを通常の90%にするとすれば、以下のようになる。

address { font-style: normal; font-size: 90%; }

こんな具合だ。筆者の場合このaddress要素のなかに、電子メールアドレスと制作した各コンテンツへリンクしたページのアドレスhttp://anadolu.areastudy.net/を記載している。

まとめ

ここまで一連のセクションでは、「bunmen.css」という名前のスタイルシートファイルを順次作成してきた。項目ごとの説明で分かりにくくなってしまったかもしれないので、ここまで説明したすべての設定を盛り込んだ状態のサンプルを示しておく(選択肢を設けて説明した箇所は修正が必要なこともある)。

スタイルシートファイルを利用することにより、論理構成を検討、記述するHTMLファイルの内容はすっきりしたものになる。そして、HTMLファイルが複数あったとしても、スタイルシートファイルは1枚で済んでしまうから更新は簡単であり、コンテンツの主役である文章作成により多くの時間を割ける。文章好き、活字好きには、「手書きHTMLのススメ」より解説してきた一連のWebページ作成方法は打ってつけである。

CSSファイル中では、「/*~*/」の間にコメントを記述できる。

/*背景色と基本の文字色*/
body { color: #333333; background-color: #f5f5f5; }

/*段落の行間字間*/
p { line-height: 168%; }
@media all { p { letter-spacing: 0.1em; }}

/*強調*/
em { font-style: normal; font-weight: bold; }
strong { color: #cc0000; background-color: #ffffff; }

/*見出し*/
h1 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 20px; border: solid #993333; border-width: 1px 1px 1px 40px; font-size: 160%; color: #993333; background-color: #cccccc; }
h2 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 20px; border: solid #660000; border-width: 1px 1px 1px 40px; font-size: 140%; color: #660000; background-color: #ffffff; }
h3 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 40px; border: solid #666666; border-width: 0px 0px 1px 20px; font-size: 130%; }
h4 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 50px; border: solid #999999; border-width: 0px 0px 0px 10px; font-size: 120%; }
h5 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 55px; border: solid #cccccc; border-width: 0px 0px 0px 5px; font-size: 110%; }
h6 { margin: 10px 0px 10px 0px; padding: 4px 10px 2px 60px; font-size: 100%; }

/*画像配置*/
.iml { float: left; padding: 10px 10px 10px 0px; }
.imr { float: right; padding: 10px 0px 10px 10px; }
.imn { float: none; padding: 10px 0px 10px 0px; text-align: center; }

/*連絡先*/
address { font-style: normal; font-size: 90%; }

なお弊サイトでは、ここまで一連の作業+αで、ある程度見映えのするファイルを作成できるよう、ページサンプルを用意している。ページサンプルはareastudy.netで配布している。


2003.11.7