にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

ボックスの右端で縦方向にだけ背景画像を並べるCSS [イメージ,ボックス]

ページやボックスの背景を装飾したいとき、「ボックスの右端だけに、縦方向にずらっと任意の画像を並べる」というデザインもスタイルシートを使えば簡単に作れます。例えば、下記のボックスには、右端だけにうさぎマスコットが縦方向に繰り返し表示されています。

こんな感じで、ボックスの右側にだけ、縦方向に背景画像が並びます。→
ここでは、うさぎマスコットの画像を並べています。
この例示用のボックスはあまり大きくないので、そんなにたくさんは並ばないでしょうけども。
ちなみに、このうさぎマスコットは「具満タンWEB」の有料画像素材から入手したイラストです。この個人サイト内だけでなく、私がAll Aboutで執筆した解説記事のサンプルページなどでもよく使っています。(これは完全に余談ですが。^^;)

上記のサンプルのように、右端で縦方向にだけ背景画像を並べるには、以下のような感じでスタイルシートを書きます。

div.sample {
   background-image: url("rabbit.gif"); /* 背景画像 */
   background-repeat: repeat-y;         /* 縦にだけ並べる */
   background-position: right top;      /* 右上から描画 */
}

※上記のソースは、sampleクラスが付加されたdiv要素(<div class="sample">~</div>)を対象に装飾する場合の記述です。ページ全体を対象にするなら、body要素に対してスタイルを記述します。

ここで使っている3つのプロパティの意味は、以下の通りです。

  • background-imageプロパティで背景画像を指定。
  • background-repeatプロパティで、背景画像の繰り返し方向を指定。値に「repeat-y」を指定すれば縦方向にだけ繰り返されます。(「repeat-x」を指定すれば横方向のみ。)
  • background-positionプロパティは、背景画像の表示開始位置を指定します。値に「right top」と指定しているので「右上」から表示が始まります。

ちなみに、background-positionプロパティの値には「right bottom」や「right center」と書いても右端の縦方向に並びます。上下方向で基準になる位置が、top(上端)になるか、center(中央)になるか、bottom(下端)になるかの違いだけです。指定する背景画像に応じて、どれが最も望ましい表示になるか試してみて下さい。

背景画像と文字が重ならないようにする

先ほどのサンプルだと、文章量が長い場合にはボックスの右端で背景画像と文字が重なってしまっています。これを解消するには、padding-rightプロパティを使って、ボックスの右端に「内側の余白」を設ければよいでしょう。

ここで使っているうさぎマスコット画像の横幅が42ピクセルなので、とりあえず50ピクセルほど余白を設けてみます。以下のようにCSSソースを記述します。

div.sample {
   background-image: url("rabbit.gif");
   background-repeat: repeat-y;
   background-position: right top;
   padding-right: 50px; /* 右端の(内側の)余白 */
}

すると、先ほどのサンプルは、以下のように表示されます。

今度は、ボックス右端の内側に(背景画像として指定している画像の横幅よりも大きな値で)余白を設けているので、文字と背景画像が重なることはありません。改行のないながーい文章を書いても、背景画像と接する前に、自動的に改行されて表示されます。このボックス内では、この文章が(右端に表示されている)うさぎマスコットに到達するよりも前に自動改行されているように見えるはずです。

というわけで、ボックスの右端だけに背景画像を縦方向に並べる方法の解説でした。
まあ、右端にだけ縦方向に背景画像を表示する需要があるのかどうかは分かりませんが……。(^_^;)

なお、background-positionプロパティを書かなければ、背景画像は「左上」から描画されるので、背景画像は左端にだけで縦方向に並びます。(もしくは、background-positionプロパティに値「left top」などを指定して明示的に左上から描画されるよう指定しても同じです。)

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---