-
Second column
+
2 段目
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
@@ -105,7 +101,7 @@ div:nth-of-type(2) {
}
```
-ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2 列の間の溝のために 4% の空きを残し、コンテンツに余裕を持たせることができます。 さらに次のようにして、列を浮動ブロックにする必要があります。
+ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2 列の間の溝のために 4% の空きを残し、コンテンツに余裕を持たせることができます。 さらに次のようにして、列を浮動ボックスにする必要があります。
```css
div:nth-of-type(1) {
@@ -128,9 +124,9 @@ div:nth-of-type(2) {
> [!NOTE]
> この例は [0_two-column-layout.html](https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) で実行できます（[ソースコード](https://github.com/mdn/learning-area/blob/main/css/css-layout/floats/0_two-column-layout.html)も見る）。
-## 単純な過去のグリッドフレームワークを作成する
+## 単純な古いグリッドフレームワークを作成する
-過去のフレームワークの大部分は、グリッドのように見えるものを作成するために、{{cssxref("float")}} プロパティのふるまいを使用して、ある列を別の列の隣に浮動します。 浮動ブロックによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、[浮動ブロックとクリア](/ja/docs/Learn/CSS/CSS_layout/Floats)のレッスンで学んだことを基にしてさらに高度な概念を紹介します。
+古いフレームワークの大部分は、グリッドのように見えるものを作成するために、{{cssxref("float")}} プロパティのふるまいを使用して、ある列を別の列の隣に浮動します。 浮動ボックスによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、[浮動ボックスとクリア](/ja/docs/Learn_web_development/Core/CSS_layout/Floats)のレッスンで学んだことを基にしてさらに高度な概念を紹介します。
作成する最も簡単な種類のグリッドフレームワークは固定幅のものです — デザインに必要な合計幅、列数、および溝幅と列幅を求める必要があります。 ブラウザーの幅に合わせて増減する列を含むグリッドにデザインをレイアウトすることにした場合は、列とそれらの間の溝に対してパーセント幅を計算する必要があります。
@@ -171,7 +167,7 @@ div:nth-of-type(2) {
-{{htmlelement("style")}} 要素に、次のコードを追加します。 これにより、`wrapper` コンテナーの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。 これにより、列幅と溝幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で {{cssxref("box-sizing")}} を `border-box` に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、[CSS 代替ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model#css_代替ボックスモデル)を参照）。
+{{htmlelement("style")}} 要素に、次のコードを追加します。 これにより、`wrapper` コンテナーの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。 これにより、列幅と溝幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で {{cssxref("box-sizing")}} を `border-box` に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、[CSS 代替ボックスモデル](/ja/docs/Learn_web_development/Core/Styling_basics/Box_model#css_代替ボックスモデル)を参照）。
```css
* {
@@ -321,7 +317,7 @@ body {
}
```
-パーセントの {{cssxref("width")}} を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために {{cssxref("max-width")}} プロパティも追加しました。
+パーセント値の {{cssxref("width")}} を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために {{cssxref("max-width")}} プロパティも追加しました。
次に、（`.col` セレクターの）4 番目の CSS ルールを次のように更新します。
@@ -464,7 +460,7 @@ CSS でコンテナー要素を 1 列幅だけオフセットするクラスを
}
```
-パーセントを自分で計算したい場合は、こちらを使用してください。
+パーセント値を自分で計算したい場合は、こちらを使用してください。
```css
.offset-by-one {
@@ -494,9 +490,9 @@ CSS でコンテナー要素を 1 列幅だけオフセットするクラスを
> [!NOTE]
> 特別な演習として、`offset-by-two` クラスを実装できますか？
-### 浮動ブロックのグリッドの制限
+### 浮動ボックスのグリッドの制限
-このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。 浮動ブロックの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。
+このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。 浮動ボックスの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。
また、要素のコンテンツがそれらが占める行よりも広くなると、オーバーフローしてだらしなく見えることも覚えておいてください。
@@ -504,7 +500,7 @@ CSS でコンテナー要素を 1 列幅だけオフセットするクラスを
## フレックスボックスのグリッド？
-以前の[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。 利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。
+以前の[フレックスボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox)に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。 利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。
ただし、フレックスボックスはグリッドシステムとして設計されたことはなく、その 1 つとして使用すると新しい一連の問題が発生します。 この簡単な例として、上記で使用したのと同じマークアップ例を使用し、次の CSS を使用して `wrapper`、`row`、`col` クラスをスタイルすることができます。
@@ -546,9 +542,9 @@ body {
それらは、直上の項目について何も知らないので、直上の項目によって使用されるグリッドを尊重もしません。
-フレックスボックスは設計上**一次元**です。 それは単一の次元、つまり行または列の次元を扱います。 列と行に厳密なグリッドを作成することはできません。 つまり、グリッドにフレックスボックスを使用する場合でも、浮動ブロックのレイアウトの場合と同様にパーセントを計算する必要があります。
+フレックスボックスは設計上**一次元**です。 それは単一の次元、つまり行または列の次元を扱います。 列と行に厳密なグリッドを作成することはできません。 つまり、グリッドにフレックスボックスを使用する場合でも、浮動ボックスのレイアウトの場合と同様にパーセントを計算する必要があります。
-プロジェクトでは、フレックスボックスが浮動ブロックを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。 しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。 だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。
+プロジェクトでは、フレックスボックスが浮動ボックスを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。 しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。 だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。
## サードパーティのグリッドシステム
@@ -569,7 +565,7 @@ body {
Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。 ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。
-> **メモ:** [Normalize](http://necolas.github.io/normalize.css/) は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリーです。 これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。
+> **メモ:** [Normalize](https://necolas.github.io/normalize.css/) は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリーです。 これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。
前の例と同様の HTML を使用します。 HTML の `body` に次を追加してください。
@@ -656,10 +652,8 @@ HTML ファイルを保存してブラウザーに読み込んで、効果を確
Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。 これらのパーセントを自分で計算する作業を行ったのとまったく同じです。
-ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。 マークアップにクラスを追加すると、すべての浮動ブロックが処理されます。 グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！ しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。
+ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。 マークアップにクラスを追加すると、すべての浮動ボックスが処理されます。 グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！ しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。
## まとめ
これで、さまざまなグリッドシステムの作成方法が理解できました。 これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。
-
-{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}
diff --git a/files/ja/learn_web_development/core/css_layout/media_queries/index.md b/files/ja/learn_web_development/core/css_layout/media_queries/index.md
index 4dcbcf3b28b843..63bf07ca0a3476 100644
--- a/files/ja/learn_web_development/core/css_layout/media_queries/index.md
+++ b/files/ja/learn_web_development/core/css_layout/media_queries/index.md
@@ -1,31 +1,41 @@
---
-title: メディアクエリーの初心者向けガイド
+title: メディアクエリーの基本
slug: Learn_web_development/Core/CSS_layout/Media_queries
-original_slug: Learn/CSS/CSS_layout/Media_queries
l10n:
- sourceCommit: 1f868ebd9f26b101ceef59c6cebea518e86862a8
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
-{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
+{{learnsidebar}}
-**CSS メディアクエリー**（CSS Media Query）を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定したルールに一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブウェブデザイン (responsive web design) の重要な部分ですが、例えば、ユーザーはマウスではなくタッチパネルを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。
+{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout/Fundamental_layout_comprehension", "Learn_web_development/Core/CSS_layout")}}
+
+**CSS メディアクエリー** (CSS Media Query) を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定したルールに一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブウェブデザイン (responsive web design) の重要な部分ですが、例えば、ユーザーはマウスではなくタッチパネルを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。
+
+このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。
前提知識:
- HTML の基礎（HTML 入門 で学習）、 CSS の動作の考え方（
- CSS 入門 、
- CSS の構成要素 で学習）
+ HTML によるコンテンツの構造化 、
+ CSS によるスタイル設定の基本 、
+ 基本的なテキストとフォントのスタイル設定 、
+ CSS レイアウトの基本概念 の基礎知識。
- 目的:
+ 学習成果:
- メディアクエリーの使用方法、およびそれらを使用してレスポンシブデザインを作成するための最も一般的なアプローチを理解する。
+
+ メディアクエリーの構文。
+ メディアクエリーのよくある種別。
+ width や height メディアクエリーを使用した、レスポンシブなレイアウトの作成。ブレークポイントの選択。
+ メディアクエリーを使用したモバイルファーストデザインの実装。
+
@@ -67,16 +77,14 @@ l10n:
> [!NOTE]
> ここでのメディア種別は、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。
-
-> [!NOTE]
> レベル 3 のメディアクエリー仕様には、他にも多くのメディア種別が定義されています。 これらは非推奨であり、避けるべきです。
-
-> [!NOTE]
> メディア種別はオプションです。 メディアクエリーでメディア種別を指定しない場合、メディアクエリーは既定ですべてのメディア種別用になります。
-### メディア特性の規則
+### メディア特性のルール
-タイプを指定したら、規則を使用してメディア特性 (media feature) を対象にできます。
+種別を指定したら、ルールを使用してメディア特性 (media feature) を対象にできます。
+以下の例では、さまざまなメディアクエリを使用する方法を示しています。
+画面の`width`を変更するには、ブラウザーのサイズを変更するか、携帯端末を回転させるかしてください。あるいは、ブラウザーの開発者ツールのサイズ変更機能を使用して、さまざまな端末の幅をシミュレートすることもできます。
#### 幅と高さ
@@ -84,7 +92,7 @@ l10n:
これらの特性は、さまざまな画面サイズに対応するレイアウトを作成するために使用されます。 例えば、ビューポートが正確に 600 ピクセルの場合に `body` のテキストの色を赤に変更するには、次のメディアクエリーを使用します。
-```css
+```css live-sample___width
@media screen and (width: 600px) {
body {
color: red;
@@ -92,11 +100,17 @@ l10n:
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/width.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/width.html)します。
+```html-nolint live-sample___width
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("width")}}
`width`（および `height`）のメディア特性は範囲として使用でき、`min-` または `max-` を前に付けて、指定された値が最小または最大であることを示します。 例えば、ビューポートが 600 ピクセルより狭い場合に色を青にするには、次のように `max-width` を使用します。
-```css
+```css live-sample___max-width
@media screen and (max-width: 600px) {
body {
color: blue;
@@ -104,17 +118,23 @@ l10n:
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/max-width.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/max-width.html)します。
+```html-nolint hidden live-sample___max-width
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("max-width")}}
実際には、レスポンシブデザインでは最小値または最大値を使用する方がはるかに便利であるため、`width` または `height` を単独で使用することはほとんどありません。
-テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル 4 および 5 で導入された新しい特性の一部は、ブラウザーサポートが制限されています。 各特性は、ブラウザーサポート情報とともに MDN で文書化されていて、完全なリストは、[メディアクエリーの使用: メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で見つけることができます。
+テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル 4 および 5 で導入された新しい特性の一部は、ブラウザーの対応が限定的です。各特性は、ブラウザー対応情報とともに MDN で文書化されていて、完全なリストは、[メディアクエリーの使用: 構文](/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries#構文)で見ることができます。
#### 画面の方向
対応が進んでいるメディア特性の 1 つは `orientation` 、縦長 (portrait) または横長 (landscape) モードであるかどうかを検査できます。端末が横長 (landscape) の場合に本文の色を変更するには、次のメディアクエリーを使用します。
-```css
+```css live-sample___orientation
@media (orientation: landscape) {
body {
color: rebeccapurple;
@@ -122,25 +142,38 @@ l10n:
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/orientation.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/orientation.html)します。
+```html hidden live-sample___orientation
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("orientation")}}
標準のデスクトップ表示は横長であり、この方向ではうまくいくデザインも、携帯電話やタブレットの縦長表示ではうまく動作しないことがあります。方向を検査することで、縦長モードの端末に最適化したレイアウトを作成することができます。
#### ポインティングデバイスの使用
-レベル 4 仕様の一部として、ホバー (`hover`) メディア特性が導入されました。 この特性は、ユーザーが要素の上にポインターを乗せることができるかどうかをテストできることを意味します。 つまり、本質的に何らかのポインティングデバイスを使用していることを意味します。 タッチ画面とキーボード操作はホバーしません。
+レベル 4 仕様の一部として、ホバー (`hover`) メディア特性が導入されました。 この特性は、ユーザーが要素の上にポインターを乗せることができるかどうかをテストできることを意味します。 つまり、本質的に何らかのポインティングデバイスを使用していることを意味します。タッチ画面とキーボード操作はホバーがありません。
-```css
-@media (hover: hover) {
- body {
- color: rebeccapurple;
+```css live-sample___hover-example
+@media screen and (hover: hover) {
+ body:hover {
+ color: white;
+ background: black;
}
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/hover.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/hover.html)します。
+```html hidden live-sample___hover-example
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("hover-example")}}
-ユーザーがホバーを利用できないことがわかっている場合、既定でいくつかのインタラクティブ機能を表示できます。ホバーが利用できるユーザーの場合、リンクの上にポインターを乗せたときにそれらを利用可能にすることを選択できます。
+ユーザーがホバーを使用できないことが分かっている場合、既定ではいくつかの対話機能を表示できます。ホバーが可能なユーザーに対しては、リンクにポインターを当てたときに利用できるようにする、という選択肢もあります。
レベル 4 には、ポインター (`pointer`) メディア特性もあります。 これには、`none`（なし）、`fine`（細かい）、`coarse`（粗い）の 3 つの値があります。 `fine` ポインターは、マウスやトラックパッドのようなものです。 これにより、ユーザーは狭い領域を正確に対象にすることができます。 `coarse` ポインターは、タッチ画面上の指です。 値 `none` は、ユーザーにポインティングデバイスがないことを意味し、おそらく、キーボードのみ、または音声コマンドでナビゲートしています。
@@ -165,7 +198,6 @@ l10n:
```
この場合、ビューポートの幅が `30em` から `50em` の間にあるときにスタイル設定が適用されます。
-このスタイルを使用するための詳しい情報は、[メディアクエリーの使用: Level 4 での構文の拡張](/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries#level_4_での構文の拡張) を参照してください。
## より複雑なメディアクエリー
@@ -175,7 +207,7 @@ l10n:
メディア特性を組み合わせるには、上記で `and` を使用してメディア種別とメディア特性を組み合わせるのとほぼ同じ方法で `and` を使用できます。 例えば、`min-width` と `orientation` をテストする場合があります。 ビューポートの幅が少なくとも 600 ピクセルで、端末が横長モードの場合にのみ `body` のテキストは青色になります。
-```css
+```css live-sample___and
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
color: blue;
@@ -183,13 +215,19 @@ l10n:
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/and.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/and.html)します。
+```html hidden live-sample___and
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("and")}}
### メディアクエリーの "or" 論理
クエリーのセットがあり、そのいずれかが一致する場合、これらのクエリーをカンマで区切ることができます。 次の例では、ビューポートの幅が少なくとも 600 ピクセルの場合、**または**端末が横長の場合、テキストは青になります。 これらのいずれかが当てはまる場合、クエリーは一致します。
-```css
+```css live-sample___or
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
@@ -197,21 +235,45 @@ l10n:
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/or.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/or.html)します。
+```html hidden live-sample___or
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("or")}}
### メディアクエリーの "not" 論理
`not` 演算子を使用して、メディアクエリー全体を否定することができます。 これにより、メディアクエリー全体の意味が逆になります。 したがって、次の例では、画面の方向が縦長の場合にのみテキストが青になります。
+```css live-sample___not
+@media not (orientation: landscape) {
+ body {
+ color: blue;
+ }
+}
+```
+
+```html hidden live-sample___not
+
+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。
+
+```
+
+{{EmbedLiveSample("not")}}
+
+また、 `not` を使って特定の式を否定することもできます。
+
```css
-@media not all and (orientation: landscape) {
+@media (not (width < 600px)) and (not (width > 1000px)) {
body {
color: blue;
}
}
```
-ブラウザーで[この例を開く](https://mdn.github.io/css-examples/learn/media-queries/not.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/not.html)します。
+これは、ビューポートの幅が 600 ピクセルから 1000 ピクセルの場合にスタイル設定を適用します。これは、 `(600px <= width <= 1000px)` と同等です。
## ブレークポイントの選択方法
@@ -221,7 +283,7 @@ l10n:
Firefox 開発者ツールの[レスポンシブデザインモード](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html)では、これらのブレークポイントがどこに行くべきかを判断するのにとても便利です。 メディアクエリーを追加してデザインを微調整しながら、ビューポートを小さくしたり大きくしたりして、コンテンツが改善される場所を簡単に確認できます。
-
+
## アクティブラーニング: モバイルファーストレスポンシブデザイン
@@ -234,8 +296,104 @@ Firefox 開発者ツールの[レスポンシブデザインモード](https://f
### チュートリアル: 単純なモバイルファーストのレイアウト
出発点は、レイアウトのさまざまな部分に背景色を追加するために CSS を適用した HTML 文書です。
+下記ブロックのコードをテキストエディターにコピーし、HTML ファイルとしてコンピューターに保存し、ブラウザーで開いてください。 "Play" をクリックして MDN Playground でコードをレンダリングおよび編集することもできます。
+
+```html live-sample___walkthrough
+
+ Media Queries: a simple mobile first design, step 1
+
+
+
+
+
+
+
+
Veggies!
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
+ onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
+ courgette tatsoi pea sprouts fava bean collard greens dandelion okra
+ wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+
+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+ kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
+ winter purslane kale. Celery potato scallion desert raisin horseradish
+ spinach carrot soko. Lotus root water spinach fennel kombu maize
+ bamboo shoot green bean swiss chard seakale pumpkin onion chickpea
+ gram corn pea. Brussels sprout coriander water chestnut gourd swiss
+ chard wakame kohlrabi beetroot carrot watercress. Corn amaranth
+ salsify bunya nuts nori azuki bean chickweed potato bell pepper
+ artichoke.
+
+
+
+ Nori grape silver beet broccoli kombu beet greens fava bean potato
+ quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
+ turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant
+ winter purslane fennel azuki bean earthnut pea sierra leone bologi
+ leek soko chicory celtuce parsley jícama salsify.
+
+
+
+
+
+
+
Card 1
@@ -436,7 +549,10 @@ article {
```
-```css
+```css live-sample___grid
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
.grid {
list-style: none;
margin: 0;
@@ -452,20 +568,22 @@ article {
}
```
-ブラウザーで[グリッドレイアウトの例を開く](https://mdn.github.io/css-examples/learn/media-queries/grid.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/grid.html)します。
+{{EmbedLiveSample("grid", "", "350px")}}
ブラウザーで例を開いた状態で、画面を拡大および縮小して、列トラック数の変更を確認します。 このメソッドの良い点は、グリッドがビューポートの幅ではなく、このコンポーネントで使用可能な幅を見ていることです。 メディアクエリーに関するセクションに、それがまったく必要ないかもしれないという提案をまとめるのは奇妙に思えるかもしれません！ しかしながら、実際には、メディアクエリーで強化された最新のレイアウト方法を適切に使用すると、最良の結果が得られることがわかります。
## スキルテスト
-この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: レスポンシブウェブデザイン](/ja/docs/Learn/CSS/CSS_layout/rwd_skills) を参照してください。
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: レスポンシブウェブデザイン](/ja/docs/Learn_web_development/Core/CSS_layout/rwd_skills) を参照してください。
## まとめ
このレッスンでは、メディアクエリーについて学び、実際にそれらを使用してモバイルファースト レスポンシブデザインを作成する方法もみいだしました。
-作成した開始点を使用して、さらにメディアクエリーをテストできます。 例えば、`pointer` メディア特性を使用して、訪問者が粗いポインターを持つことを検出した場合、ナビゲーションのサイズを変更できます。
+私たちが作成した出発点を使用して、さらに多くのメディアクエリーを検査することができます。例えば、来訪者が粗いポインターを保有していることを検知した場合、メディア特性 `pointer` を使用してナビゲーションのサイズを変更できるかもしれません。
+
+また、さまざまなコンポーネントを追加して、メディアクエリーを追加したり、フレックスボックスやグリッドなどのレイアウト方式を使用したりすることが、レスポンシブにするのに最も適切な方法であるかどうかを試してみることもできます。正しい方法や間違った方法があるわけではなく、実験や業務で、デザインやコンテンツに最適な方法を見極めることが重要です。
-また、さまざまなコンポーネントを追加して、メディアクエリーを追加するか、フレックスボックスやグリッドなどのレイアウト方法を使用するのがコンポーネントをレスポンシブにするのに最も適切な方法かどうかを試すこともできます。 多くの場合、正しい方法も間違った方法もありません。 あなたのデザインとコンテンツに最適な方法を試してみてください。
+さて、このモジュールの終わりも間近です。最後に、理解度を検査する課題を皆さんにあげましょう。
-{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
+{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout/Fundamental_layout_comprehension", "Learn_web_development/Core/CSS_layout")}}
diff --git a/files/ja/learn_web_development/core/css_layout/multicol_skills/index.md b/files/ja/learn_web_development/core/css_layout/multicol_skills/index.md
index 0f8aaeecd3d3a9..bb331a38f7c69c 100644
--- a/files/ja/learn_web_development/core/css_layout/multicol_skills/index.md
+++ b/files/ja/learn_web_development/core/css_layout/multicol_skills/index.md
@@ -1,18 +1,17 @@
---
title: "スキルテスト: 段組み"
slug: Learn_web_development/Core/CSS_layout/Multicol_skills
-original_slug: Learn/CSS/CSS_layout/Multicol_skills
l10n:
- sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-このスキルテストの目的は、[CSS 段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)を、{{CSSxRef("column-count")}}、{{CSSxRef("column-width")}}、{{CSSxRef("column-gap")}}、{{CSSxRef("column-span")}}、{{CSSxRef("column-rule")}} プロパティや値を含めて理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、 3 つの小さな課題を行っていただきます。
+このスキルテストの目的は、[CSS 段組みレイアウト](/ja/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout)を、{{CSSxRef("column-count")}}、{{CSSxRef("column-width")}}、{{CSSxRef("column-gap")}}、{{CSSxRef("column-span")}}、{{CSSxRef("column-rule")}} プロパティや値を含めて理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、 3 つの小さな課題を行っていただきます。
> [!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
@@ -25,11 +24,52 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol1-download.html)しましょう。
+```html live-sample___multicol1
+
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+ daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+
+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+ kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+ purslane kale. Celery potato scallion desert raisin horseradish spinach
+ carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
+ bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+
+
+ここをクリックすると、解決策を表示します。
+
+この課題を達成するには、`column-count` と `column-gap` を使用する必要があります。
+
+```css
+.container {
+ column-count: 3;
+ column-gap: 50px;
+}
+```
+
+
## 課題 2
@@ -41,11 +81,55 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol2-download.html)しましょう。
+```html live-sample___multicol2
+
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+ daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+
+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+ kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+ purslane kale. Celery potato scallion desert raisin horseradish spinach
+ carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
+ bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+
+
+ここをクリックすると、解決策を表示します。
+
+`column-width` および `column-rule` プロパティを使用する必要があります。
+一括指定の代わりに、個別指定の `column-rule-*` プロパティを使用することができますが、そうすることに恩恵を受けることはできません。
+`column-gap` の使用における重要な点は、このルールが間隔に 5px の空間を追加しないことを理解していることです。ルールを間隔に重ねる場合、ルールを左右に 10px ずつ保有するには、 25px の間隔が必要です。
+
+```css
+.container {
+ column-width: 200px;
+ column-rule: 5px solid #ccc;
+ column-gap: 25px;
+}
+```
+
+
## 課題 3
@@ -55,8 +139,96 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/multicol3-download.html)しましょう。
+```html live-sample___multicol3
+
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+ daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+
I am a level 2 heading
+
Lotus root water spinach fennel
+
+
+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+ kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+ purslane kale. Celery potato scallion desert raisin horseradish spinach
+ carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green
+ bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+
+
+ここをクリックすると、解決策を表示します。
+
+この課題では、`column-span` プロパティの理解度を検査します。
+必要なことは、クラスが `.box` の要素を `column-span: all` に設定することだけです。
+これは、正しい要素を選択しているかどうかを調べる課題です。
+
+```css
+.box {
+ column-span: all;
+}
+```
+
+
+
+## 関連情報
+
+- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)
diff --git a/files/ja/learn_web_development/core/css_layout/multiple-column_layout/index.md b/files/ja/learn_web_development/core/css_layout/multiple-column_layout/index.md
index bcdd2f78696bdf..58ee65b13dbc42 100644
--- a/files/ja/learn_web_development/core/css_layout/multiple-column_layout/index.md
+++ b/files/ja/learn_web_development/core/css_layout/multiple-column_layout/index.md
@@ -1,12 +1,11 @@
---
title: 段組みレイアウト
slug: Learn_web_development/Core/CSS_layout/Multiple-column_Layout
-original_slug: Learn/CSS/CSS_layout/Multiple-column_Layout
l10n:
- sourceCommit: 289d6314f3368aa3e28524e7d090f6e9c704e3b1
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
+{{LearnSidebar}}
段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。
@@ -15,9 +14,9 @@ l10n:
前提知識:
- HTML の基本（HTML 入門 で学ぶ）、および CSS の機能の考え方（CSS 入門 で学ぶ）。
+ HTML の基本（HTML によるコンテンツの構造化 で学ぶ）、および CSS の機能の考え方（CSS によるスタイル設定の基本 で学ぶ）。
@@ -29,7 +28,7 @@ l10n:
## 基本的な例
-ここでは、しばしば _multicol_ と呼ばれる、段組みレイアウトの使用方法を探ります。[段組みの出発点ファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/css/css-layout/multicol/0-starting-point.html)して、適切な場所に CSS を追加していくと、追いかけることができます。この章の一番下には、最終的なコードがどのようになるのかの例があります。
+ここでは、段組みレイアウト（_multicol_ とも呼ばれる）の使用方法を探ります。[段組みの出発点ファイルをダウンロード](https://github.com/mdn/learning-area/blob/main/css/css-layout/multicol/0-starting-point.html)して、適切な場所に CSS を追加していくと、追いかけることができます。この章の一番下には、最終的なコードがどのようになるのかの例があります。
### 3 段組みレイアウト
@@ -37,7 +36,7 @@ l10n:
`container` のクラスを持つ {{htmlelement("div")}} を、段組みコンテナーとします。 2 つのプロパティ {{cssxref("column-count")}} または {{cssxref("column-width")}} のいずれかを使用して、段組みをオンにします。 `column-count` プロパティは与えた値と同じ数の段 (column) を作成するので、スタイルシートに次の CSS を加えて、ページを再読み込みすれば、 3 段組みが実現できるでしょう。
-```css
+```css live-sample___a_three-column_layout
.container {
column-count: 3;
}
@@ -45,7 +44,7 @@ l10n:
作成した各段の幅は柔軟に設定できます。ブラウザーは各段に割り当てる空間をどれだけ確保するかを計算します。
-```css hidden
+```css hidden live-sample___a_three-column_layout
body {
width: 90%;
max-width: 900px;
@@ -57,9 +56,9 @@ body {
}
```
-```html hidden
+```html hidden live-sample___a_three-column_layout
-
Simple multicol example
+
シンプルな段組みの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
@@ -92,7 +91,7 @@ body {
次のように CSS を変更して `column-width` を使用します。
-```css
+```css live-sample___setting_column-width
.container {
column-width: 200px;
}
@@ -100,7 +99,7 @@ body {
これでブラウザーは、できるだけ多くの、指定したサイズの段組みができるようになります。残りの空間は、既存の段の間で共有されます。つまり、コンテナーがその幅で正確に分割できない限り、指定した幅を正確に取得することはできません。
-```css hidden
+```css hidden live-sample___setting_column-width
body {
width: 90%;
max-width: 900px;
@@ -112,9 +111,9 @@ body {
}
```
-```html hidden
+```html hidden live-sample___setting_column-width
-
Simple multicol example
+
シンプルな段組みの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
@@ -154,7 +153,7 @@ body {
今度は `column-rule` で、段の間に線（rule、罫線）を追加します。 前のレッスンで遭遇した {{cssxref("border")}} プロパティと同様に、`column-rule` は {{cssxref("column-rule-color")}}、{{cssxref("column-rule-style")}}、{{cssxref("column-rule-width")}} の一括指定で、`border` と同じ値を受け入れます。
-```css
+```css live-sample___styling_the_columns
.container {
column-count: 3;
column-gap: 20px;
@@ -164,7 +163,7 @@ body {
さまざまなスタイルや色の線を追加してみてください。
-```css hidden
+```css hidden live-sample___styling_the_columns
body {
width: 90%;
max-width: 900px;
@@ -176,9 +175,9 @@ body {
}
```
-```html hidden
+```html hidden live-sample___styling_the_columns
-
Simple multicol example
+
シンプルな段組みの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
@@ -216,7 +215,7 @@ body {
> [!NOTE]
> 要素を一部の列にのみまたがるようにすることはできません。プロパティは `none`（これが既定値です）か `all` の値しか示すことができません。
-```css hidden
+```css hidden live-sample___spanning_columns
body {
width: 90%;
max-width: 900px;
@@ -239,14 +238,14 @@ h2 {
}
```
-```html hidden
+```html hidden live-sample___spanning_columns
-
Simple multicol example
+
シンプルな段組みの例
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-
Spanning subhead
+
またがる副見出し
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
@@ -268,7 +267,7 @@ h2 {
時には、このような分割が配置されることで、読みやすさが損なわれることがあります。下記の例では、一連のボックスをレイアウトするために段組みを使用しており、それぞれのボックスには見出しとテキストがあります。見出しと本文の間で段が分割されると、見出しと本文が分離してしまいます。
-```css hidden
+```css hidden live-sample___fragmented_boxes
body {
width: 90%;
max-width: 900px;
@@ -280,10 +279,10 @@ body {
}
```
-```html
+```html live-sample___fragmented_boxes
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -294,7 +293,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -305,7 +304,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -315,7 +314,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -326,7 +325,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -337,7 +336,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -348,7 +347,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -360,7 +359,7 @@ body {
```
-```css
+```css live-sample___fragmented_boxes
.container {
column-width: 250px;
column-gap: 20px;
@@ -374,13 +373,13 @@ body {
}
```
-{{ EmbedLiveSample('断片化されたボックス', '100%', 1000) }}
+{{ EmbedLiveSample('Fragmented_boxes', '100%', 1000) }}
### break-inside の設定
このふるまいを制御するために、[CSS 断片化](/ja/docs/Web/CSS/CSS_fragmentation)の仕様のプロパティを使用できます。 この仕様は、段組みとページ付きメディアでのコンテンツの分割を制御するためのプロパティを提供します。 例えば、 {{cssxref("break-inside")}} を `avoid` の値で `.card` のルールに追加することができます。これは見出しとテキストの断片化したくないコンテナーとなります。
-```css
+```css live-sample___setting_break-inside
.card {
break-inside: avoid;
background-color: rgb(207 232 220);
@@ -392,7 +391,7 @@ body {
このプロパティを追加することで、ボックスは 1 つにまとまるようになり、これで段をまたがって分割されることはなくなります。
-```css hidden
+```css hidden live-sample___setting_break-inside
body {
width: 90%;
max-width: 900px;
@@ -404,10 +403,10 @@ body {
}
```
-```html hidden
+```html hidden live-sample___setting_break-inside
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -418,7 +417,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -429,7 +428,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -439,7 +438,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -450,7 +449,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -461,7 +460,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -472,7 +471,7 @@ body {
-
I am the heading
+
これは見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
@@ -484,18 +483,18 @@ body {
```
-```css hidden
+```css hidden live-sample___setting_break-inside
.container {
column-width: 250px;
column-gap: 20px;
}
```
-{{ EmbedLiveSample('break-inside_の設定', '100%', 1100) }}
+{{ EmbedLiveSample('Setting_break-inside', '100%', 1100) }}
## スキルテスト
-この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 段組み](/ja/docs/Learn/CSS/CSS_layout/Multicol_skills) を参照してください。
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 段組み](/ja/docs/Learn_web_development/Core/CSS_layout/Multicol_skills) を参照してください。
## まとめ
@@ -505,5 +504,3 @@ body {
- [CSS 断片化](/ja/docs/Web/CSS/CSS_fragmentation)
- [段組みレイアウトの使用](/ja/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts)
-
-{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
diff --git a/files/ja/learn_web_development/core/css_layout/position_skills/index.md b/files/ja/learn_web_development/core/css_layout/position_skills/index.md
index a5aceec3ce1237..7efcf3ff37beeb 100644
--- a/files/ja/learn_web_development/core/css_layout/position_skills/index.md
+++ b/files/ja/learn_web_development/core/css_layout/position_skills/index.md
@@ -1,18 +1,17 @@
---
title: "スキルテスト: 位置指定"
slug: Learn_web_development/Core/CSS_layout/Position_skills
-original_slug: Learn/CSS/CSS_layout/Position_skills
l10n:
- sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-このスキルテストの目的は、CSS の {{CSSxRef("position")}} プロパティと値を使用した [CSS の位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning)を理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、2 つの小さな課題を行っていただきます。
+このスキルテストの目的は、CSS の {{CSSxRef("position")}} プロパティと値を使用した [CSS の位置指定](/ja/docs/Learn_web_development/Core/CSS_layout/Positioning)を理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、2 つの小さな課題を行っていただきます。
> [!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
@@ -23,17 +22,79 @@ l10n:
-下記のライブコードを更新して、完成例を再現してみてください。
-
-{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}
-
-追加の課題です。
+**ボーナス問題:** target をテキストの下に表示するように変更できますか？
-- 追加課題として、 target をテキストの下に表示するように変更できますか？
+下記のライブコードを更新して、完成例を再現してみてください。
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/position/position1-download.html)しましょう。
+```html live-sample___position1
+
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+ daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
Target
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+```
+
+```css hidden live-sample___position1
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+* {
+ box-sizing: border-box;
+}
+
+.container {
+ padding: 0.5em;
+ border: 5px solid #ccc;
+}
+
+.target {
+ width: 150px;
+ height: 150px;
+ border-radius: 5px;
+ background-color: #663398;
+ padding: 1em;
+ color: white;
+}
+```
+
+```css live-sample___position1
+.container {
+}
+
+.target {
+}
+```
+
+{{EmbedLiveSample("position1", "", "400px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+これには、 `position: relative` と `position: absolute` が必要であり、相対位置指定の観点から、新しい位置指定コンテキストにおいて、両者がどのように関連しているかを理解する必要があります。
+よくある問題は、子要素に `position: absolute` を追加していても、コンテナーに `position: relative` を適用していないということでしょう。その場合、 target はビューポートに従って位置指定されることになります。
+
+```css
+.container {
+ position: relative;
+}
+
+.target {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+```
+
+ボーナス問題では、 target 要素に `z-index` の負の値を追加する必要があります。例えば `z-index: -2` です。
+
+
## 課題 2
@@ -43,22 +104,89 @@ l10n:
下記のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1300)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/position/position2-download.html)しましょう。
-
-## 評価またはさらなるヘルプ
-
-この例は、上記のインタラクティブエディターで練習することができます。
-
-この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。
-
-1. 作品をオンラインの共有可能なエディター、例えば [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
-2. [MDN Discourse forum 学習カテゴリー](https://discourse.mozilla.org/c/mdn/learn/250)に評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
-
- - 「位置指定のスキルテスト 1 のための評価希望」のような説明的なタイトル。
- - すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
- - 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
- - 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。
+```html live-sample___position2
+
+
+
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
+ onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+ kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
+ winter purslane kale. Celery potato scallion desert raisin horseradish
+ spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
+ shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
+ Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
+ beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
+ bean chickweed potato bell pepper artichoke.
+
+
+
+```
+
+```css hidden live-sample___position2
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+* {
+ box-sizing: border-box;
+}
+
+.container {
+ height: 400px;
+ padding: 0.5em;
+ border: 5px solid #ccc;
+ overflow: auto;
+}
+
+.sidebar {
+ color: white;
+ background-color: #663398;
+ padding: 1em;
+ float: left;
+ width: 150px;
+}
+
+.content {
+ padding: 1em;
+ margin-left: 160px;
+}
+```
+
+```css live-sample___position2
+.container {
+}
+
+.sidebar {
+}
+```
+
+{{EmbedLiveSample("position2", "", "400px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+ここでは学習素材とは少し異なる方法で、 `position: fixed` の理解をテストしています。
+
+```css
+.sidebar {
+ position: fixed;
+}
+```
+
+
+
+## 関連情報
+
+- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)
diff --git a/files/ja/learn_web_development/core/css_layout/positioning/index.md b/files/ja/learn_web_development/core/css_layout/positioning/index.md
index 339bb6d7ebc3e9..d1072105671bb8 100644
--- a/files/ja/learn_web_development/core/css_layout/positioning/index.md
+++ b/files/ja/learn_web_development/core/css_layout/positioning/index.md
@@ -1,12 +1,13 @@
---
title: 位置指定
slug: Learn_web_development/Core/CSS_layout/Positioning
-original_slug: Learn/CSS/CSS_layout/Positioning
l10n:
- sourceCommit: 289d6314f3368aa3e28524e7d090f6e9c704e3b1
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Floats", "Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout")}}
位置指定を使用すると、文書の通常のレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。
@@ -15,14 +16,24 @@ l10n:
前提知識:
- HTML の基本（HTML 入門 で学ぶ）、および CSS の機能の考え方（CSS 入門 で学ぶ）。
+ HTML によるコンテンツの構造化 、
+ CSS によるスタイル設定の基本 、
+ 基本的なテキストとフォントのスタイル設定 、
+ CSS レイアウトの基本概念 の基礎知識。
- 目的:
- CSS 位置指定がどのように機能するのかを学ぶこと。
+ 学習成果:
+
+
+ static 位置指定が、ページ上で要素を位置指定するための既定の方法であること。相対位置指定の要素は通常フローに残る一方で、絶対（および固定・粘着）位置指定は通常フローから完全に外し、個別のレイヤーに配置すること。
+ 最終的なレイアウト位置は top, bottom, left, right の各プロパティで変更できるものの、設定されている position 値によって効果が異なること。
+ 位置指定要素の位置のコンテキストを、祖先要素の位置指定によって設定すること。
+
+
@@ -37,9 +48,9 @@ HTML 要素に適用できるさまざまな種類の位置指定があります
## 静的位置指定
-静的位置指定（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素を文書レイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」を意味します。
+静的位置指定 (Static positioning) は、すべての要素が取得するデフォルトです。 これは、「要素を文書レイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」を意味します。
-これを実演し、例をこれからのセクションのために準備するために、最初に HTML の 2 番目の {{htmlelement("p")}} に `positioned` の `class` を次のように追加します。
+これを実演し、例をこれからのセクションのために準備するために、最初に HTML で次のように、 2 つ目の {{htmlelement("p")}} の `class` に `positioned` を追加します。
```html
…
@@ -54,20 +65,20 @@ HTML 要素に適用できるさまざまな種類の位置指定があります
}
```
-保存してリフレッシュしても、2 段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定は既定のふるまいです！
+保存して再読み込みしても、2 段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定は既定のふるまいです！
> [!NOTE]
> この時点でのライブ例は [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html)）。
## 相対位置指定
-相対位置指定（Relative positioning）は、最初に見ていく位置指定の種類です。 これは静的位置指定と非常によく似ていますが、位置指定要素（positioned element）が通常のレイアウトフローで配置されたら、ページ上の他の要素と重なることも含んで最終的な位置を変更できるという点が異なります。 先に進んで、次のようにコード内の `position` の宣言を更新してください。
+相対位置指定 (Relative positioning) は、最初に見ていく位置指定の種類です。 これは静的位置指定と非常によく似ていますが、位置指定要素 (positioned element) が通常のレイアウトフローで配置されたら、ページ上の他の要素と重なることも含んで最終的な位置を変更できるという点が異なります。 先に進んで、次のようにコード内の `position` の宣言を更新してください。
```css
position: relative;
```
-この段階で保存してリフレッシュしても、結果にまったく変化はありません。 それでは、どうやって要素の位置を変更するのでしょうか？ {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の各プロパティを使用する必要があります。 これについては次のセクションで説明します。
+この段階で保存して再読み込みしても、結果にまったく変化はありません。 それでは、どうやって要素の位置を変更するのでしょうか？ {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の各プロパティを使用する必要があります。 これについては次のセクションで説明します。
### top、bottom、left、right の紹介
@@ -79,40 +90,33 @@ left: 30px;
```
> [!NOTE]
-> これらのプロパティの値は、論理的に想定される任意の[単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)（ピクセル、mm、rem、% など）をとることができます。
+> これらのプロパティの値は、論理的に想定される任意の[単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units)（ピクセル、mm、rem、% など）をとることができます。
保存して再読み込みすると、次のような結果になります。
-```html hidden
-
Relative positioning
+```html-nolint hidden live-sample___ntroducing_top_bottom_left_and_right
+
相対位置指定
- I am a basic block level element. My adjacent block level elements sit on new
- lines below me.
+ これは基本的なブロックレベル要素です。隣接するブロックレベル要素は、この下に新しい行に配置されます。
- By default we span 100% of the width of our parent element, and we are as tall
- as our child content. Our total width and height is our content + padding +
- border width/height.
+ 既定では、親要素の幅を 100% 使用し、子コンテンツの高さと同じ高さになります。全体の幅と高さは、コンテンツの幅と高さ＋パディング＋境界線の幅/高さです。
- We are separated by our margins. Because of margin collapsing, we are
- separated by the width of one of our margins, not both.
+ これらはマージンによって分離されています。マージンが相殺されているため、互いのマージンではなく、マージン 1 つ分のサイズによって分離されています。
- Inline elements like this one and this one sit on
- the same line as one another, and adjacent text nodes, if there is space on
- the same line. Overflowing inline elements
- wrap onto a new line if possible — like this one containing text ,
- or just go on to a new line if not, much like this image will do:
- インライン要素 やこのインライン要素 は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。
+ インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます 。そうでない場合は、この画像のように、新しい行にそのまま続きます。
+
```
-```css hidden
+```css hidden live-sample___ntroducing_top_bottom_left_and_right
body {
width: 500px;
margin: 0 auto;
@@ -140,14 +144,14 @@ span {
{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}
-かっこいいですよね？はい、おそらくこれはあなたが期待していたものではなかったでしょう。上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です。位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、`top: 30px;` と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。
+かっこいいですよね？はい、おそらくこれは期待していたものではなかったでしょう。上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です。位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、`top: 30px;` と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。
> [!NOTE]
> この時点でのライブ例は [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html)）。
## 絶対位置指定
-絶対位置指定（Absolute positioning）はまったく異なる結果をもたらします。
+絶対位置指定 (Absolute positioning) はまったく異なる結果をもたらします。
### position: absolute の設定
@@ -159,32 +163,25 @@ position: absolute;
保存して再読み込みすると、次のようになります。
-```html hidden
-
Absolute positioning
+```html-nolint hidden
+
絶対位置指定
- I am a basic block level element. My adjacent block level elements sit on new
- lines below me.
+ これは基本的なブロックレベル要素です。隣接するブロックレベル要素は、この下に新しい行に配置されます。
- By default we span 100% of the width of our parent element, and we are as tall
- as our child content. Our total width and height is our content + padding +
- border width/height.
+ 既定では、親要素の幅を 100% 使用し、子コンテンツの高さと同じ高さになります。全体の幅と高さは、コンテンツの幅と高さ＋パディング＋境界線の幅/高さです。
- We are separated by our margins. Because of margin collapsing, we are
- separated by the width of one of our margins, not both.
+ これらはマージンによって分離されています。マージンが相殺されているため、互いのマージンではなく、マージン 1 つ分のサイズによって分離されています。
- inline elements like this one and this one sit on
- the same line as one another, and adjacent text nodes, if there is space on
- the same line. Overflowing inline elements
- wrap onto a new line if possible — like this one containing text ,
- or just go on to a new line if not, much like this image will do:
- インライン要素 やこのインライン要素 は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。
+ インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます 。そうでない場合は、この画像のように、新しい行にそのまま続きます。
+
```
@@ -216,58 +213,52 @@ span {
{{ EmbedLiveSample('Setting_position_absolute', '100%', 450) }}
-まず最初に、文書フロー内にあるべき位置指定要素のギャップが存在しないことに注意してください。 1 番目と 3 番目の要素はそれが存在しないので一緒になっています。ある意味、これは正しいです。 絶対位置指定要素は、通常の文書レイアウトフローには存在しません。 他のすべてのものとは異なる独自のレイヤー上にあります。これはとても便利です。つまり、ページ上の他の要素のレイアウトを妨げない独立した UI 機能を作成できるということです。例えば、ポップアップ情報ボックスやコントロールメニュー、ロールオーバーパネル、ページ上の任意の場所にドラッグアンドドロップできる UI 機能、等々です。
+まず、文書内のフローに位置指定された要素が配置されていたはずのすき間が、なくなっていることに注意してください。これがなくなったので、 1 つ目と 3 つ目の要素は互いに隣接しています。ある意味、これは正しいです。 絶対位置指定要素は、通常の文書レイアウトフローには存在しなくなります。 他のすべてのものとは異なる独自のレイヤー上にあります。これはとても便利です。つまり、ページ上の他の要素のレイアウトを妨げない独立した UI 機能を作成できるということです。例えば、ポップアップ情報ボックスやコントロールメニュー、ロールオーバーパネル、ページ上の任意の場所にドラッグアンドドロップできる UI 機能、等々です。
-次に、要素の位置が変更されたことに注意してください。 これは、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の絶対位置指定でのふるまいが異なるためです。 通常の文書レイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から 30 ピクセル、左側から 30 ピクセルとなるようにします。（この場合、「包含要素」とは、**最初の包含ブロック** (initial containing block) のことです。詳細については、以下のセクションを参照してください。）
+次に、要素の位置が変更されたことに注意してください。 これは、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の絶対位置指定でのふるまいが異なるためです。 通常の文書レイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から 30 ピクセル、左側から 30 ピクセルとなるようにします。（この場合、**包含要素**とは、**初期包含ブロック** (initial containing block) のことです。詳細については、以下の節を参照してください。）
> [!NOTE]
> 必要に応じて、 {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} を使用して要素のサイズを変更することができます。 位置指定要素に `top: 0; bottom: 0; left: 0; right: 0; margin: 0;` を設定して、何が起こるか見てみてください。後で元に戻しましょう。
> [!NOTE]
-> そう、マージンはなお位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。
+> そう、マージンはなお位置指定要素に影響します。 しかしながら、マージンの相殺行われません。
> [!NOTE]
> この時点でのライブ例は [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html)）。
### 位置指定コンテキスト
-絶対位置指定要素の「包含要素」はどの要素でしょうか？ これは、位置指定要素の先祖の `position` プロパティに大きく依存します（[包含ブロックの識別](/ja/docs/Web/CSS/Containing_block#identifying_the_containing_block)を参照）。
+絶対位置指定要素の「包含要素」はどの要素でしょうか？ これは、位置指定要素の祖先の `position` プロパティに大きく依存します。
-明示的に定義された `position` プロパティを持つ祖先要素がない場合、デフォルトではすべての祖先要素は静的位置を持ちます。 この結果、絶対位置指定要素は**最初の包含ブロック**（initial containing block）に含まれます。 最初の包含ブロックはビューポートの大きさを持ち、{{htmlelement("html")}} 要素を含むブロックでもあります。 簡単に言うと、絶対位置指定要素は {{htmlelement("html")}} 要素の外側に表示され、最初のビューポートを基準にして配置されます。
+明示的に定義された `position` プロパティを持つ祖先要素がない場合、デフォルトではすべての祖先要素は静的位置を持ちます。 この結果、絶対位置指定要素は**初期包含ブロック**に含まれます。 初期包含ブロックはビューポートの大きさを持ち、{{htmlelement("html")}} 要素を含むブロックでもあります。 簡単に言うと、絶対位置指定要素は {{htmlelement("html")}} 要素の外側に表示され、最初のビューポートを基準にして配置されます。
-位置指定要素は HTML ソースの {{htmlelement("body")}} 内にネストされていますが、最終的なレイアウトでは、ページの端の左上から 30 ピクセル離れています。 **位置指定コンテキスト** (positioning context) — 絶対位置指定要素がどの要素を基準にして配置されているか — を変更することができます。 これは、要素の先祖の 1 つに位置指定を設定することによって行われます — それを内部にネストしている要素の 1 つにです（内部にネストしていない要素を基準にしての配置はできません）。 これを実証するために、次の宣言を `body` ルールに追加してください。
+位置指定要素は HTML ソースの {{htmlelement("body")}} 内に含まれていますが、最終的なレイアウトでは、ページの端の左上から 30 ピクセル離れています。 **位置指定コンテキスト** (positioning context) — 絶対位置指定要素が配置される基準となる要素 — を変更することができます。 これは、要素の祖先の 1 つに位置指定を設定することによって行われます。つまり、位置指定する要素を内部に含んでいる要素の 1 つです（その要素を含んでいない要素を基準にして配置することはできません）。これを確認するために、次の宣言を `body` ルールに追加してください。
```css
position: relative;
```
-これにより、次の結果が得られます。
+これにより、次のような結果になります。
-```html hidden
-
Positioning context
+```html-nolint hidden
+
位置指定コンテキスト
- I am a basic block level element. My adjacent block level elements sit on new
- lines below me.
+ これは基本的なブロックレベル要素です。隣接するブロックレベル要素は、この下に新しい行に配置されます。
- Now I'm absolutely positioned relative to the
- <body> element, not the <html> element!
+ この絶対位置指定要素は、 <body> 要素からの相対位置となり、 <html> 要素からの相対位置ではなくなりました。
- We are separated by our margins. Because of margin collapsing, we are
- separated by the width of one of our margins, not both.
+ これらはマージンによって分離されています。マージンが相殺されているため、互いのマージンではなく、マージン 1 つ分のサイズによって分離されています。
- inline elements like this one and this one sit on
- the same line as one another, and adjacent text nodes, if there is space on
- the same line. Overflowing inline elements
- wrap onto a new line if possible — like this one containing text ,
- or just go on to a new line if not, much like this image will do:
- インライン要素 やこのインライン要素 は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。
+ インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます 。そうでない場合は、この画像のように、新しい行にそのまま続きます。
+
```
@@ -307,9 +298,9 @@ span {
### z-index の紹介
-この絶対位置指定はすべて楽しいですが、まだ検討していないことがもう 1 つあります。 要素が重なり合ったときに、どの要素が他のどの要素の上に表われるかを決定するのは何でしょうか？ これまで見てきた例では、位置指定コンテキスト内には位置指定要素が 1 つしかなく、位置指定要素は位置指定されていない要素よりも優先されるため、一番上に表われます。 複数あるときはどうでしょうか？
+この絶対位置指定はすべて楽しいものですが、まだ検討していないことがもう 1 つあります。 要素が重なり合ったときに、どの要素が他のどの要素の上に表われるかを決定するのは何でしょうか？ これまで見てきた例では、位置指定コンテキスト内には位置指定要素が 1 つしかなく、位置指定要素は位置指定されていない要素よりも優先されるため、一番上に表われます。 複数あるときはどうでしょうか？
-最初の段落も絶対位置指定にするために、CSS に次を追加してみてください。
+最初の段落も絶対位置指定にするために、 CSS に次を追加してみてください。
```css
p:nth-of-type(1) {
@@ -320,13 +311,13 @@ p:nth-of-type(1) {
}
```
-この時点で、最初の段落がライム色に着色され、文書フローの外に移動し、元の位置よりも少し上に配置されていることがわかります。 また、2 つが重なったところでは、元の `.positioned` 段落の下にも重なっています。 これは、`.positioned` 段落がソース順の 2 番目の段落であり、ソース順の後ろに配置された要素がソース順の前に配置された要素よりも優先されるためです。
+この時点で、最初の段落がライム色に着色され、文書フローの外に移動し、元の位置よりも少し上に配置されていることがわかります。 また、2 つが重なったところでは、元の `.positioned` 段落の下にも重なっています。 これは、`.positioned` 段落がソース順の 2 つ目の段落であり、ソース順の後ろに配置された要素がソース順の前に配置された要素よりも優先されるためです。
重ね合わせ順を変更できるでしょうか？ はい、 {{cssxref("z-index")}} プロパティを使うことでできます。 "z-index" は z 軸への参照です。 背景画像やドロップシャドウのオフセットなどを位置指定するために、水平（x 軸）座標と垂直（y 軸）座標を使用してウェブページについて説明したコースの前のポイントから思い出すことができます。 (0,0) はページ（または要素）の左上にあり、x 軸と y 軸はページの右下を横切っています（左から右の言語ならば）。
ウェブページには、z 軸もあります。 画面の表面から自分の顔に向かって走る想像上の線（または、画面の前に持ってきたい他の何か）です。 {{cssxref("z-index")}} の値は、位置指定要素がその軸のどこにあるかに影響します。 正の値はそれらを重ね合わせの上に移動し、負の値はそれらを重ね合わせの下に移動します。 既定では、位置指定要素はすべて `auto` の `z-index` を持ち、これは事実上 0 です。
-重ね合わせ順を変更するには、`p:nth-of-type(1)` ルールに次の宣言を追加してみてください。
+重ね合わせ順を変更するには、 `p:nth-of-type(1)` ルールに次の宣言を追加してみてください。
```css
z-index: 1;
@@ -334,31 +325,25 @@ z-index: 1;
これで完成した例が表示され、ライム色の段落が一番上になります。
-```html hidden
+```html-nolint hidden
z-index
- I am a basic block level element. My adjacent block level elements sit on new
- lines below me.
+ これは基本的なブロックレベル要素です。隣接するブロックレベル要素は、この下に新しい行に配置されます。
- Now I'm absolutely positioned relative to the
- <body> element, not the <html> element!
+ この絶対位置指定要素は、 <body> 要素からの相対位置となり、 <html> 要素からの相対位置ではなくなりました。
- We are separated by our margins. Because of margin collapsing, we are
- separated by the width of one of our margins, not both.
+ これらはマージンによって分離されています。マージンが相殺されているため、互いのマージンではなく、マージン 1 つ分のサイズによって分離されています。
- inline elements like this one and this one sit on
- the same line as one another, and adjacent text nodes, if there is space on
- the same line. Overflowing inline elements
- wrap onto a new line if possible — like this one containing text ,
- or just go on to a new line if not, much like this image will do:
- インライン要素 やこのインライン要素 は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。
+ インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます 。そうでない場合は、この画像のように、新しい行にそのまま続きます。
+
```
@@ -406,7 +391,7 @@ p:nth-of-type(1) {
## 固定位置指定
-固定位置指定 (Fixed positioning) を見てみましょう。これは絶対位置指定とまったく同じように機能しますが、1 つの重要な違いがあります。 絶対位置指定では、要素をその最も近くで位置指定された祖先 (the initial containing block if there isn't one) に対して固定しますが、**固定位置指定**では、ふつう、ビューポートの見えている部分に対して固定します。（要素の祖先の 1 つが固定されたコンテナーブロックであり、その [transform プロパティ](/ja/docs/Web/CSS/transform) に _none_ 以外の値が設定されている場合は例外となります）。つまり、ページのスクロール量に関係なく常に表示される持続的なナビゲーションメニューのような、固定された便利な UI アイテムを作成できることを意味します。
+固定位置指定 (Fixed positioning) を見てみましょう。これは絶対位置指定とまったく同じように機能しますが、1 つの重要な違いがあります。 絶対位置指定では、要素をその最も近くで位置指定された祖先（存在しない場合は初期包含ブロック） に対して固定しますが、**固定位置指定**では、ふつう、ビューポートの見えている部分に対して固定します。つまり、ページのスクロール量に関係なく常に表示される持続的なナビゲーションメニューのような、固定された便利な UI アイテムを作成できることを意味します。
簡単な例をまとめて、意味を説明しましょう。 まず最初に、CSS から既存の `p:nth-of-type(1)` ルールと `.positioned` ルールを削除します。
@@ -420,7 +405,7 @@ body {
}
```
-それでは、{{htmlelement("Heading_Elements", "h1")}} 要素に `position: fixed;` を与え、ビューポートの中央上部に配置します。 CSS に次のルールを追加してください。
+それでは、{{htmlelement("Heading_Elements", "<h1>")}} 要素に `position: fixed;` を与え、ビューポートの中央上部に配置します。 CSS に次のルールを追加してください。
```css
h1 {
@@ -445,28 +430,23 @@ p:nth-of-type(1) {
完成した例を見てください。
-```html hidden
-
Fixed positioning
+```html-nolint hidden
+
固定位置指定
- I am a basic block level element. My adjacent block level elements sit on new
- lines below me.
+ これは基本的なブロックレベル要素です。隣接するブロックレベル要素は、この下に新しい行に配置されます。
-
I'm not positioned any more.
+
これは位置指定されなくなりました。
- We are separated by our margins. Because of margin collapsing, we are
- separated by the width of one of our margins, not both.
+ これらはマージンによって分離されています。マージンが相殺されているため、互いのマージンではなく、マージン 1 つ分のサイズによって分離されています。
- Inline elements like this one and this one sit on
- the same line as one another, and adjacent text nodes, if there is space on
- the same line. Overflowing inline elements
- wrap onto a new line if possible — like this one containing text ,
- or just go on to a new line if not, much like this image will do:
- インライン要素 やこのインライン要素 は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。
+ インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます 。そうでない場合は、この画像のように、新しい行にそのまま続きます。
+
```
@@ -515,8 +495,8 @@ p:nth-of-type(1) {
これは、ナビゲーションバーを特定の位置までページと共にスクロールさせ、その後ページの上部に固定するなどの目的で使用できます。
-```html hidden
-
Sticky positioning
+```html-nolint hidden
+
粘着位置指定
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
@@ -530,7 +510,7 @@ p:nth-of-type(1) {
lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
-
Sticky
+
粘着
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
@@ -585,7 +565,7 @@ body {
`position:sticky` の興味深く一般的な使用法は、スクロールする索引ページを作成し、異なる見出しが到達するにつれてページの上部にくっつくようにすることです。そのような例のマークアップは次のようになります。
```html
-
Sticky positioning
+
粘着位置指定
A
@@ -633,53 +613,21 @@ dt {
```css hidden
body {
width: 500px;
- height: 1400px;
+ height: 880px;
margin: 0 auto;
}
```
-```html hidden
-Sticky positioning
-
-
- A
- Apple
- Ant
- Altimeter
- Airplane
- B
- Bird
- Buzzard
- Bee
- Banana
- Beanstalk
- C
- Calculator
- Cane
- Camera
- Camel
- D
- Duck
- Dime
- Dipstick
- Drone
- E
- Egg
- Elephant
- Egret
-
-```
-
{{ EmbedLiveSample('Scrolling_index', '100%', 200) }}
-粘着要素は「スクロール機構」を持つ最も近い祖先（[position](/ja/docs/Web/CSS/position) プロパティによって決定する）に相対的に「粘着」します。
+粘着要素は「スクロール機構」を持つ最も近い祖先（[overflow](/en-US/docs/Web/CSS/overflow) プロパティによって決定する）に相対的に「粘着」します。
> [!NOTE]
> このライブ例は [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) にあります（[ソースコードを見る](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html)）。
## スキルテスト
-この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 位置指定](/ja/docs/Learn/CSS/CSS_layout/Position_skills) を参照してください。
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 位置指定](/ja/docs/Learn_web_development/Core/CSS_layout/Position_skills)を参照してください。
## まとめ
@@ -688,6 +636,6 @@ body {
## 関連情報
- {{cssxref("position")}} プロパティのリファレンス。
-- いくつかのより有用なアイデアのための[実用的な位置指定の例](/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)。
+- いくつかのより有用なアイデアのための[実用的な位置指定の例](/ja/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples)。
-{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Floats", "Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout")}}
diff --git a/files/ja/learn_web_development/core/css_layout/practical_positioning_examples/index.md b/files/ja/learn_web_development/core/css_layout/practical_positioning_examples/index.md
index d32e796f77391d..8710577e81ae18 100644
--- a/files/ja/learn_web_development/core/css_layout/practical_positioning_examples/index.md
+++ b/files/ja/learn_web_development/core/css_layout/practical_positioning_examples/index.md
@@ -1,9 +1,8 @@
---
title: 実践的な位置指定の例
slug: Learn_web_development/Core/CSS_layout/Practical_positioning_examples
-original_slug: Learn/CSS/CSS_layout/Practical_positioning_examples
l10n:
- sourceCommit: b586b019eda9a3947f169381ce9ffb80747aa98a
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
@@ -15,9 +14,9 @@ l10n:
前提知識:
- HTML の基本（HTML 入門 で学ぶ）、および CSS の機能の考え方（CSS 入門 で学ぶ）。
+ >で学習）、 CSS の動作の考え方（CSS によるスタイル設定の基本 で学習）
@@ -38,19 +37,41 @@ l10n:
「別々のタブを別々のウェブページとして作成し、タブをクリックして別々のページに移動させて同様の効果を生み出すだけでよいのではないでしょうか？」と考えるかもしれません。 このコードならもっと簡単なものになりますが、実際には個々の「ページ」ビューは実際には新しくロードされたウェブページになるため、ビュー間で情報を保存し、この機能をより大きな UI デザインに統合するのは難しくなります。
-まず始めに、出発点の HTML ファイル [info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box-start.html) のローカルコピーを作成してください。 これをローカルコンピューターの適当な場所に保存して、テキストエディターで開きます。 `body` に含まれる HTML を見てみましょう。
+まず始めに、出発点のファイル、 [info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box-start.html) および [tabs-manual.js](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabs-manual.js) のローカルコピーを作成してください。 これをローカルコンピューターの適当な場所に保存して、 `tabbed-info-box-start.html` をテキストエディターで開きます。 `body` に含まれる HTML を見てみましょう。
```html
-
+
+
+ Tab 1
+
+
+
+ Tab 2
+
+
+ Tab 3
+
+
+
-
+
The first tab
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum
@@ -61,23 +82,22 @@ l10n:
urna. Nulla facilisi.
-
- The second tab
+
+ The second tab
This tab hasn't got any Lorem Ipsum in it. But the content isn't very
exciting all the same.
-
- The third tab
+
+ The third tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an
ordered list: how exciting!
-
dui neque eleifend lorem, a auctor libero turpis at sem.
Aliquam ut porttitor urna.
@@ -88,11 +108,11 @@ l10n:
```
-それで、ここに {{htmlelement("ul")}} と {{htmlelement("div")}} を含む `info-box` のクラス（`class`）を持つ {{htmlelement("section")}} 要素があります。 番号なしリストには 3 つのリスト項目があり、その中にリンクがあります。 これは、コンテンツパネルを表示するためにクリックする実際のタブになります。 `div` には、各タブに対応するコンテンツパネルを構成する 3 つの {{htmlelement("article")}} 要素が含まれています。 各パネルにはいくつかのサンプルのコンテンツが含まれています。
+それでは、ここに {{htmlelement("section")}} 要素のクラス (`class`) が `info-box` であるものがあり、中に 2 つの {{htmlelement("div")}} が入っています。最初の div には 3 つのボタンがあり、その中にリンクがあります。 これは、コンテンツパネルを表示するためにクリックする実際のタブになります。 2 つ目の `div` には、各タブに対応するコンテンツパネルを構成する 3 つの {{htmlelement("article")}} 要素が含まれています。 各パネルにはいくつかのサンプルのコンテンツが含まれています。
-ここでの考え方は、標準の水平ナビゲーションメニューのようにタブをスタイルし、絶対位置指定を使用して互いの上に重なるようにパネルをスタイルするということです。 また、タブが押されたときに対応するパネルを表示し、タブ自体をスタイルするためにページに含める JavaScript も少し用意します。 現段階では JavaScript 自体を理解する必要はありませんが、基本的な [JavaScript](/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics) をできるだけ早く学習することを検討するべきです — UI 機能が複雑になるほど、欲しい機能を実装するために JavaScript が必要になるでしょう。
+ここでの考え方は、標準の水平ナビゲーションメニューのようにタブをスタイルし、絶対位置指定を使用して互いの上に重なるようにパネルをスタイル設定するということです。 また、タブが押されたときに対応するパネルを表示し、タブ自体をスタイルするためにページに含める JavaScript も少し用意します。 現段階では JavaScript 自体を理解する必要はありませんが、基本的な [JavaScript](/ja/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) をできるだけ早く学習することを検討するべきです — UI 機能が複雑になるほど、欲しい機能を実装するために JavaScript が必要になるでしょう。
-### 一般的な設定
+### 全般的な設定
まず、{{HTMLElement("style")}} の開始タグと終了タグの間に次を追加します。
@@ -116,61 +136,58 @@ body {
```css
.info-box {
- width: 450px;
+ width: 452px;
height: 400px;
- margin: 0 auto;
+ margin: 1.25rem auto 0;
}
```
-これはコンテンツに特定の幅と高さを設定し、古い `margin: 0 auto` トリックを使用して画面の中央に配置します。 以前のコースでは、可能であればコンテンツのコンテナーに固定の高さを設定しないことをお勧めしました。 タブのコンテンツは固定されているので、この状況では問題ありません。 また、異なる高さで異なるタブを表示するのも少々不快です。
+これはコンテンツに特定の幅と高さを設定し、古い `margin: 1.25rem auto 0` トリックを使用して画面の中央に配置します。このコースでは以前、できるだけコンテンツのコンテナーに固定の高さを設定しないことをお勧めしました。 タブのコンテンツは固定されているので、この状況では問題ありません。
### タブのスタイル設定
-今度はタブをタブのようにスタイル設定します。基本的にこれらは水平ナビゲーションメニューですが、コースで以前見たようにクリックされたときに異なるウェブページをロードする代わりに異なるパネルを同じページに表示します。 まず、CSS の一番下に次のルールを追加して、番号なしリストからデフォルトの {{cssxref("padding-left")}} と {{cssxref("margin-top")}} を削除します。
+今度はタブをタブのようにスタイル設定します。基本的にこれらは水平ナビゲーションメニューですが、コースで以前見たようにクリックされたときに異なるウェブページを読み込む代わりに、異なるパネルを同じページに表示します。 まず、CSS の一番下に次のルールを追加して、 `tablist` を {{cssxref("flex")}} コンテナーとし、幅を 100% にします。
```css
-.info-box ul {
- padding-left: 0;
- margin-top: 0;
+.info-box [role="tablist"] {
+ min-width: 100%;
+ display: flex;
}
```
> [!NOTE]
> この例では、チェーンの先頭に `.info-box` を持つ子孫セレクターを使用しています。 これは、他のコンテンツがすでに含まれているページに、ページの他の部分に適用されているスタイルを妨げることなく、この機能を挿入できるようにするためです。
-次に、水平方向のタブのスタイルを設定します。 リスト項目は、一列に並ぶようにすべて左にフロートさせ、行頭記号（bullet）を取り除くために {{cssxref("list-style-type")}} を `none` に設定し、{{cssxref("width")}} を `150px` に設定しているので、それらは情報ボックス全体にうまく収まります。 {{htmlelement("a")}} 要素は {{cssxref("display")}}`: inline-block` に設定されているので、一列に並んでいてもスタイル可能で、他のさまざまなプロパティを使用して、タブボタンに適したスタイルになっています。
-
-次の CSS を追加してください。
+次に、ボタンをタブのように見えるようにスタイル設定していきます。以下の CSS を追加します。
```css
-.info-box li {
- float: left;
- list-style-type: none;
- width: 150px;
-}
-
-.info-box li a {
- display: inline-block;
- text-decoration: none;
- width: 100%;
- line-height: 3;
- background-color: red;
- color: black;
- text-align: center;
+.info-box [role="tab"] {
+ padding: 0 1rem 0 1rem;
+ line-height: 3rem;
+ background: white;
+ color: #b60000;
+ font-weight: bold;
+ border: none;
+ outline: none;
}
```
-最後に、このセクションではリンクの状態にスタイルを設定します。最初に、タブの `:focus` と `:hover` 状態を設定し、フォーカス/ホバーされたときに異なる状態に見えるようにして、ユーザーに視覚的なフィードバックを提供します。 2 つ目は、タブの `class` に `active-tab` を説明しています。これはタブがクリックされたときに JavaScript を使用して設定します。以下の CSS を他のスタイルの下に配置します。
+次に、タブの `:focus` および `:hover` の状態を設定して、フォーカス/ホバー時の見た目を変え、ユーザーに視覚的なフィードバックを提供します。
```css
-.info-box li a:focus,
-.info-box li a:hover {
- background-color: #a60000;
- color: white;
+.info-box [role="tab"]:focus span,
+.info-box [role="tab"]:hover span {
+ outline: 1px solid blue;
+ outline-offset: 6px;
+ border-radius: 4px;
}
+```
-.info-box li a.active-tab {
- background-color: #a60000;
+次に、 [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) プロパティが `true` に設定されているタブを強調表示するルールを適用します。これは、タブがクリックされた際に JavaScript で設定します。以下の CSS を、他のスタイルのすぐ下に配置します。
+
+```css
+.info-box [role="tab"][aria-selected="true"] {
+ background-color: #b60000;
color: white;
}
```
@@ -179,77 +196,57 @@ body {
次の仕事はパネルをスタイル設定することです。 さあ行きましょう！
-まず最初に、`.panels` の {{htmlelement("div")}} コンテナーをスタイルするために次の規則を追加します。 ここでは、パネルが情報ボックスの内側にぴったり収まるように固定の {{cssxref("height")}} を設定し、{{htmlelement("html")}} ではなくそれに対して相対的に位置指定子要素を配置できるように {{cssxref("position")}} `relative` で {{htmlelement("div")}} を位置指定コンテキストとして設定します。 最後にレイアウトに影響を与えないように、最後に上記 CSS で設定したフロートを {{cssxref("clear")}} します。
+まず最初に、`.panels` の {{htmlelement("div")}} コンテナーをスタイルするために次のルールを追加します。 ここでは、パネルが情報ボックスの内側にぴったり収まるように、 {{cssxref("position")}} を `relative` に設定して {{htmlelement("div")}} を位置指定コンテキストとすることで、位置指定された子要素を、初期ビューポートではなくその要素からの相対とし、最後に上記 CSS で設定した浮動を解除 ({{cssxref("clear")}}) することで、レイアウトに影響を与えないようにします。
```css
.info-box .panels {
height: 352px;
- position: relative;
clear: both;
+ position: relative;
}
```
-このセクションの最後に、パネルを構成する個々の {{htmlelement("article")}} 要素をスタイルします。 最初に追加する規則は、パネルを絶対位置指定して、それらがすべて {{htmlelement("div")}} コンテナーの {{cssxref("top")}} と {{cssxref("left")}} にぴったり合うように配置することです — これは、パネルを互いの上に重ねて配置するという、このレイアウト機能全体にとって絶対に重要な部分です。 この規則はまた、パネルにコンテナーと同じ設定の高さを与え、コンテンツにいくつかの {{cssxref("padding")}}、テキストの {{cssxref("color")}}、および {{cssxref("background-color")}} を与えます。
-
-ここで追加する 2 番目の規則は、`active-panel` のクラスが設定されているパネルに 1 の `{{cssxref("z-index")}}` が適用されるようにすることです。 これにより、他のパネルの上に重ねて置かれます（位置指定要素は既定で 0 の `z-index` を持ち、これは他のパネルを下に置きます）。 繰り返しますが、適切なタイミングで JavaScript を使用してこのクラスを追加します。
+この節の最後に、パネルを構成する個々の {{htmlelement("article")}} 要素をスタイル設定します。 {{cssxref("position")}} を指定してパネルを絶対位置指定し、 {{cssxref("top")}} と {{cssxref("left")}} を指定することで、 {{htmlelement("div")}} コンテナーの左上に寄せて配置することです。 — これは、パネルを互いの上に重ねて配置するという、このレイアウト機能全体にとって絶対に重要な部分です。 このルールはまた、パネルの高さをコンテナーと同じにし、コンテンツにいくらかのパディング、テキストの {{cssxref("color")}}、および {{cssxref("background-color")}} を与えます。
```css
-.info-box article {
+.info-box [role="tabpanel"] {
+ background-color: #b60000;
+ color: white;
position: absolute;
+ padding: 0.8rem 1.2rem;
+ height: 352px;
top: 0;
left: 0;
- height: 352px;
- padding: 10px;
- color: white;
- background-color: #a60000;
-}
-
-.info-box .active-panel {
- z-index: 1;
}
```
-### JavaScript を追加する
+ここで追加する2つ目のルールは、クラスが `is-hidden` に設定されたパネルが非表示になるようにします。 ここでも、適切なタイミングで JavaScript を使用してこのクラスを追加/除去します。 タブが選択されると、対応するパネルの `is-hidden` クラスが除去され、他にもパネルすべてに `is-hidden` クラスが設定されるため、一度に 1 つのパネルのみが表示されるようになります。
-この機能を動作させるための最後のステップは、JavaScript を追加することです。 {{htmlelement("script")}} の開始タグと終了タグの間に記述されているとおりに、次のコードブロックを挿入します（これらは HTML コンテンツの下方にあります）。
-
-```js
-const tabs = document.querySelectorAll(".info-box li a");
-const panels = document.querySelectorAll(".info-box article");
-
-for (let i = 0; i < tabs.length; i++) {
- setTabHandler(tabs[i], i);
+```css
+.info-box [role="tabpanel"].is-hidden {
+ display: none;
}
+```
-function setTabHandler(tab, tabPos) {
- tab.onclick = () => {
- for (const tab of tabs) {
- tab.className = "";
- }
-
- tab.className = "active-tab";
+### JavaScript
- for (const panel of panels) {
- panel.className = "";
- }
+この機能を動作させるための最後のステップは、JavaScript を追加することです。 `tabs-manual.js` ファイルを、 [`
```
このコードは次のことを行います。
-- 最初に、すべてのタブとすべてのパネルへの参照を `tabs` と `panels` と呼ばれる 2 つの変数に保存するので、後で簡単に使うことができます。
-- 次に、`for` ループを使用してすべてのタブを巡回し、それぞれに対して `setTabHandler()` という関数を実行します。 これにより、各タブをクリックしたときに発生するべき機能が設定されます。 実行されると、関数はそれが実行されている特定のタブへの参照と、`tabs` 配列内のタブの位置を識別するインデックス番号 `i` が渡されます。
-- `setTabHandler()` 関数では、タブに `onclick` イベントハンドラーを設定していて、タブをクリックすると次のことが起こります。
+- [window の load イベント](/ja/docs/Web/API/Window/load_event)時に、 `TabsManual` [クラス](/ja/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript)を `tablist` 要素すべてに対して初期化します。
+- `TabsManual` オブジェクトを作成すると、コンストラクターでタブとパネルへの参照すべてが `tabs` と `tabpanels` 変数に収集されるため、後でそれらに対して簡単にさまざまな処理を行うことができます。
+- コンストラクターは、すべてのタブに対して [`click`](/ja/docs/Web/API/Element/click_event) および [`keydown`](/ja/docs/Web/API/Element/keydown_event) イベントハンドラーも登録します。イベントハンドラーには、クリックまたはキー操作を使用してタブが選択された際に現れるべき内容についてのロジックが含まれます。
+- `setSelectedTab(currentTab)` 関数の中で、以下のことが行われます。。
- - `for` ループで、すべてのタブを巡回し、それらに存在するクラスをすべて削除します。
- - クリックされたタブに `active` のクラスが設定されます。 このクラスには、パネルのスタイル設定と同じ {{cssxref("color")}} と {{cssxref("background-color")}} をタブに設定する CSS の規則が関連付けられていることを以前にも説明しました。
- - `for` ループは、すべてのパネルを巡回し、それらに存在するクラスをすべて削除します。
- - クリックされたタブに対応するパネルに `active-panel` のクラスが設定されます。 このクラスには、{{cssxref("z-index")}} を 1 に設定して他のパネルの上に表示させる CSS の規則が関連付けられていることを以前にも説明しました。
+ - `for` ループを使用して、すべてのタブを巡回し、 `aria-selected` プロパティを `false` に設定し、対応するパネルに `is-hidden` クラスを設定することで、それらを選択解除します。
+ - 選択されたタブ (`currentTab`) では、 `aria-selected` を `true` に設定し、対応するパネルから `is-hidden` クラスを除去します。
-最初の例はこれで終わりです。 2 番目の例で追加しますので、コードを開いたままにしてください。
+- また、このコードは、`←キー`、`→キー`、`Home`、`End` キーを使用するキーボード操作に対応します。
## 固定位置のタブ付き情報ボックス
@@ -268,47 +265,48 @@ function setTabHandler(tab, tabPos) {
```html
- Fake content
+ 擬似コンテンツ
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
- This is fake content. Your main web page contents would probably go here.
+ これは擬似コンテンツです。メインウェブページのコンテンツは、おそらくここに来ます。
```
> [!NOTE]
-> お好みにより、偽のコンテンツを本物のコンテンツに変更してもかまいません。
+> お好みにより、擬似コンテンツを本物のコンテンツに変更してもかまいません。
### 既存の CSS への変更
-次に、情報ボックスを配置して位置指定するために、既存の CSS に若干の変更を加える必要があります。 `.info-box` の規則を変更して、`margin: 0 auto;` を取り除き（情報ボックスを中央に配置する必要はもうありません）、{{cssxref("position")}}`: fixed;` を追加して、ブラウザーのビューポートの {{cssxref("top")}} に貼り付けます。
+次に、情報ボックスを配置して位置指定するために、既存の CSS に若干の変更を加える必要があります。 `.info-box` のルールを変更して、`margin: 0 auto;` を取り除き（情報ボックスを中央に配置する必要はもうありません）、 {{cssxref("position", "position: fixed;")}} を追加して、ブラウザーのビューポートの {{cssxref("top")}} に貼り付けます。
これは今、次のようになるはずです。
```css
.info-box {
- width: 450px;
+ width: 452px;
height: 400px;
+ margin: 0 auto;
position: fixed;
top: 0;
}
@@ -326,6 +324,10 @@ function setTabHandler(tab, tabPos) {
height: 2000px;
margin-left: 470px;
}
+
+.fake-content p {
+ margin-bottom: 200px;
+}
```
まず、情報ボックスパネルと同じ {{cssxref("background-color")}}、{{cssxref("color")}}、および {{cssxref("padding")}} をコンテンツに与えます。 それから、それを右に動かすために大きな {{cssxref("margin-left")}} を与えて、情報ボックスが収まるスペースを作り、他に何も重ならないようにします。
@@ -346,59 +348,54 @@ function setTabHandler(tab, tabPos) {
まず始めに、Github リポジトリーから [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) のローカルコピーを作成します。 これは前の例から続いていないので、新鮮な出発点ファイルが必要です。 ファイル内の HTML を見てみましょう。
```html-nolint
-❔
-
-
+
+
+
```
-{{htmlelement("label")}} 要素と {{htmlelement("input")}} 要素から始めましょう — `` 要素は通常、アクセシビリティの目的でテキストラベルをフォーム要素に関連付けるために使用します（スクリーンリーダーのユーザーが、どの説明がどのフォーム要素に対応しているかを確認できるようにします）。 ここでは、`for` 属性と `id` 属性を使用して `` 要素のもう 1 つの便利な副作用は、チェックボックス自体だけでなく、チェックボックスのラベルをクリックしてチェックボックスをチェックできることです。 これはよく知られた[チェックボックスハック](https://css-tricks.com/the-checkbox-hack/)（英語）をもたらしました。 それはボタンを切り替えることによって要素を制御する JavaScript フリーの方法を提供します。 制御する要素は、他の 2 つに続く {{htmlelement("aside")}} 要素です（簡潔にするために、上記のコードリストからそのコンテンツを省略しました）。
-
-以下のセクションでは、これがどのように機能するのかを説明します。
+まず、ここではボタンテキストとして特別な疑問符文字を持つ {{htmlelement("button")}} 要素があります。 ボタンが押されると、 [`aside`](/ja/docs/Web/HTML/Element/aside) 情報パネルが表示または非表示になります。 下記では、これがどのように動作するのかを説明します。
-### フォーム要素のスタイル設定
+### ボタンのスタイル設定
-まずフォーム要素を扱いましょう — {{htmlelement("style")}} タグの間に次の CSS を追加します。
+まずボタンを扱いましょう — {{htmlelement("style")}} タグの間に次の CSS を追加します。
```css
-label[for="toggle"] {
- font-size: 3rem;
+#menu-button {
position: absolute;
- top: 4px;
- right: 5px;
+ top: 0.5rem;
+ right: 0.5rem;
z-index: 1;
- cursor: pointer;
-}
-input[type="checkbox"] {
- position: absolute;
- top: -100px;
+ font-size: 3rem;
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
}
```
-最初の規則は `` をスタイルします。 ここでは、次のことをしています。
+最初のルールは `` にスタイル設定します。ここでは、次のことをしています。
-- アイコンを見やすく大きくするには、大きい {{cssxref("font-size")}} を設定します。
-- それに {{cssxref("position")}}`: absolute` を設定し、それを右上隅にうまく配置するために {{cssxref("top")}} と {{cssxref("right")}} を使用しました。
-- それに 1 の {{cssxref("z-index")}} を設定します — これは、情報パネルがスタイル設定されて表示されるときに、アイコンが隠れないようにし、アイコンがその上に表示されるので、もう一度押すと情報パネルを非表示にできます。
-- アイコンが何か面白いことをしていることをユーザーに視覚的に知らせるために、{{cssxref("cursor")}} のプロパティを使用して、マウスポインターをアイコン上に移動したときにマウスポインターをハンドポインターに変更します（リンク上にあるときに表示されるもののように）。
-
-2 番目の規則は、実際のチェックボックスの `` をクリックすると、関連するチェックボックスがオンになることを忘れないでください！ これは、ハックです。） あなたはもっと多くを学ぶでしょう...
+- 少し間隔を空けるために水平方向の {{cssxref("padding")}} も指定します。
+- 次に、パネルに {{cssxref("position", "position: fixed;")}} を設定して、ページにスクロールするコンテンツがある場合でも、パネル上では常に同じ場所に表示されるようにします。 それをビューポートの {{cssxref("top")}} に接着し、既定で {{cssxref("right")}} が画面外になるように設定します。
+- 最後に、要素に {{cssxref("transition")}} を設定します。トランジションは、単に突然「オン」、「オフ」になるのではなく、状態間の変化を滑らかに行わせることを可能にする興味深い機能です。 この場合、チェックボックスがオンになったとき（言い換えれば、疑問符のアイコンをクリックしたとき）にパネルを画面上で滑らかにスライドさせることを目的としています。
### チェック状態を設定する
追加する CSS の最後の部分がもう 1 つあります。 CSS の下部に次のコードを追加してください。
```css
-input[type="checkbox"]:checked + aside {
+#info-panel.open {
right: 0px;
}
```
-セレクターはここではかなり複雑です — 私たちは `` 要素を選択していますが、それがチェックされているときだけです（これを達成するための {{cssxref(":checked")}} 擬似クラスの使用に注意してください）。 この場合、`` の {{cssxref("right")}} プロパティを `0px` に設定しています。 これにより、パネルが再び画面に表示されるようになります（遷移により滑らかに）。 ラベルをもう一度クリックすると、チェックボックスがオフになり、パネルを再び隠します。
+この一連のルールでは、情報パネルに `.open` クラスが設定されている場合、 `` の {{cssxref("right")}} プロパティを `0px` に設定し、パネルが再び画面上に（トランジションによりスムーズに）表示されるようにします。 `.open` クラスが除去されると、パネルは再び非表示になります。
+
+ボタンをクリックすると、情報パネルに `.open` クラスが追加または除去されるようにするには、 JavaScript を使用する必要があります。次のコードを {{htmlelement("script")}} タグの間に追加します。
+
+```js
+const button = document.querySelector("#menu-button");
+const panel = document.querySelector("#info-panel");
+
+button.addEventListener("click", () => {
+ panel.classList.toggle("open");
+ button.setAttribute("aria-expanded", panel.classList.contains("open"));
+});
+```
+
+このコードは、ボタンにクリックイベントハンドラーを追加します。クリックハンドラーは、 `open` クラスを情報ボックスパネル上で切り替えます。これにより、パネルがビューにスライドインまたはスライドアウトします。
+イベントハンドラーは、アクセシビリティを向上させるために、 [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) プロパティをボタンに設定します。
-これで、JavaScript を使用しない、かなり賢い方法でトグルボタン効果を作成できました。この効果にはいくつかの懸念があります。フォーム要素はそのために意図されたものではないので、これはフォーム要素のちょっとした乱用です。さらに、この効果はアクセシビリティの観点からはあまり良くありません。既定ではラベルはフォーカスされませんし、フォーム要素の非意味的な使用はスクリーンリーダーに問題を引き起こすことができます。JavaScript とリンクまたはボタンがより適切かもしれませんが、それでも試してみるのは楽しいことです。
+以上です。トグル式の情報パネル効果を作成する最も簡単な方法です。
## まとめ
-それでは、位置指定の見方を締めくくります — これまでのところ、基本的な仕組みがどのように機能するのか、またこれらを適用して興味深い UI 機能を構築する方法を理解しているはずです。 これをすぐに理解できなくても心配しないでください — 位置指定はかなり高度なトピックであり、理解を助けるために記事をいつでも再び参照することができます。 次の話題はフレックスボックスです。
+それでは、位置指定の見方を締めくくります。これまでのところ、基本的な仕組みがどのように機能するのか、またこれらを適用して興味深い UI 機能を構築する方法を理解しているはずです。 これをすぐに理解できなくても心配しないでください。位置指定はかなり高度なトピックであり、理解を助けるために記事をいつでも再び参照することができます。
diff --git a/files/ja/learn_web_development/core/css_layout/rwd_skills/index.md b/files/ja/learn_web_development/core/css_layout/rwd_skills/index.md
index 4fa27f317d24a3..166718338195ec 100644
--- a/files/ja/learn_web_development/core/css_layout/rwd_skills/index.md
+++ b/files/ja/learn_web_development/core/css_layout/rwd_skills/index.md
@@ -1,17 +1,17 @@
---
title: "スキルテスト: レスポンシブウェブデザインとメディアクエリー"
slug: Learn_web_development/Core/CSS_layout/rwd_skills
-original_slug: Learn/CSS/CSS_layout/rwd_skills
l10n:
- sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-このスキルテストの目的は、[メディアクエリーの使用方法](/ja/docs/Learn/CSS/CSS_layout/Media_queries)を理解しているかどうかを評価し、実践的な課題でレスポンシブウェブデザインを身につけてもらうことです。この課題をクリアするために必要な知識は、 [CSS レイアウトモジュール](/ja/docs/Learn/CSS/CSS_layout)のレイアウトレッスンに完全に含まれています。
+このスキルテストの目的は、[メディアクエリーの使用方法](/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries)を理解しているかどうかを評価し、実践的な課題でレスポンシブウェブデザインを身につけてもらうことです。この課題をクリアするために必要な知識は、 [CSS レイアウトモジュール](/ja/docs/Learn_web_development/Core/CSS_layout)のレイアウトレッスンに完全に含まれています。
> [!NOTE]
-> 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインツールを使用して作業したほうが便利な場合もあります。
+> 複数の画面サイズでデザインを検査する必要があるため、このページには編集機能は持たせていません。
+> コードをローカルにコピーするか、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターを使用することができます。
>
> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
@@ -21,6 +21,6 @@ l10n:
課題は、このレイアウトのデスクトップ版を作成し、画面の幅に余裕があるときに表示することです。最終結果は下記の画像のようになるはずです。
-
+
-デスクトップレイアウトを作成する方法はいくつもありますので、いろいろ試してみてください。また、 2 つ目のブレークポイントを追加して、タブレットで縦長モードで動作するレイアウトを作成することもできます。
+デスクトップレイアウトを作成する方法はいくつもありますので、いろいろ試してみてください。また、 2 つ目のブレークポイントを追加して、タブレットで縦長モードで動作するレイアウトを作成してもいいでしょう。
diff --git a/files/ja/learn_web_development/core/css_layout/supporting_older_browsers/index.md b/files/ja/learn_web_development/core/css_layout/supporting_older_browsers/index.md
index f1371adfeb43f3..46fddb70fb573c 100644
--- a/files/ja/learn_web_development/core/css_layout/supporting_older_browsers/index.md
+++ b/files/ja/learn_web_development/core/css_layout/supporting_older_browsers/index.md
@@ -1,15 +1,12 @@
---
title: 古いブラウザーの対応
slug: Learn_web_development/Core/CSS_layout/Supporting_Older_Browsers
-original_slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers
l10n:
- sourceCommit: 11bc346854854636796fe7fb9274ed2c094dcf53
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}
-
このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。
@@ -17,11 +14,10 @@ l10n:
前提知識:
- HTML の基礎（HTML 入門 で学習）、 CSS の動作の考え方（
- CSS 入門 、
- ボックスのスタイル設定 で学習）
+ CSS によるスタイル設定の基本 で学習）
@@ -63,7 +59,7 @@ MDN では、すべての CSS プロパティページでブラウザー互換
## CSS で代替手段を作成する
-CSS 仕様書には、レイアウトメソッドのような 2 つの類似した機能が同じアイテムに適用された場合に、ブラウザーがどのような処理を行うかを説明する情報が含まれています。例えば、アイテムが浮動要素であり、グリッドアイテムでもあり、CSS グリッドコンテナーの一部でもある場合にどうなるかを定義しています。要素に {{cssxref("margin-top")}} と {{cssxref("margin-block-start")}} プロパティが設定されている場合の定義もあります。
+CSS 仕様書には、レイアウトメソッドのような 2 つの類似した機能が同じアイテムに適用された場合に、ブラウザーがどのような処理を行うかを説明する情報が含まれています。例えば、アイテムが浮動ボックスであり、グリッドアイテムでもあり、CSS グリッドコンテナーの一部でもある場合にどうなるかを定義しています。要素に {{cssxref("margin-top")}} と {{cssxref("margin-block-start")}} プロパティが設定されている場合の定義もあります。
ブラウザーは新しい機能を認識しない場合、その宣言を不正なものとして[エラーを発生させずに](/ja/docs/Web/CSS/CSS_syntax/Error_handling#css_パーサーのエラー)破棄します。ブラウザーが対応していない CSS のプロパティや数値は破棄されるため、古い値と新しい値の両方を同じルールセットで共存させることができます。ただ、新しい値の前に古い値を宣言し、対応している場合は新しい値が古い値を上書きするようにします（代替表示）。
@@ -76,11 +72,11 @@ CSS 仕様書には、レイアウトメソッドのような 2 つの類似し
}
```
-同様に、この[エラー処理](/ja/docs/Web/CSS/CSS_syntax/Error_handling#ベンダー接頭辞)は、古い CSS コードベースが、古い{{glossary("Vendor_prefix", "ベンダー接頭辞付き")}}機能が対応できなくなったとしても、動作し続けることを保証します。ベンダー接頭辞はもう一般的には使用されていませんが、ベンダー接頭辞のプロパティや値を記載する必要がある場合は、標準値の前に接頭辞つきの値を宣言し、対応している場合に新しい値が代替値を上書きするようにしてください。
+同様に、この[エラー処理](/ja/docs/Web/CSS/CSS_syntax/Error_handling#ベンダー接頭辞)は、古い CSS コードベースが、古い{{glossary("Vendor_Prefix", "ベンダー接頭辞付き")}}機能が対応できなくなったとしても、動作し続けることを保証します。ベンダー接頭辞はもう一般的には使用されていませんが、ベンダー接頭辞のプロパティや値を記載する必要がある場合は、標準値の前に接頭辞つきの値を宣言し、対応している場合に新しい値が代替値を上書きするようにしてください。
### 新しいセレクターの使用
-すべてのブラウザーで対応していない新しいセレクターを記載することは、より慎重に処理する必要があります。セレクターのカンマ区切りリスト内の[セレクターが不正](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#セレクターの対応)な場合、スタイルブロック全体が無視されます。
+すべてのブラウザーで対応していない新しいセレクターを記載することは、より慎重に処理する必要があります。セレクターのカンマ区切りリスト内の[セレクターが不正](/ja/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#セレクターの対応)な場合、スタイルブロック全体が無視されます。
ブラウザーの対応していないベンダー接頭辞付きの[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)や新しい[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)を使用する場合は、 {{cssxref(":is", ":is()")}} や {{cssxref(":where", ":where()")}} を使用して寛容なセレクターリスト内に接頭辞の値を記載して、セレクターブロック全体が[不正で無視されないように](/ja/docs/Web/CSS/Selector_list#無効なセレクターリスト)してください。
@@ -149,19 +145,17 @@ CSS 仕様書には、レイアウトメソッドのような 2 つの類似し
## 古いブラウザーをテストする
-1 つの方法は、[ブラウザー横断テスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing)のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。
+1 つの方法は、[ブラウザー横断テスト](/ja/docs/Learn_web_development/Extensions/Testing)のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。
## まとめ
これで、古いブラウザーに代替 CSS を提供し、新しい機能を自信を持ってテストするための知識を持ちました。これで、新しいテクニックを自信を持って使用することができます。
-これで CSS レイアウトに関する記事を読み終えていると思いますので、このモジュールのアセスメント、[基本的なレイアウトの理解度](/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)で理解度を試す時になりました。
+これで CSS レイアウトに関する記事を読み終えていると思いますので、このモジュールのアセスメント、[基本的なレイアウトの理解度](/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension)で理解度を試す時になりました。
## 関連情報
-- [`@supports`](/ja/docs/Web/CSS/@supports) at-rule
+- [`@supports`](/ja/docs/Web/CSS/@supports) アットルール
- [CSS アットルール](/ja/docs/Web/CSS/At-rule)
- [機能クエリーの使用](/ja/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries)
- [CSS 条件付きルール](/ja/docs/Web/CSS/CSS_conditional_rules)モジュール
-
-{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}
+ この