2段組の作り方

真琴

こんにちは。macoです。

今日は2段組のサイト作成の課題をやったので、アウトプットを。

2段組

▲これを作ります。

▼HTML

<!DOCTYPE html>
<html lang="ja">

<head>
   <title>課題A</title>
   <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
   <div class="box0">     　　　　　　　　　　　　　<!-- 全体を箱化する -->
       <div class="box1">       　　           <!-- 1-aと1-bを箱化する-->
           <div class="box1-a">box1-a</div>
           <div class="box1-b">box1-b</div>
       </div>

       <div class="box2">box2</div>
   </div>
</body>

</html>

▼CSS

@charset "UTF-8";

/* 全称セレクタ。これでとりあえず全体の余白は一切なしって設定したほうが、
なにかと都合がよいらしい */
* {
   margin: 0;
   padding: 0;
}

/* box0の中にある箱（box1とbox2）を横並びにする*/
.box0 {
   display: flex;
}


/* 色と幅、高さの設定 */
.box1-a {
   background-color: olive;
   width: 200px;
   height: 200px;
}

.box1-b {
   background-color: orangered;
   width: 200px;
   height: 200px;
}

.box2 {
   background-color: brown;
   width: 1200px;
   height: 400px;
}


今回のポイントは

①divは基本的に縦方向に並ぶ性質があること

②box1-aとbox-bを、もう1つ大きな箱（box1）で囲うこと

③全体を一番大きな箱（box0）で囲うこと

わかりやすくするために、表示していなかったbox0とbox1を出してみた。

2段組余白あり


ちなみに、私はポイントの③が抜け落ちていて、下のようになってしまい苛立っていた。

2段組ミス


最後にちゃんと大きな箱にいれてまとめてあげないといけないってことだね。覚えとこ。


この記事が気に入ったらサポートをしてみませんか？