てがろぐで個人サイトを作るための基礎知識

CSSを使ったレイアウトの一例・横並びのレイアウト編

CSSでレイアウトを決めるときに使えるプロパティ群の紹介その1です。
それでは、お手柔らかによろしくお願いします。

横並びのレイアウトを指定するプロパティ
何も指定しなければ要素は縦に並んでいくだけですが、ここで紹介する書き方を実践すれば要素を横並びにすることができます。
早速見ていきましょう。
まずはこちらのHTMLコードを見てください。
<div class="container">
    <div class="item">hogehoge_1</div>
    <div class="item">hogehoge_2</div>
    <div class="item">hogehoge_3</div>
    <div class="item">hogehoge_4</div>
</div>

この状態だとhogehoge_1～hogehoge4が縦に並ぶだけですね。
そこで、CSSでcontainerクラスにこのようなプロパティを追加します。
.container{
    display: flex
}
こうするとhogehoge_1～4が横並びになります。
このようなHTMLとCSSの書き方をFlexbox(フレックスボックス)と呼び、現在CSSでレイアウトを組むときのスタンダードな書き方になります。
親要素にdisplay: flexを適応したうえで、追加のプロパティを記述すれば要素の並べ方を自分好みにカスタマイズすることができます。
ここからはその追加のプロパティを紹介していきましょう。なお、以下で紹介するプロパティは全て親要素に適応するものです。

flex-direction
子要素をどの方向に配置していくかを指定するプロパティです。
値は以下の4つです。

• row(初期値)：子要素を左から右に配置
• row-reverse：子要素を右から左に配置
• column：子要素を上から下に配置
• column-reverse：子要素を下から上へ配置

flex-wrap
子要素を一行で並べるか複数行で並べるかを指定します。
値は以下の3つです。

• nowrap(初期値)：一行に並べる。
• wrap：複数行で並べる。上から下へ並べる。
• wrap-reverse：複数行で並べる。下から上へ並べる。

justify-content
親要素に空きスペースがある時、子要素を水平方向のどの位置に配置するかを指定します。
値は以下の5つです。

• flex-start(初期値)：左揃え
• flex-end：右揃え
• center：中央揃え
• space-between：最初と最後の子要素を両端に配置し、残りの子要素を均等に配置する
• speace-around：全ての子要素を均等に配置する

align-items
親要素に空きスペースがある時、子要素を垂直方向のどの位置に配置するかを指定します。
値は以下の5つです。

• flex-start：親要素の開始位置から配置し、上揃えにする
• flex-end：親要素の終了位置から配置し、下揃えにする
• center：中央揃え
• baseline：ベースラインで揃える

※ベースライン：英語文字の下端のこと

align-content
複数行の子要素の垂直方向の揃えを指定します。
flex-wrapの値がnowrapの場合、このプロパティは無効になります(子要素が1行になるため)。
値は以下の6つです。

• stretch(初期値)：親要素の高さに合わせて広げて配置
• flex-start：親要素の開始位置から配置し、上揃えにする
• flex-end：親要素の終了位置から配置し、下揃えにする
• center：中央揃え
• space-between：最初と最後の子要素を上下の端に配置し、残りの子要素を均等に配置する
• speace-around：全ての子要素を均等に配置する