カスケーディングスタイルシート（CSS）は、ウェブ開発者にページのタイポグラフィとレイアウトを正確に制御することを可能にします。CSSベースのデザインの秘密兵器の一つは、
背景
Web ページ上の任意の要素の背景に画像と色を追加するプロパティです。
リンクや箇条書きリストなどのスタイル設定にクリエイティブなツールボックスが開かれます。HTMLでは背景画像が自動的に縦横に並べて表示されるため、時に奇妙なパターンになってしまうことがありますが、CSSではデザイナーが背景画像の配置とタイリングを正確に制御できます。例えば、グラフィックを一度だけ表示したり、縦に並べて表示したり、ページをスクロールしても画面上に表示されたままにしたりといった設定が可能です。
背景の背景
その
背景
プロパティは実際には4つの異なるプロパティです。これらを長い形式で表現すると次のようになります。
body { background-image: url(images/watermark .gif); background-repeat: no-repeat; background-position: center top; background-color: #FFCC00; } URL
背景画像
プロパティは、ブラウザにインターネット上のファイル（この場合はwatermark.gif）を検索するように指示します。ファイルパス（
画像/
）をそのグラフィックに追加します。これは、背景に画像を配置するために必要な唯一のプロパティです。
HTMLとは異なり、CSSコードでは画像へのパスに引用符を使用しません。引用符の使用は許可されていますが、Mac版Internet Explorer 5では引用符で囲まれた画像を見つけることができません。
タイル 張り
背景繰り返し
プロパティは、グラフィックをタイル表示するかどうか、またはどのように表示するかを制御します。グラフィックを一度だけ表示したい場合は、
背景繰り返し: 繰り返しなし
グラフィックを縦に並べるには（ページに興味深いグラフィックサイドバーを追加するのに最適な方法です）、
繰り返しなし
と
繰り返し
グラフィックを水平に並べるには、
繰り返しx
このプロパティを除外すると、画像は垂直方向と水平方向に並べて表示されます。
 |
自分だけの箇条書き CSS を使用すると、画像をカスタムの箇条書きとして使用できます。 |
位置
背景位置
プロパティは、グラフィックがページ上のどこに表示されるかを定義します。このプロパティには、スペースで区切られた2つの値が含まれます。最初の値は水平位置（左、中央、右）を制御します。2番目の値は垂直位置（上、中央、下）を制御します。CSSでは、ピクセル値を使って位置を定義することもできます。例えば、グラフィックをページの左端から20ピクセル、上端から100ピクセルの位置に配置したい場合は、次のように入力します。
背景位置: 20px 100px
。
カラー
背景色
プロパティを使用すると、ページや段落、サイドバー、バナーなどの別のページ要素に色を追加できます。
ショートカットを使う これらのプロパティは頻繁に一緒に使用するため、入力量が多くなる場合があります。ありがたいことに、4つのプロパティを1つのプロパティにまとめるショートカットがあります。例えば、前の例を次のように書き換えることができます。
本文 {背景: #FFCC00 url(images/ watermark.gif) 中央 上 繰り返しなし}このショートカットを使用する場合、プロパティの順序が重要です。プロパティは常に、色、グラフィックへのパス、水平配置、垂直配置、タイリングオプションの順にリストされている必要があります。
箇条書きをカスタマイズする
興味深い使い方の一つは
背景
プロパティの目的は、従来のHTMLの外観を変更することです。Webページ上のリストを際立たせる黒い丸や四角に飽きていませんか？退屈な箇条書きを削除し、独自のグラフィックを追加してみませんか（「自分だけの箇条書き」を参照）。
まずは再定義することから始めましょう
ウル
（ 順序なしリスト） タグはリストを制御します。CSSドキュメントに次のように入力します。
ul { リストスタイルタイプ: なし; パディング左: 0; マージン左: 0; }  |
訪問済みリンクにチェックマークを付けることで、読者がどこに行ったかを示します 。 |
これにより、まっさらな状態になり、ブラウザがリストに適用する可能性のあるインデントが排除されます。
これで箇条書きを追加する準備が整いました。（箇条書き画像をお持ちでない場合は、こちらをクリックして無料の箇条書き画像を入手してください。）この例では、CSS ファイルと同じディレクトリに mybullet.gif という画像があると仮定します。
HTMLでは、リスト内の各項目は
李
タグ。外観を変更するには、スタイルシートに以下を追加します。
li { 背景: url(mybullet.gif) 左中央 繰り返しなし }さて、
李
タグがポップアップすると、ブラウザは画像をリスト項目の左端に配置します。箇条書きの位置をより正確にするには、
左中央
ピクセル値を使用します。
この時点で、各リスト項目のテキストは箇条書きのすぐ上に表示されます。少し余裕を持たせたい場合は、箇条書きの左側にパディングを追加してください。
李
項目の幅を調整します。例えば、グラフィックの幅が10ピクセルの場合、パディングは15ピクセルで十分です。リスト項目が密集しすぎている場合は、上または下の余白を増やします。最終的なルールは次のようになります。
li { background: url(mybullet.gif) 左中央 繰り返しなし; padding-left: 15px; margin-bottom: 10px; } リスト項目をチェックする
HTMLでは、ページ上のリンクをクリックした際にそのリンクの色を変更できます。しかし、CSSを使えば、さらに多くのことが可能になります。例えば、ウェブサイトに特定のタスク（例えばTigerへの移行前にやるべきことなど）を扱うページが複数あるとします。どのページが既に読まれているかを分かりやすく表示したいとします。もちろん、アクセス済みのリンクの色を変更することもできますが、明確な視覚的な手がかりを提供するために、チェックマークを使うのはいかがでしょうか？CSSを使えば、
背景
プロパティでは、できます（「Been There」を参照）。
このトリックは、CSS用語で 擬似クラスと呼ばれるものを利用しています。 リンクに関連する擬似クラスは4つあります。
a:リンク
、
a:訪問した
、
a:ホバー
、 そして
a:アクティブ
それぞれがリンクの異なる状態を示します。この例では、
a:訪問した
訪問済みのリンクに適用されるので、まずはすべてのリンクを少し美しく整えてみましょう。次のように入力します。
a { テキスト装飾: なし; 色: #333; 右パディング: 13px; } このオプションの手順では、各リンクから下線を削除します (下線があるとデザインが乱雑になる可能性があります)。リンクの色を定義し、リンクの右端に少しパディングを追加します (チェックマークのグラフィックを表示するため)。
次に、訪問したリンクの新しいルールを作成します。
a:visited { background: url(チェックマーク .gif) 右中央 繰り返しなし }この場合、チェックマークはリンクの右側に表示されますが、代わりにリンクの左側にスペースを追加することもできます。
右
に
左
このルールでは。
創造力を働かせよう
段落、見出し、またはHTML要素によって制御される項目など、あらゆるHTML要素に背景画像を追加できるため、
分割
タグを使用すると、複数の画像が配置された複雑なページを簡単に作成できます。
ファイルマーカーを作成する
独自の箇条書きを作成したら、リスト項目ごとに異なる箇条書きを作成することで、プロセスをさらに進めることができます。例えば、ダウンロードするファイルのリストを表示する場合、各項目のファイルの種類（PDF、Word、Excelなど）を示すアイコンを作成すると便利です。
これを設定するには、パーソナライズされた箇条書きを作成する手順に従ってください。
ウル
タグを使ってパディング、マージン、箇条書きを削除します。次に、すべての項目に汎用CSSルールを追加します。
李
タグ:
li { background: url(bullet.gif) 左中央 繰り返しなし; padding-left: 20px; margin-bottom: 10px; } 次に、一般的な箇条書きのグラフィックを、リスト項目の種類ごとに適切な画像に置き換える追加ルールを作成します。例えば、PDFの箇条書きを作成するには、次のように入力します。
li.pdf { 背景画像: url(pdf.gif); } 作成する箇条書きの種類ごとにこれを繰り返します。
新しいリストを作成するときは、各リスト項目に適切な箇条書きの種類を指定します。例えば、PDFにリンクするリスト項目のHTMLは次のようになります。
 |
箇条書き、汝自身を知れ これらの箇条書きは、リスト項目がどのような種類の文書であるかについて読者にヒントを与えます。 |
<ul> <li class="pdf"><a href="brochure.pdf">パンフレット</a></li> </ul>
CSS の最新情報
CSSにまだ触れていないという方のために、簡単に始める方法をご紹介します。お気に入りのテキストエディタでWebページを開き、カーソルを
</head>
終了タグに次のように入力します。
<スタイル タイプ="text/css"></スタイル>
次に、 開始 （
<スタイル>
）と閉じる（
</スタイル>
) タグ。
[ David Sawyer McFarland は 、『Dreamweaver 8: The Missing Manual』 (O'Reilly、2005 年)の著者です。 ]
