レイアウトの調整に役立つ！CSSのflexboxの使い方【初心者向け】
デザイン初心者向けにCSSのflexboxの使い方について解説しています。PCやスマホ向けのレイアウト調整に役立つ知識です。デザインの作業をする上では欠かせない要素になるので、実際にレイアウトを調整しながら理解していきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSのflexboxの使い方について解説しています。
PCでは横並び、スマホでは縦並びをしたいという時にレイアウトの調整ができます。PCとスマホの両方に対応したサイトを作る上では必須の知識になるので、ぜひ覚えておきましょう。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
今回はflexboxを使ってみよう。
田島メンター！！flexboxというのは何ですか〜？
親要素に記述することで、複数の子要素に対して色々な配置の指定ができる便利なものだよ。さっそくやってみよう。
分かりました！
Flexboxとは
Flexbox(Flexible Box Layout Module)は親要素に簡単な指示を記述することで、複数の子要素についてさまざまなレイアウトの調整をまとめて行うことができるものです。
記述方法
Flexboxの記述は親要素で行うというのが大事なポイントです。まず適用したい項目の親要素に以下のように入力します。
display: flex;
インライン要素に適用する場合は以下のように入力します。
display: inline-flex;
これを記入した要素は自動的に「Flexコンテナ」となり、その子要素は「Flexアイテム」となります。これによってFlexboxのプロパティが使用可能になります。代表的なプロパティをいくつか書いてみましょう。
レイアウトの調整を行いたいものの親要素に、このように記述するんだ。
親要素がFlexコンテナになることで、その子要素の配置についての指定ができるようになるっていう感じでしょうか。
そうだね。次は並び方や配置に関する基本的な機能を紹介するよ。
flex-directionの書き方
flex-directionは項目の並び方を指定することのできるプロパティです。
以下のHTMLとCSSを使い、CSSのflex-directionの値(青文字の部分)を変えてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
</body>
</html>
CSS
.menu{
display: flex;
flex-direction: row;
}
.item{
text-align: center;
width: 50px;
height: 20px;
padding : 3%;
margin : 3%;
background-color: #c97796;
color: white;
}
rowにした場合：横並び
左から右へ、項目を横に並べます。rowの代わりにrow-reverseにすることで並び順を逆にすることもできます。
columnにした場合：縦並び
上から下へ、項目を縦に並べます。columnの代わりにcolumn-reverseにすることで並び順を逆にすることもできます。
flex-wrapの書き方
flex-wrapでは回り込み・折り返しを行うかどうかを設定することができます。
CSSのflex-wrapの値(青文字の部分)を変えてみましょう。(HTMLは先ほどと同じものを使います)
.menu{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.item{
text-align: center;
width: 50px;
height: 20px;
padding : 3%;
margin : 3%;
background-color: #c97796;
color: white;
}
nowrapにした場合：折り返しなし
折り返しをせず、画面に合うように縮小されます。
wrapにした場合：折り返しあり
項目が折り返されて下のように表示されます。
また、wrap-reverseにした場合は項目が折り返され、順番が上下逆になります。
justify-contentの書き方
justify-contentは項目の配置場所を指定するプロパティです。
同様に、CSSのjustify-contentの値(青文字の部分)を変えてみましょう。
.menu{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.item{
text-align: center;
width: 50px;
height: 20px;
padding : 3%;
margin : 3%;
background-color: #c97796;
color: white;
}
flex-startにした場合：前詰め
横並びのときは左詰め・縦並びのときは上詰めになります。(画像は横並びの場合です)
flex-endにした場合：後詰め
横並びのときは右詰め・縦並びのときは下詰めになります。(画像は横並びの場合です)
centerにした場合：中央揃い
各項目は中央に寄せられます。(画像は横並びの場合です)
以上、flexboxの使い方を紹介しました。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
それぞれの状態で画面のサイズを変えたりして色々見てみよう。
こうすると横並びが簡単にできますし、折り返しなどの設定もすごくやりやすいですね。
このような複数のコンテンツのレイアウトにFlexコンテナはとても有効なので、積極的に使ってみよう。
そうですね、やってみます。ありがとうございました！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルWebサイトを開発することが可能です。
独学に限界を感じている場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
