ブログ練習帳

ひとつの背景画像使いまわし！！角丸もOK

これ、両方同じ画像が背景

上の画像みてくらさい。大きいボックスと小さいボックスがあります。こういうのって、この角丸のボックスの中にテキスト入れて、掲示板風とかって、ありますよね。普通、この水色のって、背景画像です。初心者な私は、おもわず、全体で一枚の画像を準備して・・・とやってました。でも、でも、でも。中に入れるテキストの量にあわせて、何回も画像作り直すのって、チョーめんどーってなります。そもそも、画像作り終わって、「さあ、どのテキスト入れます？」って聞いたら、予想以上に長かったり、あれ、っていうほど短かったり。予定が立ちませぇん。そんな時、一枚の画像を準備すればOKだったんです。

絶対これ以上長くなることはないってほど、ずろんと長い画像

HTML

<div class="box">

<div class="inner_box">

<p>短い文章。もう終わり</p>

</div></div>

<div class="box">

<div class="inner_box">

<p>長い文章。まだ終わらない。ええ、終わらないの？長いの困るのよね。聞いてないよー。こんなに長くなるなら、最初に言っておいてくれないと、あとで困っちゃうじゃん。だって、私、ビギナーさんだもん。ひえー。困った、困った。そろそろ終わって、まだ続くの、げげ、足りなくなっちゃうよ。げげげ。</p>

</div></div>

CSS

*{
	margin:0;
	padding:0;
}
div.box {
	background-image:url(bgimg.gif);
	badkground-repeat:no-repeat;
	background-position:bottom left;
	width:150px;
	padding-bottom:20px;
	margin:30px;
	
	}
div.box div.inner_box {	
	background-image:url(bgimg.gif);
	background-repeat:no-repeat;
	background-position:top left;
	width:110px;
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
}

この背景用画像、長さはずろんと長いですが、幅は150pxです。まず、HTMLのマークアップは、目的のBOXの中にもうひとつDIVを入れ子にします。inner_boxのほうのパディングは、単に上・左右に余白がほしかったからです。水色の背景いっぱいに文字が詰まってると見にくいですから。このサイズは、角丸の角度がついた部分よりは大きくなるようにして、しっかり角がでるだけの大きさは取っておきます。ただ、パディングボトムについては、後述する外側のボックスにパディングをつけるので、ここではつけてません。まず、入れ子になった内側のボックスでは、背景画像を上のほうから読み込ませます。上部分の角丸から始まって、テキストが終わると、すぐにぶつっと背景画像が切れちゃいます。このままだと、下の部分は、角丸になってません。そこで、外側のボックスを使って、下部分の角丸を読み込ませます。ここでは、先ほどのびろーんと長い画像の下からスタートして読み込ませます。でも、上部の方はパディングがないので、子のinner_boxの画像とテキストが表示されているので、その下に重なっている親側のボックスの画像は見えません。ホントは、上の部分は、ぶつっとき切れてて、角丸ではないです。で、下の角丸部分を見せるために、親のボックスのパディングボトムをつけてやるのです。ちょうど、子のinner_boxの上・左右のパディングと同じにすると上下左右の余白がぴったりになります。親のボックスの視点からすると、パディングというのは背景画像は表示されていて、widthの部分いっぱいに子のボックスの背景画像がはまり込んでいるという具合です。こう考えていくと、ボックスモデルをしっかり理解しておかないと、このレイアウト、難しいことになりそうな・・・。

と考えてみると、IE6とかだと、なぜかwidthの中にパディングも算入されるという不思議な現象があるから、これ、IE6だと、ぐちゃぐちゃになってるんじゃないかと不安になってきました。これ、CSSハックとか使って、IE6対策しなきゃだめなんじゃ・・・。とあらたな疑問が出てきつつも、寝てしまう見習いでした。

追記　とりあえず、IETesterでチェックしたけど、IE6とかでもOKのようでした。ちょっとだけほっ。

2011年11月1日1:32 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)