しんく顔アイコン_小.jpg

No.7:箱は箱の中に並べて敷き詰めて

どうも、思考です。ファミリーゲームフェスティバルも無事に終了しました。感想や反省はあれやこれやとありますが、そこは近日ラジオになるか別のブログで語られるかもしれません。
ちょっとブログ更新をお休みいただいて、おりゃーーーーーーっと書いていた別原稿もどうにか脱稿できました!!
AHCの刺客は一体何名紛れ込んでいるのやら?

 

はい、では本題。

 

箱を並べて敷き詰める?

前回、『大きな箱』の中に『中くらいの箱』を入れて、さらに『小箱』となる<div>タグを入れ子にしました。
ちょっと前回のソースを再度書いてみる事にしましょう(主に自分が思い出すためにですが……)

画面表示

大きな箱(ブログ記事の外側と同じサイズ)

中くらいの箱(章立て:商品タイトル画像)
中くらいの箱(章立て:探索者について)

小箱(探索者カードの紹介)
小箱(プレイ動画)
小箱(バックナンバー)
中くらいの箱(章立て:当日取扱商品)

HTMLコード(cssはあえて省略しています)
<div  style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ) <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:商品タイトル画像)</div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:探索者について) <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(探索者カードの紹介)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(プレイ動画)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(バックナンバー)</div> </div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:当日取扱商品)</div> </div>

今の状態は、少し大きさが違う箱を1つずつ上から詰めている状態です。

右側の画像の形になるよう『小箱』の中を仕切るには、引き続き<div>タグを使って行きます。

現実の箱を思い浮かべてください。仕切りたいのであれば、仕切り板を1つ真ん中に差し込めば完了です。板が無ければ、『小箱』の半分の幅ぐらいの箱2を並べてあげれば良いのです。

では、『小箱』<div>タグの中に追記してみましょう。ついでに、見えやすいように背景色も付けてみます。

教材はこれ

スクリーンショット 2016-05-19 18.36.39.png


画面表示

小箱(バックナンバー)

左側
右側

HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="width:50%;float:left;background-color:#d8c0ad;" > 右側</div> </div>

◆ width:50%

画面表示
大きな箱(ブログ記事の外側と同じサイズ)

HTMLコード
<div style="padding:20px;width:50%;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
外側の<div> タグに定義されている幅の50%を、スタイルを記述している<div> の幅と指定する。

ソースを書き足してみましたが、幅は小さくなっても横並びになっていません。どうして、こんな表示になるかというと

div_nakami.jpg

『小箱』の中に書いた<div>タグの横幅は半分として表示されますが、<div>タグは幅いっぱいに透明な領域が広がっています。このままでは、横並びにできません。では、この問題を解決するためにHTMLタグとスタイルを追記してみましょう。


画面表示

小箱(バックナンバー)

左側
右側

HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="width:50%;float:left;background-color:#d8c0ad;" > 右側</div> <div style="clear:both;" ></div> </div>

◆ float:left

画面表示

小箱(バックナンバー)

左側

HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="clear:both;" ></div> </div>
解説
スタイルを定義した<div> タグを指定されている幅か、中のコンテンツ分の大きさにして「左寄せ」します。それ以外の要素を右側に回り込んで表示させます。


◆ clear:both

解説
このスタイルが定義さいれているHTMLタグより下は、floatの影響を受けません。

文字が横並びになっているかと思います。こうやって箱を並べて仕切りをつくっていくことで、レイアウトの外観を作成していきます。
このHTMLタグの最大の注意点は、「clear:both」を忘れずに記載することです。そうしないとデザインが崩れて、ゲムマブログ自体のレイアウトまで崩す大変な状態を引き起こしてしまいます。
良いですね? 「clear:both」を忘れてはいけません。

 

今回はここまで。そろそろ、他のHTMLタグについての説明をしていこうかと思います。引き続きよろしくお願いいたしますm(_ _)m