はじめに
この実験では、応答性と柔軟性のあるウェブデザインを作成するための強力なレイアウト技術である CSS Flexbox の flex-grow プロパティを参加者が探求します。段階的なアプローチを通じて、学習者は HTML ファイルを作成し、flexbox コンテナを設定し、要素がどのように動的に拡大し、利用可能な空間を分配するかを理解するために、さまざまな flex-grow 値を試します。
この実験では、学生が基本的な HTML 構造を作成し、flexbox コンテナを定義し、子要素に flex-grow プロパティを適用する方法を案内します。数値を設定し、ボックスがどのように比例して拡大するかを観察することで、参加者はレイアウトの柔軟性を制御し、ウェブデザインにおける flex-grow の微妙な動作を理解するための実践的な洞察を得るでしょう。
HTML ファイルを作成して基本構造を設定する
このステップでは、CSS Flexbox の flex-grow プロパティを探求するための基本的な HTML ファイルを作成します。基本的な HTML 構造を設定し、flexbox のデモ用の環境を整えます。
まず、プロジェクトディレクトリに移動して HTML ファイルを作成します。
cd ~/project
touch index.html
次に、WebIDE で index.html ファイルを開き、次の HTML 構造を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-grow Demonstration</title>
<style>
/* CSS スタイルは後続のステップで追加します */
</style>
</head>
<body>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>
この基本的な HTML 構造には、以下が含まれています。
- flexbox コンテナになるコンテナ
<div> - flex-grow を示すために使用する 3 つのボックスを表す子
<div>要素 - 後続のステップで CSS を追加するためのプレースホルダー
<style>セクション
ファイルを表示したときの例の出力は以下の通りです。
[基本構造と 3 つの div ボックスが作成された HTML ファイル]
このファイルは、次のステップで CSS Flexbox をさらに探求する準備ができています。
flex-grow プロパティを持つ Flexbox コンテナを定義する
このステップでは、flexbox コンテナを定義する方法と flex-grow プロパティの基本概念を学びます。WebIDE で index.html ファイルを開き、<style> セクションを変更して flexbox コンテナを作成します。
flexbox コンテナを定義するために、次の CSS を追加します。
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
CSS を分解してみましょう。
display: flex;でコンテナを flex コンテナにします。width: 100%;でコンテナを横幅いっぱいに広げます。.boxのスタイルは個々の flex 項目の外見を定義します。
ブラウザで表示したときの例の出力は以下の通りです。
[3 つの緑色のボックスが水平方向の 1 行に表示され、コンテナを埋め尽くしている]
flex-grow プロパティは、余分な空間がある場合に flex 項目が互いにどのように成長するかを決定します。デフォルトでは、flex-grow は 0 に設定されており、つまり項目は初期サイズを超えて成長しません。
デフォルトの動作を確認するには、Web ブラウザで HTML ファイルを開きます。ボックスが初期サイズを維持し、コンテナを埋め尽くして拡大しないことに気付くでしょう。
flex-grow の初期値と継承値を探求する
このステップでは、flex-grow プロパティのデフォルトと継承の動作を調べます。index.html ファイルを開き、<style> セクションを更新してこれらの概念を探求します。
まず、flex-grow の初期値を理解しましょう。
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
/* 初期の flex-grow はデフォルトで 0 */
/* flex-grow: 0; */
}
.box1 {
/* 初期値を明示的に設定 */
flex-grow: 0;
}
.box2 {
/* 継承を示す */
flex-grow: inherit;
}
.box3 {
/* 初期状態を示す別の方法 */
flex-grow: initial;
}
</style>
重要な点：
flex-grow: 0;はデフォルト値で、項目が成長しないことを意味します。inheritは親コンテナのflex-grow値を引き継ぎます。initialはプロパティをデフォルト値 (0) にリセットします。
ブラウザで表示したときの例の出力は以下の通りです。
[同じ幅の 3 つの緑色のボックスが表示され、コンテナを埋め尽くして拡大していない]
さらに説明するために、これらの値がどのように機能するかを示すように HTML を変更できます。
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 0)</div>
<div class="box box2">Box 2 (flex-grow: inherit)</div>
<div class="box box3">Box 3 (flex-grow: initial)</div>
</div>
</body>
この例は、デフォルトでは flex 項目が初期サイズを維持し、コンテナ内の余分な空間を埋め尽くして成長しないことを示しています。
異なる要素に対して数値型の flex-grow 値を設定する
このステップでは、flex 項目がコンテナ内でどのように拡大するかを制御するために、flex-grow に数値を使用する方法を学びます。index.html ファイルを開き、<style> セクションを更新してさまざまな数値型の flex-grow 値を探求します。
次のスタイルで CSS を更新します。
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
/* Box 1 は 1 単位成長します */
flex-grow: 1;
}
.box2 {
/* Box 2 は 2 単位成長します */
flex-grow: 2;
}
.box3 {
/* Box 3 は 3 単位成長します */
flex-grow: 3;
}
</style>
新しいスタイルに合わせて HTML を更新します。
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 3)</div>
</div>
</body>
重要な点：
flex-grow値は、余分な空間がどのように分配されるかを決定します。- 値が高いほど、他の項目に比べて成長が大きくなります。
- 利用可能な合計空間は比例して分割されます。
ブラウザで表示したときの例の出力は以下の通りです。
[幅の異なる 3 つの緑色のボックス:
- Box 1 は最も狭い (1 単位)
- Box 2 はより広い (2 単位)
- Box 3 は最も広い (3 単位)]
これらのボックスは、それぞれの flex-grow 値に基づいて異なる拡大率で拡大し、flex コンテナ内の要素のサイズを制御する方法を示しています。
flex-grow の比率を試す
このステップでは、より複雑な flex-grow の比率を探求し、flex コンテナ内で異なる値がどのように相互作用するかを理解します。index.html ファイルを以下のコードで更新します。
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.box {
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
background-color: #3498db;
flex-grow: 1;
}
.box2 {
background-color: #e74c3c;
flex-grow: 2;
}
.box3 {
background-color: #2ecc71;
flex-grow: 1;
}
.box4 {
background-color: #f39c12;
flex-grow: 4;
}
</style>
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 1)</div>
<div class="box box4">Box 4 (flex-grow: 4)</div>
</div>
</body>
理解すべき重要な概念：
- 合計 flex-grow 値：1 + 2 + 1 + 4 = 8
- Box 1 と Box 3 はそれぞれ余分な空間の 1/8 を獲得
- Box 2 は余分な空間の 2/8 を獲得
- Box 4 は余分な空間の 4/8 (半分) を獲得
ブラウザで表示したときの例の出力は以下の通りです。
[幅の異なる 4 つの色付きのボックス:
- Box 1 と Box 3: 狭い (それぞれ 1/8)
- Box 2: やや広い (2/8)
- Box 4: 最も広い (4/8 またはコンテナの半分)]
この例は、flex-grow 値が比例したサイズを作成し、要素の拡大を微細に制御できる方法を示しています。
まとめ
この実験では、参加者は構造化された HTML ファイルを作成し、複数の div 要素を持つ柔軟なコンテナを実装することで、CSS Flexbox の flex-grow プロパティを探求します。この実験は、コンテナと 3 つの子要素のボックスを持つ基本的な HTML 構造を設定することから始まり、Flexbox 実験の基礎となる設定を示します。
段階的な CSS スタイリングを通じて、学習者は標準的なコンテナをどのように Flexbox レイアウトに変換するかを学び、flex-grow プロパティを適用して要素がどのように動的に拡大し、利用可能な空間を分配するかを理解します。実践的なアプローチにより、参加者はさまざまな flex-grow 値を試してみることができ、数値の比率が Flex コンテナ要素のサイズと分配にどのように影響するかを観察することができます。
