スタイルシートの技

スタイルシートでのレイアウトを紹介しましたが、サイトを作っていく上で必要になるであろうテクニックを紹介します。

セレクタの技

セレクタ（selector）というのはスタイルの適用対象のことで、いろいろな指定方法がありますが、このセレクタを正しく理解していないと思い通りのデザインができません。
ここでは代表的なセレクタを紹介します。

１つ目はタイプセレクタで、要素名とそのままセレクタとして使用します。
「スタイルシートの補足」で、td要素に対してスタイルを設定しましたが、すべての要素をセレクタとして使用できます。
スタイルシートの補足でも説明しましたが、当サイトのcommon.cssの初めの方にbody要素に対して 背景色、背景画像、フォントの設定をしていますので、確認してみて下さい。

２つ目はIDセレクタで、特定の要素を識別します。
「スタイルシートによるレイアウト」で、id="ボックスの名前"としましたが、このように属性として要素に加えておきます。
スタイルの設定は、このID名の前に"#"を付けて設定します。
特定の要素を識別するためのものなので、ID名は同ページ内で重複してはいけません。
逆に、同ページ内で何回も使い回ししたい場合はclass属性を使います。
これが３つ目のセレクタで、クラスセレクタと言います。
スタイルの設定は、クラス名の前に"."を付けて設定します。

４つ目はユニバーサルセレクタで、アスタリスク(*)を使い、すべての要素に適用します。
それぞれ以下のように記述します。

body { スタイル }
h1 { スタイル }
#header { スタイル }
.list { スタイル }
* { スタイル }

あとは、これらのセレクタを組み合わせることで、目的の適用範囲を決定します。
当サイトでのリンクの設定は、基本的に「青い文字」と「下線」ですが、左側のメニューは下線を消しています。これは以下のように設定しているためです。

#menu li a { text-decoration: none; }

メニューは各ページに１つだけなので、IDセレクタを使っています。上記のように、#menu、li、aを並べることで、メニューの中のリスト要素のリンクに対して文字装飾を非表示にしています。
これも当サイトの例ですが、この文章の何行か上に、斜線の背景画像で「スタイルシートの技」と書かれた部分と、黄色の背景色で「セレクタの技」と書かれた部分も、それぞれh1、h2の見出しで記述しているだけですが、以下のようにスタイルを設定しているため装飾されています。

#contents .content h1 {
　padding: 3px;
　margin: 10px;
　border: thin solid #0000FF;
　background-repeat: repeat;
　font-size: 18px;
　background-image: url(../images/bg2.gif);
}

このh1に対しての設定は、抜粋ではなく実際に設定しているスタイルです。ソースを確認してみて下さい。なお、h2の設定は、h1より多いので割愛します。

セレクタを適切に指定することがデザインの第一歩です。
目的のデザインを実現するためにも、セレクタの組み合わせ方を会得して下さい。

ページトップへ

リストの技

当サイトでもそうですが、スタイルシートを使っているサイトのメニューは主にリストを使っています。 タグでリスト項目の定義やリンクの設定をし、スタイルシートでリストの並びや装飾を設定します。
以下のように、<ul>でリストを作り、<li>でリストの項目を作ります。サンプルソースをクリックするとサンプルが表示されます。

<ul>
　<li>ザク</li>
　<li>ズゴック</li>
　<li>ゲルググ</li>
　<li>ジオング</li>
</ul>

リストのサンプルソース

表示されたサンプルの通り、<ul>でリストをそのまま表示させると行頭記号付きの箇条書きリストとなります。リンクの設定もしてありますが、リンク先は"#"で省略してあります。
さて、一般的なサイトはこのリストをどのようにメニューにしているのでしょうか？
もちろんスタイルシートで見栄えを整えているのですが、設定の方法を以下に示します。

・行頭記号を消す
・各行をボックスとし、枠線や背景を設定する
・各行を縦や横に並べる

スタイルの設定手順

このページの左側にあるコンテンツメニューがこの手順で表現されています。
上部にあるグローバルメニューもそうなのですが、さらに背景画像を指定しています。
ではこのリストに対するスタイルのサンプルを以下に示します。スタイルサンプルをクリックするとスタイルが適用されたサンプルが表示されます。

ul {
　list-style-type: none;
}
li {
　width: 80px;
　border: 1px solid #000000;
　text-align: center;
　float: left;
　background-color: #CCCCCC;
}

リストに対するスタイルのサンプル

サンプルでは幅を80にし、実線で枠を囲み、枠の中で文字を中央寄せし、リスト項目を左から順に並べています。せっかくなので背景色も設定しました。
何となくメニューっぽくなりましたね。
こんな感じでサイトのパーツを作っていきます。

ページトップへ

リンクの技

リンクで<a>タグを使うのはすでにご存知かと思いますが、この<a>タグにもスタイルを設定してみましょう。
もう一度リストのサンプルを対象にします。
リストのサンプルでリンクの設定がしてありましたが、リンクの対象はもちろん文字でした。
当然文字で反応するのですが、一般のサイトにあるメニューを思い出すと、文字がある領域に入った段階で反応するのが一般的です。
リストのサンプルも文字で反応するだけですので、スタイルシートの設定で一般的なメニューに近づいてみましょう。
先ほどのスタイルの設定で、liに対しては以下のように変更します。

li {
　width: 80px;
　float: left;
}

liに対するスタイルの変更

リスト項目の幅を指定し、横並びにするだけにし、 あとは<a>タグに対するスタイルで表現します。
リンク対象を文字ではなく、文字を囲む範囲全体を対象とするために、ブロック要素として表示されるように指定するのがポイントで、以下のようにスタイルを設定します。サンプルをクリックすると、スタイルが適用されたサンプルが表示されます。

li a {
　display: block;
　color: #000000;
　text-decoration: none;
　text-align: center;
　padding: 3px 0;
　background-color: #00FF00;
　border: 1px solid #000000;
　font-family: Arial, Helvetica, sans-serif;
}

リストのリンクに対するスタイルのサンプル

a要素のdisplayプロパティをblockにすることで、リンク領域がli要素のコンテンツ領域の幅いっぱいまで広がります。これで文字を囲む領域全体がリンク対象となります。
文字に対する設定が多いのですが、ボックスモデルにおいて余白と枠線の設定をし、背景色を設定しています。
font-familyというのは、表示するフォントの設定なのですが、サイトを閲覧するパソコン環境によってインストールされているフォントが統一されている訳ではないので、表示に使用したいフォントを記述します。familyというだけあって、色々なフォントを書き並べても構いません。
ただ、どれだけ書き並べてもパソコンにそのフォントが１つも無かった場合、ブラウザーが対応するフォントを自動的に選んで表示できるように一般名も記述しておきます。
sans-serifが「ゴシック体」の一般名で、serifが「明朝体」の一般名です。
さらにメニューっぽくなりましたね。

ここで、もう一度一般的なサイトのメニューを思い出して下さい。
このサイトもそうなのですが、マウスが重なった部分のメニュー項目を変化させているサイトをよく見かけると思います。
その場合、a:hoverを使い、以下のスタイルの設定を追加します。

li a:hover {
　background-color: #00CC00;
　color: #FFFFFF;
}

リンクのマウスオーバーに対するスタイルのサンプル

マウスを重なったら背景色を濃い緑にし、背景が濃いため文字色を白色にしています。
背景と文字色しか設定していないのにa要素に設定したスタイルが適用されています。
これは「スタイルが継承された」といいます。逆に継承されたくない場合でも継承されてしまうので、その時は継承されたスタイルを指定し直して上書きします。

うまく動作できましたでしょうか？
ここまで設定すれば、実際のメニューとして使えると思います。

ページトップへ

2009/03/27