No.6：divタグは続く
どうもぅ、思考です。ファミリーゲームフェスティバルまで……もう数日！？ 6月も半分過ぎてしまったことにビックリです。
マッタリとゲーム制作も再開しておりますが、居眠りの街は「コミックマーケット(C90)」に落選してしまったので着地点をどこにしようかと……。どうしましょうね？
さて、そんなことを悩みながらお知らせを
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。ファミリーゲームフェスティバル2016様Webサイトより引用
公式サイト >> http://www.fgamefestival.com/
居眠りの街 / AHC購入事前予約 >> こちらをクリック！！
5月17日〜6月17日までファミリゲームフェスティバルの購入事前予約を現在受け付け中。
はい、では本題。
中くらいの箱を入れてみよう
前回は<div>タグについてと、ブログ記事の一番外側にあたる『大きな箱』に対してのCSSを書きました。その結果、どんな風になったかを改めて確認してみましょう。
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>
でしたね？ では、第4回の最後にお見せしたような形にするため『中くらいの箱』をコレに加えてみましょう。
HTML的には、<div>〜</div>の中へ新たに<div>〜</div>を追加してあげるだけです。それだけだと、視覚的には見えないのでいきなり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属性に書かれているCSSを確認してみましょう。大きな箱のスタイルと大きな違いはありません。スタイルも1つずつ分解してみると……
- margin-top:20px;
- padding:20px;
- border:2px solid #3686a0;
- color:#3686a0;
- font-size:14px;
厳格にレイアウトするためには、『大きい箱』意外にも「width」のスタイルを入れておくと良いでしょう。ここで、初めて見かけるのは「margin-top:20px」だと思いますが、何の命令かはピンと来るかと思います
しかし、「margin」と「padding」はスタイルを見て行く中で最初に混乱しやすい場所でもあるので、ちょっと図にしてみようと思います
◆ margin-top:20px
<div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;font-size:14px">
中くらいの箱
</div>
「margin」は外側の余白、「padding」は内側の余白です。これを忘れなければ大丈夫です！
とはいえ、ゲムマブログの中では一カ所だけその概念が通じない箇所があります。
これは、この連載の最終回付近で触れることになるかと思います。
ここまで理解できたら、『中くらいの箱』の中に小『小箱』を入れるのは簡単です。スタイルは『中くらいの箱』の色や文字サイズを変えるだけです。
是非、チャレンジしてみてください。
<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>
今回はここまで。ここまでの内容がステップ１となります。
次回からは右の教材のように、<div>タグが横並びにするための命令から、他のHTMLタグも踏まえて、『小箱』の中を詳細に詰め込んで行こうと思います。
引き続き、よろしくお願いしますm(_ _)m
コメントを残す