メルロロのWEBデザイン

サイトを作る為のちょっとした知識や素材を置いています。

Step.10 サイズの違う画像を等間隔に並べてみよう

親要素と子要素のmarginの相殺を防止

はて、margin の相殺をどうやって対処するか、の話からしようか。とりあえずもう一度現在のソースを出してね。
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><div id="header"><h1>メルちゃんの素敵なサイト★</h1></div></header>

<main>
<article>

<h1>レシピ一覧</h1>

	<section>
	<h2>オムライス</h2>
	<a href=""><img src="image/demo3.jpg"></a>
	</section>

	<section>
	<h2>パスタ</h2>
	<a href=""><img src="image/demo6.jpg"></a>
	<a href=""><img src="image/demo4.jpg"></a>
	</section>
	
	<section>
	<h2>添え物</h2>
	<a href=""><img src="image/demo5.jpg"></a>
	</section>
	
	<section>
	<h2>デザート</h2>
	<a href=""><img src="image/demo1.jpg"></a>
	<a href=""><img src="image/demo2.jpg"></a>
	</section>

</article>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>

body,h1,h2,p {
	margin:0px;
}
body {
	color:#9e2634;
	font-size:14px;
	line-height:23px;
	background:#fff7de;
	font-family:'ＭＳ ゴシック';
}
header,main,footer {
	display:block;
	width:1000px;
	margin:0px auto;
	box-shadow:5px 5px 10px #d4ccb4;
}
header {
	height:180px;
	margin-top:10px;
	font-size:20px;
	background:
	url(image/backimage.gif) no-repeat right 10px bottom 10px,
	url(image/backimage2.png) repeat,
	#ff4a74;
	border-radius:20px 20px 0px 0px;
	text-shadow:4px 4px 0px #ffffff;
}
header h1 {
	padding:25px 15px;
}
main {
	background:#ffffff;
	min-height:400px;
}
main h1 {
	margin:20px 0px;
	padding:6px;
	background:#ef5e7f;
	border:4px #ff97af;
	border-style:dashed none;
	color:#ffffff;
	text-shadow:1px 1px 0px #bf415e;
	text-align:center;
}
main h2 {
	margin:30px 20px 10px;
	padding:3px;
	border-bottom:dotted 2px #dd5179;
	font-weight:bold;
}
main img {
	border-radius:20px;
}
footer {
	height:50px;
	margin-bottom:10px;
	background:#ff4a74 url(image/backimage2.png);
	border-radius:0px 0px 20px 20px;
}
Sample
長くなってきたよね。
そういう運命なんだよ。
CSSの方はそろそろコメントしたり改行とかタブとか使わないと見辛くなってきたけどね。
さて、大分前に margin の相殺の話をしたときは、子要素に margin ではなく padding を使うことで余白をとればいいよって話をしたよね。
うん。多分そんな話あったんだけど、今回はどうしても<h1>に padding じゃなくて margin を使いたいんだよね。まぁ padding も使っているけれど。
わかっているよ。
ちょっとだけ話に出したと思うけど、親子での相殺は親側にとあるCSSを入れることで子要素の相殺が起きなくなるよ。
現状習っている中では border と padding がそれにあたるんだ。
ほう！
ただ0px指定じゃだめだけどね。border は線の種類を none とか hidden にしても相殺はできないよ。見えないように指定するのでは相殺は不可能ってことだね。
ただ、相殺したい向きにだけ padding か border を指定すれば相殺は防げるよ。今回は子要素の上側の margin が問題になっているから、 padding-top か border-top で解決するよ
main {
	background:#ffffff;
	min-height:400px;
	padding-top:1px;
}
Sample
ほんとだ！相殺が起きないよ！ありがとう！
これ以外にもまだ方法はあるんだけれどね。とりあえず padding で多少はなんとかなりそうだからいいか。

サイズの違う画像を等間隔に並べる

画像を等間隔に！私のサイト問題のメインディッシュだね！
まぁね……。
とりあえず等間隔に並べる前に、縦幅だけでも揃えない？
そうだね。さすがに縦幅バラバラだと見栄え悪いもんね。
画像作り直さないとだめ？
作り直せ、と言いたいところだけれど、CSSのheightで縦幅を指定してやれば画像はちゃんと伸び縮みしてくれるよ。ただ、元の画像より大きくなるように設定すると画像が引き伸ばされて汚くなってしまうから、一番縦幅が短いものに合わせるのがいいよ。
body,h1,h2,p {
	margin:0px;
}
body {
	color:#9e2634;
	font-size:14px;
	line-height:23px;
	background:#fff7de;
	font-family:'ＭＳ ゴシック';
}
header,main,footer {
	display:block;
	width:1000px;
	margin:0px auto;
	box-shadow:5px 5px 10px #d4ccb4;
}
header {
	height:180px;
	margin-top:10px;
	font-size:20px;
	background:
	url(image/backimage.gif) no-repeat right 10px bottom 10px,
	url(image/backimage2.png) repeat,
	#ff4a74;
	border-radius:20px 20px 0px 0px;
	text-shadow:4px 4px 0px #ffffff;
}
header h1 {
	padding:25px 15px;
}
main {
	background:#ffffff;
	min-height:400px;
	padding-top:1px;
}
main h1 {
	margin:20px 0px;
	padding:6px;
	background:#ef5e7f;
	border:4px #ff97af;
	border-style:dashed none;
	color:#ffffff;
	text-shadow:1px 1px 0px #bf415e;
	text-align:center;
}
main h2 {
	margin:30px 20px 10px;
	padding:3px;
	border-bottom:dotted 2px #dd5179;
	font-weight:bold;
}
main img {
	border-radius:20px;
	height:213px;
}
footer {
	height:50px;
	margin-bottom:10px;
	background:#ff4a74 url(image/backimage2.png);
	border-radius:0px 0px 20px 20px;
}
Sample
おお！ほんとだ！そろったら綺麗に見えるもんだね！
（さっきからそう言っているのに。）
で、縦幅は現状そろっているけど、横幅はてんでバラバラの状態になったわけだね。
うん。この状態で、基本左から順番に横に3つ画像が並んだら改行される感じがいいんだ。
こんな感じ？の左揃えと中央揃えのどっちかな

step10-1

おおお！すげぇ！そんな感じそんな感じ！それの中央揃えがいい！！
あいよ。じゃあ先にソースをだすよ。
<!doctype html>
<html>
<head>
<title>メルちゃんの素敵なサイト★</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header><div id="header"><h1>メルちゃんの素敵なサイト★</h1></div></header>

<main>
<article>

<h1>レシピ一覧</h1>

	<section>
	<h2>オムライス</h2>
	<ul>
	<li><a href=""><img src="image/demo3.jpg"></a>
	<li><a href=""><img src="image/demo6.jpg"></a>
	<li><a href=""><img src="image/demo4.jpg"></a>
	<li><a href=""><img src="image/demo5.jpg"></a>
	<li><a href=""><img src="image/demo1.jpg"></a>
	<li><a href=""><img src="image/demo2.jpg"></a>
	</ul>
	</section>

	<section>
	<h2>パスタ</h2>
	<ul>
	<li><a href=""><img src="image/demo6.jpg"></a>
	<li><a href=""><img src="image/demo4.jpg"></a>
	</ul>
	</section>
	
	<section>
	<h2>添え物</h2>
	<ul>
	<li><a href=""><img src="image/demo5.jpg"></a>
	</ul>
	</section>
	
	<section>
	<h2>デザート</h2>
	<ul>
	<li><a href=""><img src="image/demo1.jpg"></a>
	<li><a href=""><img src="image/demo2.jpg"></a>
	</ul>
	</section>

</article>
</main>

<footer id="main1"><p>コピーライト</p></footer>

</body>
</html>

body,h1,h2,p,ul,li {
	margin:0px;
	padding:0px;
}
body {
	color:#9e2634;
	font-size:14px;
	line-height:23px;
	background:#fff7de;
	font-family:'ＭＳ ゴシック';
}
header,main,footer {
	display:block;
	width:1000px;
	margin:0px auto;
	box-shadow:5px 5px 10px #d4ccb4;
}
header {
	height:180px;
	margin-top:10px;
	font-size:20px;
	background:
	url(image/backimage.gif) no-repeat right 10px bottom 10px,
	url(image/backimage2.png) repeat,
	#ff4a74;
	border-radius:20px 20px 0px 0px;
	text-shadow:4px 4px 0px #ffffff;
}
header h1 {
	padding:25px 15px;
}
main {
	background:#ffffff;
	min-height:400px;
	padding-top:1px;
}
main h1 {
	margin:20px 0px;
	padding:6px;
	background:#ef5e7f;
	border:4px #ff97af;
	border-style:dashed none;
	color:#ffffff;
	text-shadow:1px 1px 0px #bf415e;
	text-align:center;
}
main h2 {
	margin:30px 20px 10px;
	padding:3px;
	border-bottom:dotted 2px #dd5179;
	font-weight:bold;
}
main img {
	border-radius:20px;
	height:213px;
}
main ul {
	list-style:none;
	overflow:hidden;
	margin:0px 20px;
}
main ul li {
	float:left;
	width:320px;
	margin-bottom:20px;
	text-align:center;
}
footer {
	height:50px;
	margin-bottom:10px;
	background:#ff4a74 url(image/backimage2.png);
	border-radius:0px 0px 20px 20px;
}
ファッ？！ちょっと待って！知らないの増やしすぎぃ！！！
サイズがばらばらの画像を用意した天罰が下ったんだよ。どんまい。
ロロちゃんが下したんじゃない！
まぁ、さくっと説明すると、<img>要素に親要素を用意したよ。
その親要素に丁度3列分になりそうな横幅を指定したよ。
メインの横幅は 1000px にしたよね。で、<h2>要素の左右に 20px の余白を用意していたから 1000px-40px で実際画像を表示させる部分は 960px これを3列って話だから3で割って 320px を<img>の親要素の横幅にしたよ。
これにプラスして<img>の親要素が display:block; でも改行されず横に並ぶCSSを入れたり、text-align で画像を中央寄せにしたりしたよ。
ファー……
画像が横幅バラバラな以上、画像に親要素を用意して横幅を指定してあげないと、決まった列数での等間隔はできないんじゃないかなってことがわかればいいんじゃないかな。
んーとりあえず画像に親要素がいるんだねってことはわかった！
もうそれでいいよ。
じゃあ、新しい要素とプロパティについて順にさらっと触れていくよ。

リストを作成するタグ

新しく出てきた<ul>要素は順序のないリストを作成するよ。
<li>要素はリストの1個1個の項目で、<ul>と<li>は入れ子で同時に使うんだ。
ちなみに順序のあるリストは<ol>だよ。これも<li>と使うからね。
<ul>と<li>の場合はこうなるよ。

  • 順序のないリストの見本
  • 順序のないリストの見本
  • 順序のないリストの見本

<ol>と<li>の場合はこうなるよ。

  1. 順序のあるリストの見本
  2. 順序のあるリストの見本
  3. 順序のあるリストの見本

こんな感じね。ソースはこうなるよ。

<p><ul>と<li>の場合はこうなるよ。</p>
<ul>
<li>順序のないリストの見本
<li>順序のないリストの見本
<li>順序のないリストの見本
</ul>

<p><ol>と<li>の場合はこうなるよ。</p>
<ol>
<li>順序のあるリストの見本
<li>順序のあるリストの見本
<li>順序のあるリストの見本
</ol>
<li>は大分前に話した終了タグを省略しても良い要素だよ。私はよく省略しちゃうな。
ほう？でもなんかさ、あの画像の一覧ってリストっぽくないと思うんだけれど
内容的にカテゴリ分けされた料理のリストではあるでしょう？画像じゃなくて料理名がずらっと並んでたらリストだと思わない？
だから意味的にはそんなに間違ってないよ。
ん、たしかに。
こういう仕組みのタグだから、<ul>に左右 20px の余白もつけることができて便利だしね。
リストはCSSを使うことでいろんな物に化けるから面白いよ。
ねね、CSSの中にあるlist-styleってもしかしなくてもリストに関わるよね。
その名の通りね。
マーカー関連の指定ができるんだよ。マーカーっていうのはリストの左横に出ている数字だったり●のことね。
マーカーのマークを変更することもできるし、マーカーを自分が用意した画像へと変えることもできるよ。あとマーカーの位置も変更可能だね。
今回はマーカーは却って邪魔になるから list-style:none; マーカー無しの状態に設定しているよ。
なるほど把握！

要素の回り込みと配置 float

はて、float の話をしようか。
<li>要素は上記の見本のように、<p>要素と同じで displya:block; の状態。つまり自動的に前後に改行が入る要素なのね。
でも、display:block; の状態でも要素を横に並べたり、回り込ませたりしたいって時に、この float というプロパティを使うんだ。
ほうほう？
float は要素の配置を指定と同時に、回り込ませるようになるのね。値は left right none とあるよ。何もfloatの指定がないデフォルトの状態では none になっているよ。
今回は left に指定することで<li>要素を横並びにすることができているの。
他にも画像に文字を回り込ませたりするのに使えるかな。
普通はこんな感じに、<img>要素のすぐ横に文字を書いたとしても、画像の下部から文字が開始されるよ。

文字のすぐ後ろに<img>要素を置いたらこんな感じになるよ。文字数が多くて改行されたらひどいことになるね。文字を追い辛いよー。

<img src="image/image1.jpg">普通はこんな感じに、<img>要素のすぐ横に文字を書いたとしても、画像の下部から文字が開始されるよ。<br>
<br>
文字のすぐ後ろに<img>要素を置いたらこんな感じになるよ。文字数が多くて改行されたらひどいことになるね。文字を追い辛いよー。<img src="image/image1.jpg">

これが float:left; にした場合、見ての通り文字の開始位置が画像の上部になって、文字が横いっぱいになって自動改行された場合も画像の隣からまた文字が開始されるよ。新聞みたいだね。

当然文字だけじゃなくて要素も画像も回り込むよ。

画像もこの通り、ね。

縦幅超えたら元に戻る感じかなー。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 

<img src="image/image1.jpg" style="float:left;">
<p>これが float:left; にした場合、見ての通り文字の開始位置が画像の上部になって、文字が横いっぱいになって自動改行された場合も画像の隣からまた文字が開始されるよ。新聞みたいだね。</p>
<p>当然文字だけじゃなくて display:block; になっている要素も全部回り込むよ。</p>
<img src="image/image1.jpg" style="width:50px;">
<p>画像を使ってもこの通り。</p>
<p>縦幅超えたら元に戻る感じかなー。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

float:right; にすると指定された要素は一番右側へと配置されるよ。そしてその要素の左側に次の要素やテキストが回り込みされるんだ。あとは一緒かな。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 

<img src="image/image1.jpg" style="float:right;">
<p style="margin:0px;">float:right; にすると指定された要素は一番右側へと配置されるよ。そしてその要素の左側に次の要素やテキストが回り込みされるんだ。あとは一緒かな。</p>
<p style="margin:0px;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
と、まぁこんな感じなわけ。
ほうほう！なんか私のサイトでも使えそうだ！画像つきで料理手順を書いてるとき何かによさそう！
でも縦幅一杯に文字書くまで回り込まれるのが不便だね。
回り込みを解除するCSSがちゃんとあるのよ。clear っていうプロパティでね。値は none left right both だよ。
left と right はそれぞれ指定した側の float を解除。none は解除しない。both は左右両方を解除だよ。

画像に float:left; をしていた場合ね。これは回り込み解除してないよ。

このテキストが入っている<p>要素に clear:right; を指定したよ。関係ないから解除されてないね。

clear:left; を指定したよ。回り込みが解除されたね。clear:both; を使っても同じ結果になるよ。 

<img src="image/image1.jpg" style="float:left;">
<p style="margin:0px;">画像に float:left; をしていた場合ね。これは回り込み解除してないよ。</p>
<p style="clear:right;">このテキストが入っている<p>要素に clear:right; を指定したよ。関係ないから解除されてないね。</p>
<p style="clear:left;">clear:left; を指定したよ。回り込みが解除されたね。clear:both; を使っても同じ結果になるよ。</p>
ただね、今回メルちゃんのサイトのCSSでは clear ではなく overflow:hidden; を使って float の解除を行っているんだ。
んん？解除方法沢山あるんだね。
実は、この overflow:hidden; は元々 float を解除するためのものではないんだよね。
高さを指定したとき中身が飛び出てしまったことがあったでしょう？

こんな感じにね。
これは高さを30pxに設定しているよ。

と、こんな感じになるやつ。

あぁ、あったあった。メインに画像を並べたときだね。
本来はこういう飛び出たときにどう表示させるか、っていうのが overflow プロパティなんだよね。 overflow:hidden; は飛び出た部分を完全に隠してしまうよ。

こんな感じにね。文字が途中で切れているでしょう？
これは高さを30pxに設定しているよ。
ほう……それがなんで floatの解除に関係してくるの？
ちょっとこれを見て欲しいんだけれどね、子要素にfloatがかかっていると、親要素の高さがおかしくなるんだよね。
画像に float:left; をしていた場合ね。
背景色の部分はheightの指定は一切していないよ。

本来であれば画像の分だけ背景色の縦幅が伸びるのに、縦幅はどうもfloatをかけた画像を無視しているようだね

わかってくれたかな？floatを使うと親要素はfloatがかかった子要素を認識してくれないんだ。
だけど親要素にoverflowプロパティを使うことでfloatを指定した子要素を認識してくれるようになるの。
clearプロパティはfloatを指定した要素の次の要素に指定しないといけないから、floatを指定した要素の次に要素を置かない場合とかは親要素にoverflow:hidden;を使うと楽でいいのよ。
なんかfloatって難しいね
他にもいろいろ仕様があったりするしね。
でも結構使う機会が多いから頑張って付き合ってね。
はぁい
はて、とりあえずこれでメルちゃんのご希望通りになったかな？
うん！おかげさまで！
とりあえず私がパッと思いつく分はこれくらいかなっ
じゃあ次回は私からちょいと、こんなこともできるよっていうのを教えてみようかな。
このエントリーをはてなブックマークに追加

▲ Page top ▲