No.7:箱は箱の中に並べて敷き詰めて
どうも、思考です。ファミリーゲームフェスティバルも無事に終了しました。感想や反省はあれやこれやとありますが、そこは近日ラジオになるか別のブログで語られるかもしれません。
ちょっとブログ更新をお休みいただいて、おりゃーーーーーーっと書いていた別原稿もどうにか脱稿できました!!
AHCの刺客は一体何名紛れ込んでいるのやら?
はい、では本題。
箱を並べて敷き詰める?
前回、『大きな箱』の中に『中くらいの箱』を入れて、さらに『小箱』となる<div>タグを入れ子にしました。
ちょっと前回のソースを再度書いてみる事にしましょう(主に自分が思い出すためにですが……)
<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>タグの中に追記してみましょう。ついでに、見えやすいように背景色も付けてみます。
小箱(バックナンバー)
<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%
<div style="padding:20px;width:50%;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>
ソースを書き足してみましたが、幅は小さくなっても横並びになっていません。どうして、こんな表示になるかというと
『小箱』の中に書いた<div>タグの横幅は半分として表示されますが、<div>タグは幅いっぱいに透明な領域が広がっています。このままでは、横並びにできません。では、この問題を解決するために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
小箱(バックナンバー)
<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>
◆ clear:both
文字が横並びになっているかと思います。こうやって箱を並べて仕切りをつくっていくことで、レイアウトの外観を作成していきます。
このHTMLタグの最大の注意点は、「clear:both」を忘れずに記載することです。そうしないとデザインが崩れて、ゲムマブログ自体のレイアウトまで崩す大変な状態を引き起こしてしまいます。
良いですね? 「clear:both」を忘れてはいけません。
今回はここまで。そろそろ、他のHTMLタグについての説明をしていこうかと思います。引き続きよろしくお願いいたしますm(_ _)m
コメントを残す