3.1 Flexbox
FlexboxとGridを使った柔軟なレイアウトの作成は、現代の レスポンシブウェブサイトを構築するための重要な技術だよ。これらの技術を使えば、ページ内の要素の配置を簡単にコントロールできて、いろんなスクリーンサイズやデバイスに適応させることができるんだ。
Flexbox（Flexible Box Layout Module）は、要素を一方向に（行または列に）配置するためのものさ。Flexboxを使えば、柔軟でレスポンシブなレイアウトを簡単に作れるよ。
Flexboxの基本コンセプト:
- Flexコンテナ:
display: flexプロパティを適用する要素だよ - Flexアイテム: Flexコンテナ内に配置される子要素たちだよ
Flexboxのプロパティ
Flexコンテナ:
display: flex: 要素をflexコンテナとして定義するんだflex-direction: flexアイテムの配置方向を設定する (row,column,row-reverse,column-reverse)justify-content: 主軸に沿ったflexアイテムの整列を管理する (flex-start,flex-end,center,space-between,space-around)align-items: 交差軸に沿ったflexアイテムの整列を管理する (stretch,flex-start,flex-end,center,baseline)
Flexアイテム:
flex-grow: 空きスペースがあるときにアイテムを大きくする能力を決定するflex-shrink: スペースが足りないときにアイテムを小さくする能力を決定するflex-basis: 空きスペースを分配する前のアイテムの初期サイズを設定するalign-self:align-itemsで指定された交差軸に沿った整列をアイテムごとに上書きする
Flexboxの使い方の例
3つのカラムで、様々な画面サイズに適応するレイアウトを作ってみよう:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexboxの例</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">コラム 1</div>
<div class="flex-item">コラム 2</div>
<div class="flex-item">コラム 3</div>
</div>
</body>
</html>
コードの説明:
-
.flex-container: コンテナをflexコンテナとして定義し、要素を等間隔に整列させ、スペースが不足した場合に要素が次の行に移動するようにするんだ -
.flex-item: flexアイテムは、均等なスペースを占有し、最小幅200pxを持ち、コンテナ内で均等に配置されるんだ
3.2 CSS Grid
CSS Grid Layoutは、二次元のレイアウトシステムで、行と列を使って複雑なレイアウトを作成できるんだよ。
CSS Gridの基本コンセプト:
- Gridコンテナ:
display: gridプロパティを適用する要素だよ - Gridアイテム: gridコンテナ内に配置される子要素たちだよ
CSS Gridのプロパティ
Gridコンテナ:
display: grid: 要素をgridコンテナとして定義するんだgrid-template-columns: グリッド内の列の数とサイズを設定するgrid-template-rows: グリッド内の行の数とサイズを設定するgap: 行と列の間のスペースを管理するjustify-items: gridアイテムの水平な整列を管理するalign-items: gridアイテムの垂直な整列を管理する
grid-column: アイテムがどのくらいの列にわたるかを決定するgrid-row: アイテムがどのくらいの行にわたるかを決定するjustify-self: アイテムの水平な整列を上書きするalign-self: アイテムの垂直な整列を上書きする
Gridアイテム:
CSS Gridの使い方の例
3つのカラムと2つの行があるレイアウトを作って、様々な画面サイズに適応させよう。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gridの例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">アイテム 1</div>
<div class="grid-item">アイテム 2</div>
<div class="grid-item">アイテム 3</div>
<div class="grid-item">アイテム 4</div>
<div class="grid-item">アイテム 5</div>
<div class="grid-item">アイテム 6</div>
</div>
</body>
</html>
コードの説明:
.grid-container: コンテナをgridコンテナとして定義し、3つのカラムと2つの行を持ち、各要素が均等なスペースを占有するんだ.grid-item: 均等なマージンと背景を持ったgridアイテムだよ
GO TO FULL VERSION