前回は、CSSで文字の色や大きさ、背景色などの「見た目」を整える方法を学びました。
今回は一歩進んで、「要素の配置」や「レイアウト」を制御するFlexbox（フレックスボックス） を使って画像と文章を横に並べたり、要素を画面中央に配置したりなど、今後よく使うレイアウトが実現できるようになります！
今日のテーマ
- Flexboxを使うと要素を横並びにできる
- 横並びだけでなく縦方向にも自在に配置できる
1.Flexboxとは？
Flexboxは、CSSで柔軟にレイアウトを組める仕組みです。
横並びや縦並び、中央揃え、均等配置といったレイアウトが非常に簡単に実現できます。
特徴は…
- 横並び・縦並びを簡単にできる
- 要素の中央揃えや均等配置が簡単にできる
- レスポンシブ（画面サイズに応じたレイアウト）にも強い
と、なっております。
2.Flexboxの基本構造
まずは、Flexboxを使うための最低限の構文を押さえましょう。
.container {
display: flex;
}このように、親要素（コンテナ）に display: flex; を指定すると、子要素が自動的に横並びになります。
例：
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>.container {
display: flex;
}
.item {
background: #ddd;
padding: 20px;
margin: 5px;
}上の例の様に、「A」「B」「C」が横に並んだレイアウトになります。
Flexboxの基本については以下のページに詳細があります。
3.よく使うプロパティ
Flexboxには超頻出のプロパティがあります。
とりあえずは以下の表のものの動きのイメージさえ掴めれば大丈夫です。
特にjustify-content、align-itemsはめちゃめちゃ使います。
| プロパティ | 対象 | 効果 | よく使う値 |
|---|---|---|---|
display: flex | 親 | Flexboxを有効にする | 必須 |
flex-direction | 親 | 並べる方向を決める | row（横）／column（縦） |
justify-content | 親 | 主軸（横方向）の並び方 | flex-start, center, space-between など |
align-items | 親 | 垂直方向の揃え方 | center, flex-start, stretch など |
gap | 親 | 子要素の間の隙間 | gap: 20px; など |
flex | 子 | 幅や比率を指定 | flex: 1; など |
これらのプロパティが使えるようになると自由自在に要素を動かすことができます！
See the Pen flexまとめ by kbyt (@kbo58) on CodePen.
またFlexboxのよくあるプロパティの詳細は以下のリンクにありますのでぜひどうぞ。
4.よくあるレイアウトパターン
4-1.実例：3つのボックスを横並び＆中央揃えにする
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>.container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
height: 100vh;
background-color: #f5f5f5;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
border-radius: 10px;
width: 100px;
text-align: center;
font-size: 20px;
}See the Pen flex-p1 by kbyt (@kbo58) on CodePen.
親要素にdisplay:flexを指定し、中央揃いにするためにjustify-content、align-itemsの値をそれぞれcenterに指定します。
また余白の調整のためにgapを使用すればOKです。
4-2.練習課題：自己紹介カードを横に3枚並べてみよう！
下のコードの.containerに対してにFlexboxで学習したプロパティを加えてアイテムがバランスよく横に並ぶようにしてみてください。
<h1>私の趣味</h1>
<div class="container">
<div class="item">Web制作</div>
<div class="item">ギター</div>
<div class="item">映画鑑賞</div>
</div>.container{
height: 200px;
}
.item{
width: 20%;
background-color: #fff;
border: 2px solid #ddd;
text-align: center;
padding: 40px;
border-radius: 20px;
background-color: #3498db;
color:#fff;
font-size: 20px;
}簡単でしたね！
わからない場合は上の例をもう一度復習してみましょう。
5.まとめ
- Flexboxを使えば、要素を横並び・中央揃え・均等配置など要素を柔軟に配置できる
- 基本は
display: flex;を親要素に指定するだけ justify-contentとalign-itemsで中央揃え・均等配置が可能- レスポンシブなデザインにも強いので、実務でも必須スキル！
6.次回予告｜第6章：JavaScriptの基本を学ぼう
Webページに「動き」や「反応」を加える魔法のスクリプト
HTMLとCSSだけでは、Webページに“動き”や“対話”を加えることはできません。
たとえば…
- ボタンを押したらメッセージが出る
- 入力フォームの内容をチェックする
- スクロールしたらアニメーションする
これらはすべて「JavaScript（ジャバスクリプト）」というプログラミング言語の力です。
次章では、JavaScriptの超基本から、実際のHTMLと組み合わせる方法まで、初心者にもわかりやすく解説していきます！
コメント