CSSでWebページの背景画像を指定する

文:John Lee(TechRepublic)  翻訳校正:原井彰弘
2008-02-07 18:30:00
  • このエントリーをはてなブックマークに追加

コンテンツボックス

 今や非常に有名になっているウェブデザインがもう一つある。角が丸く表示されるコンテンツボックスだ。テーブルを用いて作成する方法もあるが、そのようなその場しのぎの方法よりもすぐ作成できて簡単なのは、背景画像を使用する方法だ。ここでは、ダウンロードした画像ファイル「boxtop.gif」と「boxbottom.gif」を使用する。CSSのルールを用いて、タグにそれらのボックスを構成する要素を貼り付けるのである。

 では、まずルール「box」をクラスとして宣言することから始めよう(リスト4)。クラスとして宣言するには、名前の手前にドットを入力すればよい。そして、背景の属性を以下のようにコーディングする。

リスト4



CSS Backgrounds
 


Chapter One

”Now Beowulf bode in the burg of the Scyldings, leader beloved, and long he ruled in fame with all folk…”


This link will open a new window.

 boxルールのwidth属性は、2枚の画像の幅と一致するように設定を行う。つまり、この設定でボックス内のコンテンツが背景の画像よりも広がらないようにするのだ。また、背景色のカラーコードは、bodyタグに指定したグラデーションの場合と同様に、背景画像の色と一致するように指定する。そして、最後の2つの属性「repeat」および「position」では、背景画像がX軸方向にもY軸方向にも連続しないようにし、コンテンツの左下の端に常に表示されるよう指定を行っている。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]