まんぷく::はてなガイド草稿

ページ全体の見栄えを変えてみよう2~背景画像

背景に画像を表示するスタイルシート

次に、ページ全体の背景に画像を表示させてみましょう。

「ページ全体」を指すセレクタは「body」です。そして、背景に画像を表示するには、「background-image」というプロパティに、値として画像のURLを指定します。

ここでは、「http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif」というURLにある画像を、ページの背景に表示してみます。

この場合、スタイルシートの指定は次のようになります。

body{background-image:url("http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif");}

「body」セレクタには、すでにid:manpukuya:20030127#p2で背景色を指定しています。ここに「background-image:…;」の指定を追加するために、次のように書き換えます。

body{background-color:#d5dbff;
background-image:url("http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif");}

スタイルシートを書き換える方法も、すでに説明しました。id:manpukuya:20030127#p2の手順に従って、はてなダイアリーの設定画面にある「スタイルシート」欄に、上のように入力しましょう。

表示結果は、次のようになります。

ページ全体の背景に、画像が表示されました。

ここで登場したプロパティ

要素の背景画像を指定するプロパティ
background-image
url("画像のURL")、または「none」(背景に画像を表示しない、という指定)
background-imageプロパティに値を指定しなかったとき
「none」を指定したものとして扱われる

1つのセレクタに、複数のプロパティを指定するときは「;」でつなぐ

上のように、「body」セレクタに複数のプロパティを指定するには、「プロパティ:値;プロパティ:値;…」というように、「;」(セミコロン)でプロパティの指定を結びます。

スタイルシート内の空白や改行はいくら入れても同じ

上のスタイルシートでは、背景色の指定(「background-color:#d5dbff;」)でいったん改行してから、背景画像を指定しています。

これは、見やすくするために改行しただけで、プロパティの指定ごとに改行するといったきまりはありません。

「body{background-color:#d5dbff;}」というスタイルシートならば、「body」「{」「background-color」「:」「#d5dbff」「;」「}」といった単位で、改行や空白(半角スペース)をいくらでも入れることができます。

改行や空白があってもなくても、ブラウザは同じスタイルシートとして解釈してくれます。

たとえば下のような書き方でも、上で書いたスタイルシートと同じ指定として扱われます。

body{
     background-color:
     #d5dbff;
     background-image:
     url("http://d.hatena.ne.jp/dav/guide/images/css/body_back.gif");
}

あとから読み返しやすくするために、スタイルシートにはある程度改行を入れておくとよいでしょう。