Step.10 サイズの違う画像を等間隔に並べてみよう
親要素と子要素の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:'MS ゴシック'; } 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; }
CSSの方はそろそろコメントしたり改行とかタブとか使わないと見辛くなってきたけどね。
さて、大分前に margin の相殺の話をしたときは、子要素に margin ではなく padding を使うことで余白をとればいいよって話をしたよね。
ちょっとだけ話に出したと思うけど、親子での相殺は親側にとあるCSSを入れることで子要素の相殺が起きなくなるよ。
現状習っている中では border と padding がそれにあたるんだ。
ただ、相殺したい向きにだけ padding か border を指定すれば相殺は防げるよ。今回は子要素の上側の margin が問題になっているから、 padding-top か border-top で解決するよ
main { background:#ffffff; min-height:400px; padding-top:1px; }
サイズの違う画像を等間隔に並べる
とりあえず等間隔に並べる前に、縦幅だけでも揃えない?
画像作り直さないとだめ?
body,h1,h2,p { margin:0px; } body { color:#9e2634; font-size:14px; line-height:23px; background:#fff7de; font-family:'MS ゴシック'; } 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; }
で、縦幅は現状そろっているけど、横幅はてんでバラバラの状態になったわけだね。
<!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:'MS ゴシック'; } 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; }
その親要素に丁度3列分になりそうな横幅を指定したよ。
メインの横幅は 1000px にしたよね。で、<h2>要素の左右に 20px の余白を用意していたから 1000px-40px で実際画像を表示させる部分は 960px これを3列って話だから3で割って 320px を<img>の親要素の横幅にしたよ。
これにプラスして<img>の親要素が display:block; でも改行されず横に並ぶCSSを入れたり、text-align で画像を中央寄せにしたりしたよ。
じゃあ、新しい要素とプロパティについて順にさらっと触れていくよ。
リストを作成するタグ
<li>要素はリストの1個1個の項目で、<ul>と<li>は入れ子で同時に使うんだ。
ちなみに順序のあるリストは<ol>だよ。これも<li>と使うからね。
<ul>と<li>の場合はこうなるよ。
- 順序のないリストの見本
- 順序のないリストの見本
- 順序のないリストの見本
<ol>と<li>の場合はこうなるよ。
- 順序のあるリストの見本
- 順序のあるリストの見本
- 順序のあるリストの見本
こんな感じね。ソースはこうなるよ。
<p><ul>と<li>の場合はこうなるよ。</p> <ul> <li>順序のないリストの見本 <li>順序のないリストの見本 <li>順序のないリストの見本 </ul> <p><ol>と<li>の場合はこうなるよ。</p> <ol> <li>順序のあるリストの見本 <li>順序のあるリストの見本 <li>順序のあるリストの見本 </ol>
だから意味的にはそんなに間違ってないよ。
リストはCSSを使うことでいろんな物に化けるから面白いよ。
マーカー関連の指定ができるんだよ。マーカーっていうのはリストの左横に出ている数字だったり●のことね。
マーカーのマークを変更することもできるし、マーカーを自分が用意した画像へと変えることもできるよ。あとマーカーの位置も変更可能だね。
今回はマーカーは却って邪魔になるから list-style:none; マーカー無しの状態に設定しているよ。
要素の回り込みと配置 float
<li>要素は上記の見本のように、<p>要素と同じで displya:block; の状態。つまり自動的に前後に改行が入る要素なのね。
でも、display:block; の状態でも要素を横に並べたり、回り込ませたりしたいって時に、この float というプロパティを使うんだ。
今回は left に指定することで<li>要素を横並びにすることができているの。
他にも画像に文字を回り込ませたりするのに使えるかな。

文字のすぐ後ろに<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>
でも縦幅一杯に文字書くまで回り込まれるのが不便だね。
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>
高さを指定したとき中身が飛び出てしまったことがあったでしょう?
これは高さを30pxに設定しているよ。
と、こんな感じになるやつ。

背景色の部分はheightの指定は一切していないよ。
本来であれば画像の分だけ背景色の縦幅が伸びるのに、縦幅はどうもfloatをかけた画像を無視しているようだね
だけど親要素にoverflowプロパティを使うことでfloatを指定した子要素を認識してくれるようになるの。
clearプロパティはfloatを指定した要素の次の要素に指定しないといけないから、floatを指定した要素の次に要素を置かない場合とかは親要素にoverflow:hidden;を使うと楽でいいのよ。
でも結構使う機会が多いから頑張って付き合ってね。
とりあえず私がパッと思いつく分はこれくらいかなっ