display と Flexbox を使ってみよう
更新日：2026-08-02
前のページでは、Chrome DevTools を使って、
- HTML構造
- CSS
- レイアウト
を確認しました。
今回は、Web制作で非常によく使われる、
- display
- Flexbox
を学んでいきます。
これを理解すると、
横並びレイアウト
が作れるようになります。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
├── css/
│ └── style.css
└── images/
└── image.jpg
まずは完成イメージ
今回は、
画像 + テキスト
を横並びにしてみます。
HTMLを書いてみよう
まずは、以下のように index.html を変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexboxの練習</title>
<link
rel="stylesheet"
href="css/style.css"
>
</head>
<body>
<div class="card">
<img
src="images/image.jpg"
alt="サンプル画像"
class="image"
>
<div class="content">
<h1 class="title">
Flexboxの練習
</h1>
<p class="message">
横並びレイアウトを作っています。
</p>
</div>
</div>
</body>
</html>
CSSを書いてみよう
次に、css/style.css を以下のように変更してください。
body {
background-color: #f3f4f6;
padding-top: 40px;
}
.card {
width: 700px;
margin: 0 auto;
padding: 24px;
background-color: white;
border-radius: 12px;
display: flex;
gap: 24px;
align-items: center;
}
.image {
width: 250px;
border-radius: 12px;
}
.title {
color: #2563eb;
font-size: 32px;
}
.message {
color: #4b5563;
font-size: 18px;
}
保存したあと、ブラウザを確認してください。
横並びになった
画像とテキストが横並びになったはずです。
これは、
display: flex;
を使ったためです。
display とは？
display は、
要素をどう表示するか
を決めるCSSです。
非常によく使われます。
display: flex;
display: flex;
を指定すると、
子要素を横並びにする
動きになります。
今回は、
- 画像
- テキスト部分
が横並びになっています。
子要素とは？
今回の .card の中には、
<img><div class="content">
があります。
これらが「子要素」です。
gap
gap: 24px;
は、要素同士の間隔です。
現在は、
画像とテキストの間を24px空ける
という意味です。
align-items: center;
align-items: center;
は、縦方向の位置を揃える設定です。
今回は、
中央揃え
になっています。
div は箱として使われている
今回の、
<div class="content">
は、
- 見出し
- 文章
をまとめる箱として使っています。
つまり、
箱の中に箱を入れている
状態です。
Webサイトは「箱の組み合わせ」
実際のWebサイトでは、
- ヘッダー
- メニュー
- カード
- サイドバー
など、ほとんどが「箱」の組み合わせです。
そして、
Flexboxで並べる
ことが非常に多いです。
width を変えてみよう
例えば、
.card {
width: 1000px;
}
にするとどうなるでしょうか？
箱が広くなるはずです。
gap を変えてみよう
例えば、
gap: 80px;
にすると、画像と文章の距離がかなり離れます。
CSS学習では、
数字を変えて試す
ことが非常に重要です。
最初は「横並びできる」でOK
今は、
display: flex;
を書くと、
横並びになる
くらいの理解で問題ありません。
実際に何度も使いながら、少しずつ理解が深まっていきます。
実際の現場でも超重要
Flexbox は、
- LP
- コーポレートサイト
- ECサイト
- 管理画面
など、ほぼすべてのWeb制作で登場します。
HTML/CSS学習では非常に重要な内容です。
次のページでは
次のページでは、
- レスポンシブデザイン
- スマホ表示
- メディアクエリ
などを学んでいきます。
実際のWebサイト制作にさらに近づいていきます。