HTML/CSS基礎第19回『Flexboxを理解しよう』

2023年7月31日2024年5月22日

HTML/CSS基礎第19回では「Flexbox」について解説します。
Flexboxとは、横並びのレイアウトを作ることで、複雑なレイアウトを簡単に組むための記述方式となります。現在主流のレイアウト方式となっているため、是非この項目をマスターしてきれいなレイアウトを作っていってください。

この記事では以下のHTMLコードとCSSをベースに、Flexboxの仕組みを学習していきます。

<!--HTML-->
<div class="container">
    <div class="item">Item1</div>
    <div class="item">Item2</div>
    <div class="item">Item3</div>
    <div class="item">Item4</div>
    <div class="item">Item5</div>
    <div class="item">Item6</div>
    <div class="item">Item7</div>
</div>

JavaScript

/*CSS*/
.item{
    background: paleturquoise;
    color:royalblue;
    margin: 10px;
    padding: 10px;
}

JavaScript

上記のCSSコードに「display」プロパティを設定することで、横並びのデザインとすることができます。

/*CSS*/
.container{
    display:flex;
}
.item{
    background: paleturquoise;
    color:royalblue;
    margin: 10px;
    padding: 10px;
}

JavaScript

前置きが長くなりましたが、この状態からスタートします。

この後はFlexboxに関わるプロパティと値をいくつか紹介していきます。プロパティも値もすべてを紹介しきることはできないため、色々と調べながらWebサイト作成を進めていただければと思います。

flex-direction

flex-directionプロパティを設定することで、子要素をどの方向に配置していくかを指定することができます。

/*CSS*/
.container{
    display:flex;
    flex-direction: row-reverse;
}
.item{
    background: paleturquoise;
    color:royalblue;
    margin: 10px;
    padding: 10px;
}

JavaScript

row：（初期値）左から右のならびとなります。

row-reverse：右から左の並びとなります。

column：上から下方向の並びとなります。

column-reverse：下から上方向の並びとなります。

flex-wrap

flex-wrapプロパティとは、要素の折り返し方法を指定することができます。

/*CSS*/
.container{
    display:flex;
    flex-wrap: wrap;
}
.item{
    background: paleturquoise;
    color:royalblue;
    margin: 10px;
    padding: 10px;
}

JavaScript

nowrap：（初期値）折り返しなしの設定となります。

wrap：折り返します。

wrap-reverse：逆方向に折り返します。

justify-content

justify-contentプロパティとは、水平方向の揃え方を指定することができます。

.container{
    display:flex;
    justify-content: flex-end;
}
.item{
    background: paleturquoise;
    color:royalblue;
    margin: 10px;
    padding: 10px;
}

JavaScript

flex-start：（初期値）行の頭に揃えます。

flex-end：行末揃え。通常は右に揃えます。

center：センターに揃えます。

align-itemsプロパティとは、垂直方向の揃え方を指定することができる。

CSSグリッド

CSSグリッドとは、同じ大きさのボックスを等間隔で並べていく方法です。

.container{
    display:grid;
}
.item{
    background: paleturquoise;
    color:royalblue;
    margin: 10px;
    padding: 10px;
}

JavaScript

grid-template-columuns

grid-template-columunsプロパティを指定すると、グリッドアイテムの横幅を指定することができます。

.container{
    display:grid;
    grid-template-columns: 200px 200px 200px;
}
.item{
    background: paleturquoise;
    color:royalblue;
    padding: 10px;
}

JavaScript

一列にグリッドアイテムが複数必要な場合は、半角スペースで区切って必要な数だけ幅を指定します。

また、「px」ではなく「fr」という単位を使って幅を指定することもできます。frは「fraction」を指し、親要素から見た子要素の大きさの割合を示します。上記サンプルコードのすべての「200px」を「1fr」に変更すると、画面の横幅いっぱいに３等分されたグリッドアイテムが表示され、画面の幅を変更すると、それに合わせて自動的に伸縮します。

gap

gapプロパティを指定すると、グリッドアイテム同士の余白を指定することができます。

.container{
    display:grid;
    grid-template-columns: 200px 200px 200px;
    gap:10px;
}
.item{
    background: paleturquoise;
    color:royalblue;
    padding: 10px;
}

JavaScript

グリッドアイテム同士幅を調整することができます。

grid-template-rows

grid-template-rowsプロパティは、グリッドアイテムの高さを指定することができます。

.container{
    display:grid;
    grid-template-columns: 200px 200px 200px;
    gap:10px;
    grid-template-rows: 200px　200px　200px;
}
.item{
    background: paleturquoise;
    color:royalblue;
    padding: 10px;
}