ここでは、ウェブカツ!!のHTML5・CSS3部入門を受講完了した方向けにHTML・CSSを使った「レイアウトの組み方」の特訓を行います。
開発環境はMacとGoogleChromeブラウザを使います。
Windowsの人もGoogleChromeブラウザを使いましょう。
また、この練習では今でも現場での使用率の多い「float」を使ったレイアウト方法を練習します。
HTML5から使える「flexbox」を使ったレイアウト方法の鬼練は、また別でやっていきます。
目次
鬼練１１：複数ブロック要素を横に整列させる
鬼練８でもやったんですが、今度はそれを「親要素の右端」に整列させてみましょう。
左端へはfloat:leftで整列しましたが、右はどうすりゃいいんでしょう？
まさか、
子要素を「float:right」で並べちゃう。
なんてのは、ダメエンジニアですよ？
要件
下記の画面と同じになる様に
親要素にdivタグを使い、親要素を高さ200px、横500pxにする
親要素の背景色を「#f6f5f4」にする
子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする
各子要素に「子要素１」「子要素２」「子要素３」「子要素４」の文字を入れる
各子要素を親要素の上下中央寄せする
各子要素を１から順に親要素の右端に並べる
子要素同士の間隔は10px開ける
でレイアウトしてみてください。
正解コード
htmlコード
htmlはまずこんな感じになります。左端整列の時と変わりません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>鬼練１１</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="oya"> <div class="ko-wrap"> <div class="ko ko1">子要素１</div> <div class="ko ko2">子要素２</div> <div class="ko ko3">子要素３</div> <div class="ko ko4">子要素４</div> </div> </div> </body> </html> |
「.ko-wrap」というタグで囲うってのがミソですね。
もし、「float:right」を使ってやろうとすると子要素の順序を全部逆にしなきゃいけません。
上から「４、３、２、１」とタグを並べる必要があります。
それは、「本来あるべきタグ構造を壊している（本来は上から１、２、３と並ぶはずなのに逆順でタグが並んでいる）」ことになりますね。
Googleの検索エンジンが、そのタグ構造を元にどう解釈するでしょうか？
WEBページとは基本的には「文章」です。読み物です。
機械からしたら「タグの上からが文章の始まり」と恐らく思うでしょうね。
（もちろん、それがどの程度SEOとして影響するのかは誰にも分かりません。）
でも、実際に画面に表示されているのは「タグの下が最初」なわけです。
しかも、ソースコードを見るエンジニア側から見ても「どれが上に表示されるものか」が「CSSを見なければ分からない」わけですね。
「CSSを見なければ想像出来ない。」というのは「間違いを産みやすい＝バグを産みやすい」わけなので、現場の判断としては「ダメ」ということになりますね。
style.css
style.cssはこんな感じになりますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.oya{ width: 500px; height: 200px; background: #f6f5f4; overflow: hidden; } .ko-wrap{ float: right; overflow: hidden; position: relative; top: 50px; } .ko{ height: 100px; width: 100px; float: left; margin-right: 10px; } .ko:last-child{ margin-right: 0; } .ko1{ background: #ff9abc; } .ko2{ background: #f9b9ff; } .ko3{ background: #cbb8ff; } .ko4{ background: #acb5ff; } |
STEP1：.ko-wrapを右端へ寄せる
実は、右端に寄せるのは「.ko-wrap」の要素です。
「float:right」を使って、右端に寄せてあげます。
そして、
「.oya」要素の上下中央に配置するため、
「position」と「top」プロパティを使います。
子要素自体を上下中央に寄せるのではなく、
それを囲っている「.ko-wrap」を上下中央に寄せてしまえば、その中にある子要素は「上下中央に揃われたボックスの中にある」わけなんで、結果、子要素は全部「.oya」要素の上下中央に揃っている。って仕組みですね。
STEP2：子要素を普通に左寄せで整列させるだけ
あとは「.ko-wrap」の中にある子要素を普通に左寄せするだけです。
ブロック要素を横並びにするには
float:left
でしたね。ただそれをやるだけ。です。
floatはブロック要素の横幅を変えてしまう
なんでそうなる？と思うかもしれませんね。
「.ko-wrap」ってブロック要素だから、親要素の横幅いっぱいでしょ？
そしたら、float:rightで右に配置しても結局横幅いっぱいだから、
その中に子要素をfloat:leftで左揃えしたら、結局左端に揃わない？
ってね。
実は、floatは
ブロック要素をインライン要素のように「横幅は中身で決まる」ようにしてしまう。
という特徴があります。
なので、「.ko-wrap」の横幅は
子要素「.ko」達全部を掛け合わせた横幅になる
ってことなんです。
試しに開発ツールで「.ko-wrap」の横幅を見てみましょう。言われなくてもやってくださいね。
そして、floatプロパティを外してみたり、子要素を全部削除した時に横幅どうなるのか？
なんてのも試すのが「当たり前」ですからね？
「教材のことしかやらず、自分で試さない」奴は成長しませんからね。
STEP3：最後の子要素のマージンをリセットする
また、要素同士の間隔ですが普通に全要素に
margin-right:10px
ってやっちゃうと最後の要素にもマージンつくので
親要素の右端ぴったりになりません。
なので、19行目の
|
1 2 3 |
.ko:last-child{ margin-right: 0; } |
で「.ko」に「:last-child」という擬似クラスをつけることで
「指定のセレクタが同列に並んでいる場合の最後の要素」
に対してだけスタイルを指定する方法を使います。
まぁ、
|
1 2 3 4 |
.ko4{ background: #acb5ff; margin-right: 0; } |
のようにやってもいいんですが、普通は「最後の要素に何かしたい」って時は擬似クラス使うことが多いですね。
ちなみにリセットするなら値に「0」を使う以外にも「inherit」を使う方法もあります。
|
1 2 3 |
.ko:last-child{ margin-right: inherit; } |
よく使われる箇所
ちなみにこの「右端に整列させる」がよく使われるところって分かりますか？
それは、
「ヘッダーメニュー」
です。ウェブカツのメニューとか、モロに右端に揃えてますよね。
鬼練１２：複数ブロック要素を左右に整列させる
右端と左端の整列をやったので、両方の合わせ技をやりましょう。
要件
下記の画面と同じになる様に
親要素にdivタグを使い、親要素を高さ200px、横980pxにする
親要素の背景色を「#f6f5f4」にする
親要素の左右の内部余白を20pxにする
子要素にブロック要素のdivタグを使い、子要素を高さ100px、横100pxにする
各子要素に「子要素１」「子要素２」「子要素３」「子要素４」の文字を入れる
各子要素を親要素の上下中央寄せする
「子要素１」「子要素２」を左端に横並びにする
「子要素３」「子要素４」を右端に横並びにする
子要素同士の間隔は10px開ける
でレイアウトしてみてください。
正解コード
htmlコード
htmlはまずこんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>鬼練１２</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="oya"> <div class="ko-wrap ko-wrap1"> <div class="ko ko1">子要素１</div> <div class="ko ko2">子要素２</div> </div> <div class="ko-wrap ko-wrap2"> <div class="ko ko3">子要素３</div> <div class="ko ko4">子要素４</div> </div> </div> </body> </html> |
前回と同じく、「左端に揃える要素達」と「右端に揃える要素達」を囲うってのがミソですね。
style.css
style.cssはこんな感じになりますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.oya{ width: 980px; height: 200px; background: #f6f5f4; overflow: hidden; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .ko-wrap{ overflow: hidden; position: relative; top: calc(200px / 2 - 100px / 2); } .ko-wrap1{ float: left; } .ko-wrap2{ float: right; } .ko{ height: 100px; width: 100px; float: left; margin-right: 10px; } .ko:last-child{ margin-right: inherit; } .ko1{ background: #ff9abc; } .ko2{ background: #f9b9ff; } .ko3{ background: #cbb8ff; } .ko4{ background: #acb5ff; } |
親要素には9行目のように「box-sizing」で「paddingを含めてwidthが980px」となるようにしています。
これがないと親要素のwidthはpaddingの幅分増えちゃうので要件通りになりませんね。
10行目の
|
1 2 3 4 5 |
.ko-wrap{ overflow: hidden; position: relative; top: calc(200px / 2 - 100px / 2); } |
はそれぞれ左端と右端の子要素を囲っているものの共通スタイルです。
前回と同じく、この囲い要素で「親要素の上下中央揃え」にしています。
ただし、今回は「calc」というCSS３から新しく使えるようになった機能を使ってみました。
calcはCSS内で計算が出来る機能です。
自分で計算して上から50pxと出すのもいいですし、こういったように計算をそのまま書いてしまうやり方もできます。
「ヘッダーの高さ200pxの半分から、子要素の高さ100pxの半分を引いた分」
って意味の計算式ですね。
まぁ、コードが長くはなりますが「分かりやすさ」はこちらの方が分かりやすいかもしれないですね。
ここらへんは、人によって判断異なるところですね。
今回はコードが少ないのでいいですが、大量にあるコードを見ていて、
いきなり
「top:50px」
と書かれてても、
「どっから出てきた数字？」
と思ってしまうことが多々出てきますので。
（まぁ、ヘッダーの箇所のスタイルでtopとか使ってれば、「あー、上下中央揃えね」とは分かるのでどっちでもいいと思います。）
今回はどっちでもいい感じですが、
「何ヶ月後、何年後に入ってきた人がパッと見て分かる書き方」
を出来るだけ心がけましょう。
もちろん、そこにこだわりすぎて開発に時間かかるなんてのはWEBサービスなど特に
「早くサービスや機能を世に出して金にしたい」
という場面では、ナンセンスです。
では、話戻って次に15行目からの左端と右端の囲いですが
|
1 2 3 4 5 6 |
.ko-wrap1{ float: left; } .ko-wrap2{ float: right; } |
というようにそれぞれfloatで左端と右端に寄せてます。
float使ったなので、その要素の横幅は子要素分になるんでしたね。
あとは全部、前回と同じです。
この合わせ技を使えば、
「左端にロゴがあり、右端にメニューがある」
といったヘッダーを作ることが出来ますよね。
子要素のdivタグが画像のimgタグに変わるだけのことです。
（imgタグはインライン要素なので、もちろんブロック要素にスタイルを変える必要がありますよね？）
以上で鬼練は終了です。
あとはここまでやったのを組み合わせればレイアウトは作れます。
また、細かなパーツの作り方などは「WEBサービス部」や「HTML・CSS部中級」「HTML・CSS部上級」でやっていきます。
