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;
}

JavaScript

サンプルのように列が複数ある場合は、値を半角スペースで区切ってそれぞれの高さを指定してください。

まとめ

今回はFlexboxに関わる様々なプロパティを紹介しました。これらを組み合わせることでより自由度の高いレイアウトを組むことが可能となります。

今回は以上です。次回は今までのようなコードについてではなく、サイトをデザインしていく上で気を付けていきたいことについて考えてます。次回が最終回となりますので、どうぞ最後までお付き合いください。

(Visited 127 times, 1 visits today)

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

エヌ・キャリア・アカデミー

エヌ・キャリア・アカデミーは「21世紀のこれからの激変する社会を生き抜き、第一線で活躍することのできる人材を世に送り出していく」ことを教育理念にかかげ、IT系の職業訓練を実施している職業訓練校です。

この記事は、エヌ・キャリア・アカデミーのスタッフが執筆しています。

企業ホームページ：https://n-career.jp/