Skip to content

Commit

Permalink
2024/12/20 時点の英語版に基づき更新
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 committed Dec 30, 2024
1 parent 457f950 commit 1540461
Show file tree
Hide file tree
Showing 16 changed files with 1,484 additions and 753 deletions.
35 changes: 23 additions & 12 deletions files/ja/learn_web_development/core/css_layout/flexbox/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
---
title: フレックスボックス
slug: Learn_web_development/Core/CSS_layout/Flexbox
original_slug: Learn/CSS/CSS_layout/Flexbox
l10n:
sourceCommit: d6a792e3adce2c8b29a73a3b407e786091363980
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
{{LearnSidebar}}

{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout")}}

[フレックスボックス](/ja/docs/Web/CSS/CSS_flexible_box_layout) (Flexbox) は、アイテムを行または列に並べるための 1 次元のレイアウト方法です。アイテムがたわんで（伸びて）追加の空間を埋めたり、縮んで小さい空間に収まったりします。この記事では、すべての基本事項について説明します。

Expand All @@ -15,15 +16,25 @@ l10n:
<tr>
<th scope="row">前提知識:</th>
<td>
HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML"
>HTML 入門</a
>で学んでください）、および CSS の動作の仕組みの考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>で学んでください）。
<a href="/ja/docs/Learn_web_development/Core/Structuring_content"
>HTML によるコンテンツの構造化</a
>、
<a href="/ja/docs/Learn_web_development/Core/Styling_basics">CSS によるスタイル設定の基本</a>、
<a href="/ja/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本的なテキストとフォントのスタイル設定</a>、
<a href="/ja/docs/Learn_web_development/Core/CSS_layout/Introduction">CSS レイアウトの基本概念</a>の基礎知識。
</td>
</tr>
<tr>
<th scope="row">目的:</th>
<th scope="row">学習成果:</th>
<td>
フレックスボックスレイアウトシステムを使用して、ウェブのレイアウトを作成する方法を習得する。
<ul>
<li>フレックスボックスの目的。一連のブロック要素やインライン要素を、 1 次元で柔軟にレイアウトすること。</li>
<li>フレックスの用語 — フレックスコンテナー、フレックスアイテム、主軸、交差軸。</li>
<li>既定で <code>display: flex</code> が何をもたらすかを理解すること。</li>
<li>新しい行や列にコンテンツを折り返す方法。</li>
<li>フレックスアイテムを柔軟にサイズ変更したり、並べ替えたりすること。</li>
<li>コンテンツの位置合わせと配置。</li>
</ul>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -221,7 +232,7 @@ div {
- 上記のコードで使用した `center` の値により、アイテムは固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。これが、最初の例で既定では同じ高さの列になった理由です。
- `flex-start`、`self-start`、`start`、`flex-end`、`self-end`、`end` のような値を指定することもでき、それぞれすべてのアイテムを交差軸の先頭と末尾に配置します。`baseeline` を指定すると、フレックスアイテムのベースラインを揃えます。基本的に、各フレックスアイテムの交差始点とベースラインの間の距離が最も大きい要素の最初の行の下端に並べられます。詳細は {{cssxref("align-items")}} を参照してください。

{{cssxref("align-self")}} プロパティを適用することで、個々のフレックスアイテムの {{cssxref("align-items")}} のふるまいを上書きできます。 例えば、CSS に次のコードを追加してみてください。
個々のフレックスアイテムの {{cssxref("align-items")}} のふるまいは、 {{cssxref("align-self")}} プロパティを適用することで上書きできます。 例えば、 CSS に次のコードを追加してみてください。

```css
button:first-child {
Expand Down Expand Up @@ -342,11 +353,11 @@ button {

## スキルテスト

この記事の最後まで達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります。 [スキルテスト: フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills)を見てください。
この記事の最後まで達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります。 [スキルテスト: フレックスボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox_skills)を見てください。

## まとめ

以上でフレックスボックスの基本についての解説を終わります。これから学習を進めていく中で、フレックスボックスで楽しく遊んでいただけることを期待しています。次は、CSS レイアウトのもう 1 つの重要な側面を見ていきましょう。[CSS グリッド](/ja/docs/Learn/CSS/CSS_layout/Grids)です。
以上でフレックスボックスの基本についての解説を終わります。これから学習を進めていく中で、フレックスボックスで楽しく遊んでいただけることを期待しています。次は、CSS レイアウトのもう 1 つの重要な側面を見ていきましょう。[CSS グリッド](/ja/docs/Learn_web_development/Core/CSS_layout/Grids)です。

## 関連情報

Expand All @@ -358,4 +369,4 @@ button {
- [CSS-Tricks guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — フレックスボックスのすべてを視覚的にわかりやすく説明した記事です。
- [Flexbox Froggy](https://flexboxfroggy.com/) — フレックスボックスの基本を学び、理解を深めるための教育ゲームです。

{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout")}}
269 changes: 240 additions & 29 deletions files/ja/learn_web_development/core/css_layout/flexbox_skills/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
---
title: "スキルテスト: フレックスボックス"
slug: Learn_web_development/Core/CSS_layout/Flexbox_skills
original_slug: Learn/CSS/CSS_layout/Flexbox_skills
l10n:
sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---

{{LearnSidebar}}

このスキルテストの目的は、[フレックスボックスとフレックスアイテム](/ja/docs/Learn/CSS/CSS_layout/Flexbox)がどのように動作するか理解しているかどうかを評価することです。以下にフレックスボックスを使用して作成する 4 つの一般的なデザインパターンを示します。課題はそれらを構築することです。
このスキルテストの目的は、[フレックスボックスとフレックスアイテム](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox)がどのように動作するか理解しているかどうかを評価することです。以下にフレックスボックスを使用して作成する 4 つの一般的なデザインパターンを示します。課題はそれらを構築することです。

> [!NOTE]
> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
>
> 以下のコードブロックで **"Play"** をクリックすると、 MDN Playground で例を編集することができます。
> コードをコピー（クリップボードアイコンをクリック）し、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに貼り付けることもできます。
> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
## 課題 1
Expand All @@ -25,11 +24,59 @@ l10n:

以下のライブコードを更新して、完成例を再現してみてください。

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

> [!CALLOUT]
>
> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox1-download.html)しましょう。
```html live-sample___flexbox1
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/products">Our Products</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>
```

```css hidden live-sample___flexbox1
body {
font: 1.2em / 1.5 sans-serif;
}
nav ul {
max-width: 700px;
list-style: none;
padding: 0;
margin: 0;
}
nav a:link,
nav a:visited {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
display: inline-block;
text-decoration: none;
}
```

```css live-sample___flexbox1
nav ul {
}
```

{{EmbedLiveSample("flexbox1", "", "240px")}}

<details>
<summary>ここをクリックすると、解決策を表示します。</summary>

`display: flex` を適用すると、`justify-content` プロパティを使用して空間を制御することができます。

```css
nav ul {
display: flex;
justify-content: space-between;
}
```

</details>

## 課題 2

Expand All @@ -39,17 +86,76 @@ l10n:

![フレックスアイテムは、 3 つの等しい大きさの段組みでレイアウトされ、コンテンツの量が異なります。](flex-task2.png)

以下のライブコードを更新して、完成例を再現してみてください。

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}

追加の問題です。
**ボーナス問題:** これで最初のアイテムを他のアイテムの 2 倍の大きさにできますか？

- これで最初のアイテムを他のアイテムの 2 倍の大きさにできますか？
以下のライブコードを更新して、完成例を再現してみてください。

> [!CALLOUT]
>
> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox2-download.html)しましょう。
```html live-sample___flexbox2
<ul>
<li>I am small</li>
<li>I have more content than the very small item.</li>
<li>
I have lots of content. So much content that I don't know where it is all
going to go. I'm glad that CSS is pretty good at dealing with situations
where we end up with more words than expected!
</li>
</ul>
```

```css hidden live-sample___flexbox2
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
max-width: 700px;
list-style: none;
padding: 0;
margin: 0;
}

li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
}
```

```css live-sample___flexbox2
ul {
}

li {
}
```

{{EmbedLiveSample("flexbox2", "", "240px")}}

<details>
<summary>ここをクリックすると、解決策を表示します。</summary>

一括指定を使用するのが最善ですので、このシナリオでは `flex: 1` が最も適切な答えでしょう。したがって、最適な結果は次のようになります。

```css
ul {
display: flex;
}

li {
flex: 1;
}
```

ボーナス問題では、最初の要素を対象とし、 `flex: 2;`（または `flex: 2 0 0;` または `flex-grow: 2`）を設定するセレクターを追加します。

```css
li:first-child {
flex: 2;
}
```

</details>

## 課題 3

Expand All @@ -61,11 +167,54 @@ l10n:

以下のライブコードを更新して、完成例を再現してみてください。

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

> [!CALLOUT]
>
> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox3-download.html)しましょう。
```html live-sample___flexbox3
<div class="parent">
<div class="child">Center me.</div>
</div>
```

```css hidden live-sample___flexbox3
body {
font: 1.2em / 1.5 sans-serif;
}
.parent {
border: 2px solid #77a6b6;
border-radius: 0.5em;
height: 200px;
}

.child {
background-color: #4d7298;
color: #fff;
padding: 0.5em;
width: 150px;
}
```

```css hidden live-sample___flexbox3
.parent {
}

.child {
}
```

{{EmbedLiveSample("flexbox3", "", "210px")}}

<details>
<summary>ここをクリックすると、解決策を表示します。</summary>

アイテムを水平方向と垂直方向に中央揃えにするには、親スタイルを変更するだけで十分です。

```css
.parent {
display: flex;
justify-content: center;
align-items: center;
}
```

</details>

## 課題 4

Expand All @@ -75,8 +224,70 @@ l10n:

以下のライブコードを更新して、完成例を再現してみてください。

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 1100)}}

> [!CALLOUT]
>
> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/flexbox/flexbox4-download.html)しましょう。
```html live-sample___flexbox4
<ul>
<li>Turnip</li>
<li>greens</li>
<li>yarrow</li>
<li>ricebean</li>
<li>rutabaga</li>
<li>endive</li>
<li>cauliflower</li>
<li>sea lettuce</li>
<li>kohlrabi</li>
<li>amaranth</li>
</ul>
```

```css hidden live-sample___flexbox4
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
width: 450px;
list-style: none;
padding: 0;
margin: 0;
}

li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: #fff;
padding: 0.5em;
margin: 0.5em;
}
```

```css live-sample___flexbox4
ul {
}

li {
}
```

{{EmbedLiveSample("flexbox4", "", "260px")}}

<details>
<summary>ここをクリックすると、解決策を表示します。</summary>

この課題では、フレックス行を折り返すための `flex-wrap` プロパティを理解することが求められます。 さらに、上記の例のような外見にするには、子要素に `flex: auto`（または `flex: 1 1 auto;`）を設定する必要があります。

```css
ul {
display: flex;
flex-wrap: wrap;
}

li {
flex: auto;
}
```

</details>

## 関連情報

- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)
Loading

0 comments on commit 1540461

Please sign in to comment.