プログラミング日記＃06　２カラム、３カラムの作り方

こんにちは。よっしーです。

今回はプログラミング学習6日目！いつものように学習の記録を振り返ります。

今日の学習内容

・引き続きサイト模写

　-2カラム、3カラムの表示

昨日に引き続き、サイト模写に励みました。今回はあまり時間が取れなかったんですが、2セクションほど作れたので満足です。

学習の振り返り　2カラムの表示方法

模写サイトに下記のようなレイアウトがありました。

写真とテキストの2カラム表示です。

imgはインライン要素、h1とpはブロック要素。

なのでそのままの通り入力すると、「画像の下にテキスト」という配置になってしまいます。

これを横並びにするために使うのが、display:flex; です。コードを書いてみます。

<!--html--!>
<section class="container">
    <img src="ワンチャンの画像URL" width="500px" height="300px">
    <div class="text-box">
        <h1>ワンチャンの日常</h1>
        <p>ワンチャンの日常ワンチャンの日常…</p>
    </div>
</section>

まずは、HTMLで要素をつくりました。するとこうなります。↓

これを横並びにしたいので、CSSを追加してあげます。

.container {
    display: flex;

画像とテキストを含んだcontainerというクラスに対して、display: flex;を指定しました。

横並びになりました。

あとは、画像とテキストの余白をあけたいのと、図ではちょっとわかりづらいのですが、画面の中央に配置したいので、CSSをさらに追加します。

.container  {
    justify-content:center;
}

.text-box {
    margin-left: 40px;
}

2カラムの表示ができました。

3カラムについてもやり方は、全く同じです。

横並びにしたい要素を親要素（今回はsectionが親要素）で囲んであげて、親要素に対してdisplay:flex;を指定してあげます。

3カラムの場合は、それぞれの要素を均等に配置したいということがあると思うので、そのときは親要素に対してjustfy-content: space-between;を指定してあげます。

こんな感じに、親要素の幅の中で均等に配置されます。

まとめ

複数のカラムを横並びに表示するには、display:flex;を使えば簡単！

フレックスボックスはまだまだ勉強していこうと思います。

それじゃ！

（※最後の図に記載されたjustfy-contentの記述に誤りがありました。正しくは[justify-content]です。）