ひとつの背景画像使いまわし!!角丸も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のようでした。ちょっとだけほっ。

やっぱりクリアフィックス!clearfix! clearfix!

クリアフィックス使用前

クリアフィックス使用前

HTML


<div id="wrapper">
<div class="firstpara">
<p>一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目一段落目</p>
</div>

<div class="secpara">
<p>二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目二段落目</p>
</div>
</div>

CSS


*{
	margin:0;
	padding:0;
}
div#wrapper {
	width: 600px;
	padding-left:50px;
	padding-right:50px;
	margin:0 auto;
	background-color:black;
}

div#wrapper div.firstpara {
	width:300px;
	float:left;
	background-color:red;
}
div#wrapper div.secpara {
	width:300px;
	float:left;
	background-color:blue;
}

CSSビギナー泣かせfloatの第二段は、クリアフィックス。

というか、第一弾っぽいかんじしますが・・・。
2段組とか、複数カラムのレイアウトに必須のフロートですが、ほんと、ありゃありゃが多すぎです。
HTMLとCSSを勉強し始めたころ、まったく知りませんでした。というか、うわさには聞いていました「クリアフィックス」さま。
「フロートしてると、なぜかバグのように、背景消えたり、不可解なことが起こるよ。そんなときは、魔法の呪文、クリアフィックスというのがあるんだよ」とだけ、うわさで聞いていました。
要するに、内包しているボックスが、フロートかかっていると、高さを認識してくれないから、ムリに高さを与えてあげてね、ってことです。でも、これって、バグでもなんでもなくって、これが「仕様」なんだから「しようがない」んで、クリアフィックス「使用」します。(←うう、めちゃくちゃ苦しい)

最初の画像のだって、なんで#wrapperの背景の黒がないんじゃぁ、と思います。

クリアフィックス使用後

クリアフィックス使用後

呪文CSS


*{
	margin:0;
	padding:0;
}
div#wrapper {
	width: 600px;
	padding-left:50px;
	padding-right:50px;
	margin:0 auto;
	background-color:black;
	zoom:1;
}
div#wrapper:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
div#wrapper div.firstpara {
	width:300px;
	float:left;
	background-color:red;
}
div#wrapper div.secpara {
	width:300px;
	float:left;
	background-color:blue;
}

うゎ、呪文CSS様、これがクリアフィックス様です。ほかにもいろいろバリエーションあるみたいですぅ。
初心者的に、アバウトーにいうなら、フロートかかってると、高さがなかったことになっちゃうから、無理に高さ出させるために、フロートをクリアしてあげなきゃならない。で、どうやってムリにフロートクリアしたらいいのかなというのが、クリアフィックスです。極端な話、無関係に改行の<br>をHTMLソースに書き込んで、そこにクラスでも何でもつけて、clear:bothとでもしてやればいいのです。でも、内容がないようっていうことは、できるだけHTMLには書き込んじゃだめってことで、考え出されたようです。まず、親のボックスの直後にピリオドを足してやって、それをブロック要素として見立て、フロートクリアをかける。でも、それじゃ、ピリオドが見えちゃうから、カッコわりーってことで、見えなくするために、見えんなよー攻撃をいっぱいかけてるということでしょうか。visibilityは見えんなよのhiddenでしょ、高さもできるだけ小さくね、とか、いろいろ付け足しもありです。フォントも最小サイズにねとか、いろいろバリエありです。それから、zoom:1っていうのは、HasLayoutという、うんちゃらかんちゃらな、IE関係の呪文だと思えばいいようです。(なんてテキトーな)

ということで、テキトーにごまかす見習いでした。