Web制作のヒント

CSSで複数の背景画像を使って、おしゃれなフレームを作ろう!

backgroundプロパティで複数の背景画像を指定し、おしゃれなフレーム(囲み枠)を作る方法をご紹介します。

1. フレームをデザインする

イラレやフォトショなどのグラフィックソフトでフレームをデザインします。

2. パーツごとに分ける

上、下、中の3つのパーツに分けましょう。
中のパーツは縦方向に繰り返しますので、連続で画像が表示されても違和感がないように切り出しましょう。

ファイル名とファイル形式は何でも構いません。
僕の場合は

上を「frame_bg_head.jpg」
中を「frame_bg_body.jpg」
下を「frame_bg_foot.jpg」

というファイル名を付け、JPEG形式で書き出しました。

これで画像の準備ができました。

3. HTMLでテキストを用意する

次は、フレームの中に入れるテキストを用意しましょう。

htmlファイルに次のコードのようにテキストをpタグで囲み、さらにdivタグで囲ってクラス名を「box」とつけました。

ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。

4. CSSで上のパーツを読み込む

次は、cssファイルに先ほどのboxというクラスにスタイルを指定していきます。

まずは、フレームの幅を指定します。

box{
	width: 360px; /*画像と同じ幅を指定*/
}

そして、上のパーツだけを読み込んでみましょう。

background-imageで上のパーツの背景画像を読み込みます。

background-repeat: no-repeat;で背景の繰り返しは無しに、background-position: top center;で背景の開始位置は上の中央にします。

box{
	width: 360px;
	background-image: url(../images/frame_bg_head.jpg); /*背景画像を見込む*/
	background-repeat: no-repeat; /*繰り返しを指定*/
	background-position: top center; /*廃止位置を指定*/
}

うまく読み込まれると次のようになります。

5. 複数の画像指定で、他のパーツを読み込む

background-imageでは、複数の背景画像を読み込むことができます。

後ろに「,(カンマ)」で区切ることで2枚以上の背景画像を読み込めます。
画像の重なり方は、先に読み込んだ画像が上の方に、後から読み込んだ画像が下の方に配置されます。

他のbackground-repeatやbackground-positionも同様に「,(カンマ)」で区切ってやれば、読み込んだ背景画像の順番でスタイルを指定することができます。

html{
	width:360px;
	background-image:
		url(../images/frame_bg_head.jpg), 
		url(../images/frame_bg_foot.jpg), /*下のパーツ画像を読み込む*/
		url(../images/frame_bg_body.jpg); /*中のパーツ画像を読み込む*/
	background-repeat: no-repeat, no-repeat, repeat-y; /*下と中の繰り返しを指定*/
	background-position:top center, bottom center, center center; /*下と中の開始位置を指定*/
}

はい、残りの画像も読み込めました。

ただ、フレーム内のテキストが枠くっついているので、paddingで余白を作りましょう。

padding: 50px;で上下左右の余白を50pxにしました。

このとき、幅からpaddingで指定した左右の余白分を引く必要があります。

この場合は、360pxから左右の余白の合計値である100pxを引いて260pxにします。

html{
	width:260px; /*paddingの左右の余白分引く*/
	background-image:
		url(../images/frame_bg_head.jpg), 
		url(../images/frame_bg_foot.jpg),
		url(../images/frame_bg_body.jpg);
	background-repeat: no-repeat, no-repeat, repeat-y;
	background-position:top center, bottom center, center center;
	padding:50px; /*上下左右の余白を作る*/
}

はい、これで完成です!

ぜひ皆さんも試してみてください!

ABOUT ME
こくてん
このサイトの管理者です。 夢は働かずに自分の好きなことができる日々を送ること。 記事はあまり書かないほうですが、よろしくお願いします。

COMMENT

メールアドレスが公開されることはありません。