すでにHTMLを利用する方にとって、スタイルシートを使ったデザインに移行することは、作業のやり方を根本的に変更することを意味します。しかしながら、スタイルシートへの移行は、もちろん、最初は戸惑うことを否定するものではありませんが、慣れてくればテーブルタグを使うよりも、ずっと効率的にデザインしていくことができることに気付けます。HTMLがより分かりやすいものになるばかりか、オーサリングソフトも必要なくなります。概要を理解できるよう、大まかな技術説明を含み、デザインの手法を学びます。

スタイルシートへの考え方

　まずは、スタイルシートの移行を検討する段階にあることから察して、すでにスタイルシートがデザインをするのに便利な道具であること、もしくは多くの方が利用することからも標準採用されるほどのものであることは理解しやすいと思います。しかし、実際の技術的な内容ともなれば、細かく理解するのは、何やら大変ではないかと勘ぐりたくなることもあるでしょう。本稿では、ホームページの上部にあるメニュー部分を作り込んでいくことを例に説明します。

テーブルタグを使った上部メニューの作り

　旧来のやり方をおさらいです。メニュー部分を制作します。背景を含め、全体をメニュー・ボタン部分も一緒に作り込み、見た目のレイアウトが決まれば、FireworksやPhotoshopといった画像制作ソフトなら、ボタンとして機能するよう、一緒に指定も行います。マウスがボタン部分に移動した際、色が変わるような仕掛けを併せて指定することも多いでしょう。最後は、画像とHTMLの書き出しを行い、書き出したHTMLを元にホームページへ組み込む流れです。複雑なテーブルタグと多くの画像が書き出されるとはいえ、DreamweaverやFireworksといった組み合わせなら意識することも少なくなっています。

スタイルシートを使った上部メニューの作り

　スタイルシートでは上述のテーブルタグと同じ作りのものを用意するとき、画像を制作するのは変わりません。しかし、背景だけを先に作り込み、ボタンは別途制作することになります。一見、複雑に感じるかもしれませんが、背景が1枚だけの画像に対して、ボタン画像を配置していくことになるので、たくさんの画像に分かれることもなくなり、すっきりとしたレイアウトができることに気付くはずです。HTMLは自身で書かなければならないというよりも、簡単に書けるのでオーサリングソフトを使う必要がなくなります。背景とボタンの分だけ画像を作り、後はHTMLを書き、スタイルシート側にも対応する記述を書きます。後に共通で使える例を示しますが、多くの場合、一度感覚をつかめば、後は同じものをコピーして使えるので、毎回のようにHTMLやスタイルシートを書かなくとも済みます。

覚えないといけないこと

　がらりと変わる、レイアウトのやり方については全体を学ぶ必要があります。多くのことに目を向けるべきですが、実際の作業に必要なことは実に簡単なことで、どちらかといえば、新しいことを学ぶというよりも本来使っていたものをもう一度使う感覚です。オーサリングソフトが必要ないので、HTMLやスタイルシートを直接書くことに対して抵抗感もあるでしょうが、同じものを何度もコピーして使えるということに注目してください。最初は例をコピーして使っていき、慣れた頃には工夫をしていくというのが良いでしょう。

画像の作り方

• 背景は1枚の画像として作る
• 必要な項目分のボタンを作る

　すでに画像作りは普段から実践されていることと思うので、簡単にまとめます。留意すべき点として、まずは、背景画像が1枚にまとめられる点です。旧来は複数に分割していましたが、今や分割することのメリットはほとんどありません。1枚にまとめてスタイルシートから呼び出すことで余計な指定を何度もやらなくとも済みますので、元の画像も1枚にまとめようということです。後は、ボタン画像を必要な項目分だけ作ることになります。

HTMLの書き方

• リストタグを使う
• DIVタグを使う

　リストタグは本来、箇条書きなどを行う際に用いるものです。メニューの場合、一覧から選ぶことになるので、スタイルシートを使わない環境の人を意識して、一覧用のリストタグを使います。項目が増えたとしても、簡単に追加することができます。また、DIVタグを使うのは、背景画像を埋め込むために必要なためです。以下に基本的なHTMLの例を示します。実際にはもう少し複雑なものになりますが、大事な部分だけを抜き出してみました。

　項目部分が1行で記述されているのは分かりますか。新しい項目を増やしたいときは、コピーしていくことで簡単に増やせますが、「id="top1"」となっている部分を別の番号に置き換えなくてはなりません。以下の例なら、新しく増やしたものは、「id="top4"」とすれば良いでしょう。「id」というのは、スタイルシートを呼び出すために用いる、呼び出し記号になります。好きなものが付けられるとはいえ、分かりやすいものを用いたいところです。

　なお、スタイルシートを呼び出すための記述が別途必要になります。多くの場合、例をコピーすれば済むでしょう。

スタイルシートの書き方

　一方、スタイルシートは、今回一番難しい部分になると思われます。少し量は多いのですが、あえて挙げてみることにしました。以下の例だと全部で7つの指定があります。1度の指定で複数の指定もできるので、実際には「ul li a,ul li a:link,ul li a:visited」のような「,」で区切った書き方もできます。解析や探検といった気持ちで見ていると、分かりやすいです。

　「div#header」では、指定した部分の場所取りをやります。背景画像を敷き詰めるのに、横幅が足りないと途中で背景が終わってしまうからです。例では、横幅 1000px、縦幅100pxとなっています。それぞれ、「width」、「height」に対応します。次に、「padding」というのは、上下左右に余白を入れる指定です。例の通りならば、上に10px、右に20px、下に30px、左に40pxを空けます。最後に、かなめである背景画像の指定です。場所の指定は「background-image」で、繰り返しの指定を「background-repeat」で行います。繰り返しの指定とは、今回の場合大きな画像を1枚だけ敷き詰めるので意味はないとも言えますが、小さな画像を敷き詰めるときに、縦や横だけに繰り返すといった指定ができます。

　「ul」は、「ul li」となっています。意味するところは、「ulタグの配下にあるliタグのみで有効」という意味です。「margin」は、余白なのですが、今回の場合、要素となる部分の右側に、空白を5px追加ということになります。「padding」だと内側、「margin」だと外側という意味になります。指定の要点となるのが「float」です。左側に寄せる、という意味になり、箇条書きだと改行して表示されますが、floatを指定することによって改行を無効にできます。

　「ul li a,ul li a:link,ul li a:visited」は、「ulタグ配下のliタグのさらに配下のaタグのみで有効」という意味です。ボタン画像を配置するので場所を確保するために、横幅100px、縦幅28pxを指定しました。ちなみに、「ul li a」の条件に見合うものは、すべて適用になります。今回の前述、HTML内であれば、3つの項目すべてに対して有効です。しかし、ボタンの画像は共通だと、みんな同じボタンということになってしまいますから、後に続く、3つの指定があります。

　後に続く3つの指定とは、「ul li#top1 a」と「ul li#top2 a」と「ul li#top3 a」のことです。背景画像を指定しています。

　最後は、「ul li a span」です。上述のHTMLでは、リンク指定のaタグの内側へ、spanタグがあります。spanタグの場所が確認してください。スタイルシートでは、「display」が「none」となっており、要するに表示しないということです。spanタグの有効な部分は文字だけです。要するにHTMLとしてだけ表示させるならば、文字が表示されます。一方でHTMLとスタイルシートを使った表示の場合は、文字が表示されず、代わりにボタン画像が表示されるというわけです。

　以上がスタイルシートの基本的な流れになります。普段は上述のようなものをコピーして利用するんだと覚えてください。