From 154046140b20cffef6e38343b838fba148721676 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 30 Dec 2024 08:42:16 +0900 Subject: [PATCH 1/4] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/css_layout/flexbox/index.md | 35 +- .../core/css_layout/flexbox_skills/index.md | 269 +++++++++++++-- .../core/css_layout/floats/index.md | 77 +++-- .../core/css_layout/floats_skills/index.md | 200 +++++++++-- .../fundamental_layout_comprehension/index.md | 41 +-- .../core/css_layout/grids/index.md | 101 +++--- .../core/css_layout/index.md | 67 ++-- .../css_layout/legacy_layout_methods/index.md | 58 ++-- .../core/css_layout/media_queries/index.md | 312 ++++++++++++------ .../core/css_layout/multicol_skills/index.md | 212 ++++++++++-- .../multiple-column_layout/index.md | 95 +++--- .../core/css_layout/position_skills/index.md | 194 +++++++++-- .../core/css_layout/positioning/index.md | 230 +++++-------- .../practical_positioning_examples/index.md | 310 ++++++++--------- .../core/css_layout/rwd_skills/index.md | 12 +- .../supporting_older_browsers/index.md | 24 +- 16 files changed, 1484 insertions(+), 753 deletions(-) diff --git a/files/ja/learn_web_development/core/css_layout/flexbox/index.md b/files/ja/learn_web_development/core/css_layout/flexbox/index.md index 14fd7de17ac26d..4f09c905ce6828 100644 --- a/files/ja/learn_web_development/core/css_layout/flexbox/index.md +++ b/files/ja/learn_web_development/core/css_layout/flexbox/index.md @@ -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 次元のレイアウト方法です。アイテムがたわんで（伸びて）追加の空間を埋めたり、縮んで小さい空間に収まったりします。この記事では、すべての基本事項について説明します。 @@ -15,15 +16,25 @@ l10n: 前提知識: - HTML の基本（HTML 入門で学んでください）、および CSS の動作の仕組みの考え方（CSS 入門で学んでください）。 + HTML によるコンテンツの構造化、 + CSS によるスタイル設定の基本、 + 基本的なテキストとフォントのスタイル設定、 + CSS レイアウトの基本概念の基礎知識。 - 目的: + 学習成果: - フレックスボックスレイアウトシステムを使用して、ウェブのレイアウトを作成する方法を習得する。 + @@ -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 { @@ -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)です。 ## 関連情報 @@ -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")}} diff --git a/files/ja/learn_web_development/core/css_layout/flexbox_skills/index.md b/files/ja/learn_web_development/core/css_layout/flexbox_skills/index.md index 6a82c2f002101b..eb4e44cf74269e 100644 --- a/files/ja/learn_web_development/core/css_layout/flexbox_skills/index.md +++ b/files/ja/learn_web_development/core/css_layout/flexbox_skills/index.md @@ -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 @@ -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 + +``` + +```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")}} + +
+ここをクリックすると、解決策を表示します。 + +`display: flex` を適用すると、`justify-content` プロパティを使用して空間を制御することができます。 + +```css +nav ul { + display: flex; + justify-content: space-between; +} +``` + +
## 課題 2 @@ -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 + +``` + +```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")}} + +
+ここをクリックすると、解決策を表示します。 + +一括指定を使用するのが最善ですので、このシナリオでは `flex: 1` が最も適切な答えでしょう。したがって、最適な結果は次のようになります。 + +```css +ul { + display: flex; +} + +li { + flex: 1; +} +``` + +ボーナス問題では、最初の要素を対象とし、 `flex: 2;`（または `flex: 2 0 0;` または `flex-grow: 2`）を設定するセレクターを追加します。 + +```css +li:first-child { + flex: 2; +} +``` + +
## 課題 3 @@ -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 +
+
Center me.
+
+``` + +```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")}} + +
+ここをクリックすると、解決策を表示します。 + +アイテムを水平方向と垂直方向に中央揃えにするには、親スタイルを変更するだけで十分です。 + +```css +.parent { + display: flex; + justify-content: center; + align-items: center; +} +``` + +
## 課題 4 @@ -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 + +``` + +```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")}} + +
+ここをクリックすると、解決策を表示します。 + +この課題では、フレックス行を折り返すための `flex-wrap` プロパティを理解することが求められます。 さらに、上記の例のような外見にするには、子要素に `flex: auto`（または `flex: 1 1 auto;`）を設定する必要があります。 + +```css +ul { + display: flex; + flex-wrap: wrap; +} + +li { + flex: auto; +} +``` + +
+ +## 関連情報 + +- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics) diff --git a/files/ja/learn_web_development/core/css_layout/floats/index.md b/files/ja/learn_web_development/core/css_layout/floats/index.md index cf09686bcaad54..011347808fe486 100644 --- a/files/ja/learn_web_development/core/css_layout/floats/index.md +++ b/files/ja/learn_web_development/core/css_layout/floats/index.md @@ -1,29 +1,38 @@ --- title: 浮動ボックス slug: Learn_web_development/Core/CSS_layout/Floats -original_slug: Learn/CSS/CSS_layout/Floats l10n: - sourceCommit: afaf3aeeffa8408cf0a8a46c3d8fb0d347aad9f5 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}} -元々は、テキストブロック内の画像を浮動させるためのものだった {{cssxref("float")}} プロパティは、ウェブページで複数の列のレイアウトを作成するために最もよく使用されるツールの 1 つになりました。フレックスボックスとグリッドの出現により、この記事で説明するように、これで元の目的に戻っています。 +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout")}} + +元々は、テキストブロック内の画像を浮動させるためのものだった {{cssxref("float")}} プロパティは、ウェブページで段組みのレイアウトを作成するために最もよく使用されるツールの 1 つになりました。フレックスボックスやグリッドの出現により、この記事で説明するように、これで元の目的に戻っています。 - + @@ -35,7 +44,7 @@ l10n: しかしウェブ開発者はすぐに画像だけでなく何でも浮動させることができることに気づいたので、浮動ボックスの使用は広がりました。例えば、[ドロップキャップ](https://css-tricks.com/snippets/css/drop-caps/)のような楽しいレイアウト効果です。 -浮動ボックスは一般に、互いに並ぶように浮動する複数列の情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました（既定のふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます）。 より新しくより良いレイアウトテクニックが利用可能なので、このように浮動ボックスを使うことは[過去のテクニック](/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)とみなされるべきです。 +浮動ボックスは一般に、互いに並ぶように浮動する、段組みの情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました（既定のふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます）。 より新しくより良いレイアウトテクニックが利用可能なので、この用途で浮動ボックスを使うことは過去のテクニックとみなされるべきです。 この記事では、浮動ボックスの正しい使い方に集中します。 @@ -46,9 +55,9 @@ l10n: まず、簡単な HTML から始めましょう。 HTML の `body` に次のコードを追加し、それまでの内部にあるものはすべて削除します。 ```html -

Float example

+

浮動ボックスの例

-
Float
+
浮動ボックス

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam @@ -106,9 +115,9 @@ body { ボックスを浮動させるには、次のように {{cssxref("float")}} と {{cssxref("margin-right")}} プロパティを `.box` ルールに追加します。 ```html hidden -

Float example

+

浮動ボックスの例

-
Float
+
浮動ボックス

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam @@ -153,13 +162,13 @@ body { {{EmbedLiveSample('Floating_the_box', '100%', 500)}} -浮動ボックスがどのように機能するかを考えてみましょう。 `float` が設定されている要素（この場合は {{htmlelement("div")}} 要素）は、文書の通常のレイアウトフローから除かれ、その親コンテナー（この場合は {{htmlelement("body")}}）の左側に固定されます。通常のレイアウトフローで浮動した要素の下に来るコンテンツは、これで浮動要素の周りを回り込み、浮動した要素の上まで右側の空間を埋めます。そこで、コンテンツは停止します。 +浮動ボックスがどのように機能するかを考えてみましょう。 `float` が設定されている要素（この場合は {{htmlelement("div")}} 要素）は、文書の通常のレイアウトフローから除かれ、その親コンテナー（この場合は {{htmlelement("body")}}）の左側に固定されます。通常のレイアウトフローで浮動した要素の下に来るコンテンツは、これで浮動ボックスの周りを回り込み、浮動した要素の上まで右側の空間を埋めます。そこで、コンテンツは停止します。 コンテンツを右に浮動させると、まったく同じ効果が得られますが、逆になります。 つまり、浮動した要素は右に固定され、コンテンツはその左側を回り込みます。 `float` の値を `right` に変更し、最後のルールセットで {{cssxref("margin-right")}} を {{cssxref("margin-left")}} に置き換えて、結果がどうなるかを確認してください。 -### 浮動ブロックを視覚化 +### 浮動ボックスを視覚化 -テキストを遠ざけるために浮動ボックスにマージン（margin、余白）を追加することはできますが、テキストを浮動ボックスから遠ざけるためにテキストにマージンを追加することはできません。 これは、浮動要素は通常フローから外され、後続アイテムのボックスが実際には浮動ボックスの背後にあるためです。例にいくつかの変更を加えることによってこれを実証することができます。 +テキストを遠ざけるために浮動ボックスにマージン（margin、余白）を追加することはできますが、テキストを浮動ボックスから遠ざけるためにテキストにマージンを追加することはできません。 これは、浮動ボックスは通常フローから外され、後続アイテムのボックスが実際には浮動ボックスの背後にあるためです。例にいくつかの変更を加えることによってこれを実証することができます。 テキストの最初の段落、つまり浮動ボックスの直後の段落に `special` のクラスを追加してから、CSS に次のルールを追加します。 これらは続く段落に背景色を設定します。 @@ -174,9 +183,9 @@ body { 効果を見やすくするために、浮動ボックスの `margin-right` を `margin` に変更すると、浮動ボックスの全周にマージンができます。 以下の例のように、浮動ボックスの真下にある段落の背景を見ることができます。 ```html hidden -

Float example

+

浮動ボックスの例

-
Float
+
浮動ボックス

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam @@ -231,9 +240,9 @@ body { 続く要素の[行ボックス](/ja/docs/Web/CSS/Visual_formatting_model#line_boxes)が短くなっているので、テキストは浮動ボックスを回り込みますが、浮動ボックスは通常フローから除かれるため、段落の周りのボックスは全幅のままになります。 -## 浮動ボックスのクリア +## 浮動ボックスの解除 -浮動ボックスは通常フローから除かれ、他の要素がその横に表示されることを見てきました。したがって、続く要素が上方向に移動するのを止めたい場合は、それをクリアする必要があります。これは {{cssxref("clear")}} プロパティによって実現できます。 +浮動ボックスは通常フローから除かれ、他の要素がその横に表示されることを見てきました。したがって、続く要素が上方向に移動するのを止めたい場合は、それを解除する必要があります。これは {{cssxref("clear")}} プロパティによって実現できます。 前の例の HTML では、浮動しているアイテムの下の 2 番目の段落に `cleared` のクラスを追加します。 次に、 CSS に以下を追加してください。 @@ -244,9 +253,9 @@ body { ``` ```html hidden -

Float example

+

浮動ボックスの例

-
Float
+
浮動ボックス

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam @@ -309,7 +318,7 @@ body { {{EmbedLiveSample('Clearing_floats', '100%', 600)}} -続く段落では浮動要素がクリアされ、並んで現れなくなったことがわかります。 `clear` プロパティは次の値を受け入れます。 +続く段落では浮動ボックスがクリアされ、並んで現れなくなったことがわかります。 `clear` プロパティは次の値を受け入れます。 - `left`: 左に浮動しているアイテムをクリアします。 - `right`: 右に浮動しているアイテムをクリアします。 @@ -317,11 +326,11 @@ body { ## 浮動ボックスを回り込むボックスのクリア -これで、浮動要素に続く何かをクリアする方法はお分かりいただけたと思いますが、背の高い浮動要素と短い段落があり、両方の要素を囲むボックスがある場合、どうなるかを見てみましょう。 +これで、浮動ボックスに続く何かをクリアする方法はお分かりいただけたと思いますが、背の高い浮動ボックスと短い段落があり、両方の要素を囲むボックスがある場合、どうなるかを見てみましょう。 ### 問題 -文書を変更して、最初の段落と浮動要素を、{{htmlelement("div")}} に `wrapper` クラスがついた要素で囲むようにします。 +文書を変更して、最初の段落と浮動ボックスを、{{htmlelement("div")}} に `wrapper` クラスがついた要素で囲むようにします。 ```html live-sample___the_problem

@@ -336,7 +345,7 @@ body {
``` -CSS で、`.wrapper` クラスに次のルールを追加してからページをリロードします。 +CSS で、`.wrapper` クラスに次のルールを追加してからページを再読み込みします。 ```css live-sample___the_problem .wrapper { @@ -354,7 +363,7 @@ CSS で、`.wrapper` クラスに次のルールを追加してからページ } ``` -段落に背景色を付けた例と同じように、背景色は浮動要素の後ろに来ることがわかります。 +段落に背景色を付けた例と同じように、背景色は浮動ボックスの後ろに来ることがわかります。 ```html hidden live-sample___the_problem

@@ -402,7 +411,7 @@ body { {{EmbedLiveSample('the_problem', '100%', 600)}} -繰り返しになりますが、これは浮動要素が通常のフローから外れているためです。浮動ボックスと、浮動ボックスに回り込む最初の段落のテキストを一緒に囲めば、その後のコンテンツはボックスから外されると思うかもしれません。しかし、上記のようにそうではありません。これに対処するには、[ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) を作成すするように {{cssxref("display")}} プロパティを使用するのが標準的な方法です。 +繰り返しになりますが、これは浮動ボックスが通常のフローから外れているためです。浮動ボックスと、浮動ボックスに回り込む最初の段落のテキストを一緒に囲めば、その後のコンテンツはボックスから外されると思うかもしれません。しかし、上記のようにそうではありません。 ### display: flow-root @@ -418,9 +427,9 @@ body { ``` ```html hidden -

Float example

+

浮動ボックスの例

-
Float
+
浮動ボックス

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus @@ -476,10 +485,10 @@ body { ## スキルテスト -この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 浮動ブロック](/ja/docs/Learn/CSS/CSS_layout/Floats_skills)を見てください。 +この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 浮動ボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Floats_skills)を見てください。 ## まとめ -あなたは今、現代のウェブ開発で浮動ボックスについて知っておくべきことがすべてわかっています。 過去のレイアウト方法の使用方法については、[過去のレイアウト方法](/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)に関する記事を参照してください。 古いプロジェクトで作業している場合に便利です。 +浮動ボックスについて知っておくべきことはそれだけです。次に、位置指定について詳しく見ていきましょう。 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core/CSS_layout/Positioning", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/ja/learn_web_development/core/css_layout/floats_skills/index.md b/files/ja/learn_web_development/core/css_layout/floats_skills/index.md index b5afd60dad17c0..9f7d6a885ebbb4 100644 --- a/files/ja/learn_web_development/core/css_layout/floats_skills/index.md +++ b/files/ja/learn_web_development/core/css_layout/floats_skills/index.md @@ -1,18 +1,17 @@ --- title: "スキルテスト: 浮動ボックス" slug: Learn_web_development/Core/CSS_layout/Floats_skills -original_slug: Learn/CSS/CSS_layout/Floats_skills l10n: - sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{LearnSidebar}} -このスキルテストの目的は、 [CSS の浮動ボックス](/ja/docs/Learn/CSS/CSS_layout/Floats)を理解しているかを評価するために、 {{CSSxRef("float")}} と {{CSSxRef("clear")}} プロパティと値、そして浮動ボックスをクリアするその他の方法を使用することです。今までに扱った素材のさまざまな要素を使用する、 3 つの小さな課題に取り組んでいただきます。 +このスキルテストの目的は、 [CSS の浮動ボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Floats)を理解しているかを評価するために、 {{CSSxRef("float")}} と {{CSSxRef("clear")}} プロパティと値、そして浮動ボックスをクリアするその他の方法を使用することです。今までに扱った素材のさまざまな要素を使用する、 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 @@ -23,11 +22,61 @@ l10n: 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 900)}} - -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float1-download.html)しましょう。 +```html live-sample___float1 +

+
One
+
Two
+

2 つのボックスを、このテキストの左右に浮動ボックスとして配置してください。

+
+``` + +```css hidden live-sample___float1 +body { + font: 1.2em / 1.5 sans-serif; +} +* { + box-sizing: border-box; +} +.box { + padding: 0.5em; +} +.float { + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rebeccapurple; + color: #fff; + padding: 1em; +} +``` + +```css live-sample___float1 +.float1 { +} + +.float2 { +} +``` + +{{EmbedLiveSample("float1", "", "210px")}} + +
+ここをクリックすると、解決策を表示します。 + +次のように、両方のボックスに `float` を使用します。 + +```css +.float1 { + float: left; +} + +.float2 { + float: right; +} +``` + +
## 課題 2 @@ -39,22 +88,131 @@ l10n: 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}} - -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float2-download.html)しましょう。 +```html live-sample___float2 +
+
浮動ボックス
+

この文は浮動ボックスの隣に現れます。

+

この文を浮動ボックスの下記に現れるようにしてください。

+
+``` + +```css hidden live-sample___float2 +body { + font: 1.2em / 1.5 sans-serif; +} +* { + box-sizing: border-box; +} +.box { + padding: 0.5em; +} +.float { + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rebeccapurple; + color: #fff; + padding: 1em; +} +``` + +```css live-sample___float2 +.float { +} + +.below { +} +``` + +{{EmbedLiveSample("float2", "", "300px")}} + +
+ここをクリックすると、解決策を表示します。 + +アイテムを左に配置し、 2 つ目の段落のクラスに `clear: left` を追加する必要があります。 + +```css +.float { + float: left; +} + +.below { + clear: left; +} +``` + +
## 課題 3 -この課題では、浮動要素があります。浮動要素とテキストを包むボックスは、浮動要素の後ろに表示されています。利用できる最新の方法を使用して、下記の画像のようにボックスの背景を浮動要素の下まで拡張させてください。 +この課題では、浮動ボックスがあります。浮動ボックスとテキストを包むボックスは、浮動ボックスの後ろに表示されています。利用できる最新の方法を使用して、下記の画像のようにボックスの背景を浮動ボックスの下まで拡張させてください。 ![テキストの右に表示されるブロックで、どちらも背景色のボックスで囲まれています。](float-task3.png) 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}} - -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/float/float3-download.html)しましょう。 +```html live-sample___float3 +
+
浮動ボックス
+

この文は浮動ボックスの隣に現れます。

+
+``` + +```css hidden live-sample___float3 +body { + font: 1.2em / 1.5 sans-serif; +} +* { + box-sizing: border-box; +} + +.box { + padding: 0.5em; +} + +.float { + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207 232 220); + padding: 1em; + color: #fff; +} + +.box { + background-color: rebeccapurple; + padding: 10px; + color: #fff; +} +``` + +```css live-sample___float3 +.float { + float: right; +} + +.box { +} +``` + +{{EmbedLiveSample("float3", "", "300px")}} + +
+ここをクリックすると、解決策を表示します。 + +浮動ボックスの下にあるボックスを解除するには、 `.box` のクラスに `display: flow-root` を追加します。 +他にも、 `overflow` や clearfix ハックを使用する方法もありますが、教材では、この目的を達成するための最新の方法として、 `flow-root` メソッドについて詳しく説明しています。 + +```css +.box { + display: flow-root; +} +``` + +
+ +## 関連情報 + +- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics) diff --git a/files/ja/learn_web_development/core/css_layout/fundamental_layout_comprehension/index.md b/files/ja/learn_web_development/core/css_layout/fundamental_layout_comprehension/index.md index 4b6ac6ce3ab9f2..f4a6efea1a57a9 100644 --- a/files/ja/learn_web_development/core/css_layout/fundamental_layout_comprehension/index.md +++ b/files/ja/learn_web_development/core/css_layout/fundamental_layout_comprehension/index.md @@ -1,42 +1,25 @@ --- -title: 基礎的なレイアウトの理解 +title: "課題: 基礎的なレイアウトの理解" slug: Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension -original_slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension l10n: - sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{LearnSidebar}} -{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} - -このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。 - -
前提知識: - HTML の基本（HTML 入門で学んでください）、および CSS の動作の仕組みの考え方（CSS 入門で学んでください）。 + HTML によるコンテンツの構造化、 + CSS によるスタイル設定の基本、 + 基本的なテキストとフォントのスタイル設定、 + CSS レイアウトの基本概念の基礎知識。
目的:学習成果: - ウェブページ上に浮動ボックスの特徴を作成する方法と、 `clear` プロパティおよびその他の浮動状態のクリア方法の使い方を習得すること。 +
    +
  • 浮動ボックスの目的を理解すること。テキストの段組み内に画像を浮動させるため、他にもドロップキャップや浮動インセット情報ボックスのようなテクニックがある。
    • +
  • 浮動ボックスはかつては段組みのレイアウトに使用されていましたが、現在ではより有益なツールが利用できるようになったため、その用途は適さなくなったこと。
    • +
  • 浮動ボックス プロパティを使用して浮動ボックスを作成すること。
    • +
  • clear や display: flow-root 値を使用して浮動を解除すること。
    • +
- - - - - - - - - - -
前提知識: - この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 -
目的: - フレックスボックス、グリッド、浮動ボックス、位置指定を使用した CSS レイアウトメソッドの理解度をテストします。 -
- -## 開始点 + +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Media_queries", "Learn_web_development/Core/Scripting", "Learn_web_development/Core/CSS_layout")}} + +このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、知識の一部をテストします。 + +## 出発点 HTML と CSS、そして 6 枚の画像一式は[こちら](https://github.com/mdn/learning-area/tree/main/css/css-layout/fundamental-layout-comprehension)からダウンロードすることができます。 HTML 文書とスタイルシートはコンピューターのディレクトリーに保存し、画像は `images` という名前のフォルダー内に追加してください。ブラウザーに `index.html` ファイルを開くと、下記の画像のような、基本的なスタイル設定はあるがレイアウトがないページができるはずです。 -![レイアウト課題の開始点。要素はきれいにレイアウトされていません。左側に5つのリンクがある黒いナビバーの上にウェブサイトのタイトルがあり、以下ブログ記事のタイトルと記事コンテンツが続きます。ブログタイトルとブログコンテンツの間には、左側に配置された写真があります。](layout-task-start.png) +![レイアウト課題の出発点。要素はきれいにレイアウトされていません。左側に5つのリンクがある黒いナビバーの上にウェブサイトのタイトルがあり、以下ブログ記事のタイトルと記事コンテンツが続きます。ブログタイトルとブログコンテンツの間には、左側に配置された写真があります。](layout-task-start.png) -この開始点には、通常フローでブラウザーに表示されるレイアウトのコンテンツがすべて含まれています。 +この出発点には、通常フローでブラウザーに表示されるレイアウトのコンテンツがすべて含まれています。 また、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) のようなオンラインエディターを使用することもできます。 オンラインエディターを使用する場合、画像をアップロードし、 `src` 属性の値を新しい画像の場所を指すように置き換える必要があります。 @@ -63,7 +46,7 @@ HTML 文書とスタイルシートはコンピューターのディレクトリ このレイアウトを実現するために HTML を編集する必要はなく、使用するべきテクニックは次のとおりです。 - 位置指定 -- 浮動ブロック +- 浮動ボックス - フレックスボックス - CSS グリッドレイアウト @@ -75,4 +58,4 @@ HTML 文書とスタイルシートはコンピューターのディレクトリ ![ウェブサイトのレイアウト課題完了。要素がきれいにレイアウトされています。 5 つのリンクが等間隔に格納された黒いナビバーの上に、ウェブサイトのタイトルがあります。ナビバーの下記には 2 つの節があります。左側にはブログ記事があります。ブログ記事のタイトルの下に、記事のコンテンツが続きます。ブログのコンテンツは、左配置されたの写真を囲むように配置されています。正しい辺には「写真」のタイトルがあり、 2 枚幅のグリッドに並べられた画像群について書かれています。](layout-task-complete.png) -{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Media_queries", "Learn_web_development/Core/Scripting", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/ja/learn_web_development/core/css_layout/grids/index.md b/files/ja/learn_web_development/core/css_layout/grids/index.md index c4ce72974ab7bd..5485ec81851c5c 100644 --- a/files/ja/learn_web_development/core/css_layout/grids/index.md +++ b/files/ja/learn_web_development/core/css_layout/grids/index.md @@ -1,31 +1,39 @@ --- -title: グリッド +title: CSS グリッドレイアウト slug: Learn_web_development/Core/CSS_layout/Grids -original_slug: Learn/CSS/CSS_layout/Grids l10n: - sourceCommit: 289d6314f3368aa3e28524e7d090f6e9c704e3b1 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} +{{LearnSidebar}} -[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout) (Grid Layout) は、ウェブ用の 2 次元レイアウトシステムです。 コンテンツを行と列にまとめることができ、複雑なレイアウトの作成を簡素化する多くの機能を提供します。この記事では、グリッドレイアウトを始めるに当たって知っておくべきことをすべて説明します。 +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout")}} + +CSS グリッドレイアウト (Grid Layout) は、ウェブ用の 2 次元レイアウトシステムです。 コンテンツを行と列に整理することができ、複雑なレイアウトの作成を簡素化する多くの機能を提供します。この記事では、グリッドレイアウトを始めるに当たって知っておくべきことをすべて説明します。 - + @@ -106,7 +114,7 @@ body { ### fr 単位を使用した柔軟なグリッド -長さとパーセントを使用してグリッドを作成するだけでなく、 `fr` 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナー内の使用可能スペースの割合を表します。 +長さとパーセントを使用してグリッドを作成するだけでなく、 [`fr`](/ja/docs/Web/CSS/flex_value) 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナー内の使用可能な空間の割合を表します。 トラックのリストを次の定義に変更し、 `1fr` のトラックを 3 つ作成します。 @@ -161,14 +169,14 @@ body { {{ EmbedLiveSample('Flexible_grids_with_the_fr_unit', '100%', 200) }} -> **メモ:** `fr` 単位は、*すべて*のスペースではなく、*使用可能*なスペースを分配します。そのため、トラックの中に何か大きなものがある場合、共有できる自由空間は少なくなります。 +> **メモ:** `fr` 単位は、*すべて*の空間ではなく、*使用可能*な空間を分配します。そのため、トラックの中に何か大きなものがある場合、共有できる自由空間は少なくなります。 -### トラック間の間隔 +### トラックの間隔 -トラック間の間隔を作成するには、次のプロパティを使用してください。 +トラックの間隔を作成するには、次のプロパティを使用してください。 -- {{cssxref("column-gap")}} は列間の間隔 -- {{cssxref("row-gap")}} は行間の間隔 +- {{cssxref("column-gap")}} は列の間隔 +- {{cssxref("row-gap")}} は行の間隔 - {{cssxref("gap")}} は両方の一括指定 ```css @@ -214,21 +222,9 @@ body { {{ EmbedLiveSample('Gaps_between_tracks', '100%', 250) }} -> [!NOTE] -> gap` プロパティ（`column-gap`、`row-gap`、`gap`）は、接頭辞として `grid-` を使用していました。仕様は変更されましたが、接頭辞は別名として維持されます。安全な側に立ち、コードをより強固なものにするのであれば、両方のプロパティを追加することができます。 -> -> ```css -> .container { -> display: grid; -> grid-template-columns: 2fr 1fr 1fr; -> grid-gap: 20px; -> gap: 20px; -> } -> ``` - ### トラックリストの繰り返し -反復記法を使用して、トラックリストの全部または一部を繰り返すことができます。 +CSS の `repeat()` 関数を使用して、トラックリストの全部または一部を繰り返すことができます。 トラックリストを次のように変更します。 ```css @@ -362,9 +358,9 @@ body { ## 線に基づいた配置 -これでグリッドの作成からグリッドに配置することに移動します。グリッドには常に線があります。これらは 1 から始まり、文書の[書字方向](/ja/docs/Web/CSS/CSS_writing_modes)に関連しています。例えば、英語（左書き）の場合、列線 1 はグリッドの左端であり、行線 1 はグリッドの上端となり、アラビア語（右書き）の場合、列線 1 は右端になります。 +ここで、グリッドの作成からグリッドへの配置に移ります。グリッドには常に線があります。これらは 1 から始まり、文書の[書字方向](/ja/docs/Web/CSS/CSS_writing_modes)に関連しています。例えば、英語（左書き）の場合、列線 1 はグリッドの左端であり、行線 1 はグリッドの上端となり、アラビア語（右書き）の場合、列線 1 は右端になります。 -これらの線に沿ってアイテムを配置するには、アイテムを配置するグリッド領域の開始線と終了線を指定します。このために使用することができます4つのプロパティがあります。 +これらの線に沿ってアイテムを配置するには、アイテムを配置するグリッド領域の開始線と終了線を指定します。このために使用することができる 4 つのプロパティがあります。 - {{cssxref("grid-column-start")}} - {{cssxref("grid-column-end")}} @@ -478,7 +474,7 @@ aside { ## grid-template-areas での配置 -アイテムをグリッドに配置する別の方法は、{{cssxref("grid-template-areas")}} プロパティを使用して、デザインのさまざまな要素に名前を付けることです。 +アイテムをグリッドに配置する別の方法は、 {{cssxref("grid-template-areas")}} プロパティを使用して、デザインのさまざまな要素に名前を付けることです。 最後の例から線に基づいた配置を削除して（またはファイルを再ダウンロードして新しい出発点にして）、次の CSS を追加します。 @@ -712,7 +708,7 @@ article { 入れ子グリッドのレイアウトを簡単に作業するために、 `grid-template-rows` と `grid-template-columns` プロパティに `subgrid` を使用することができます。これにより、親グリッドで定義したトラックを活用することができます。 次の例では、[線に基づいた配置](#線に基づいた配置)を使用しており、入れ子グリッドを親グリッドの複数の列や行にまたがるようにすることができます。 -`subgrid` を追加し、親グリッドの列を継承しつつ、入れ子グリッド内の行に異なるレイアウトを追加しています。 +`subgrid` を追加し、親グリッドの列を継承しつつ、入れ子グリッド内の行に異なるレイアウトを追加します。 ```css hidden live-sample___subgrid body { @@ -770,13 +766,23 @@ body { {{ EmbedLiveSample('subgrid', '100%', 300) }} -## グリッドフレームワーク +## グリッドシステム コンテンツのレイアウトに役立つ、 12 列または 16 列のグリッドを提供する数多くのグリッドフレームワークが利用できます。 良い知らせは、グリッドベースのレイアウトを作成するのにサードパーティ製のフレームワークはおそらく必要ないということです。グリッド機能はすでに仕様に記載されており、ほとんどの現行ブラウザーで対応しています。 [出発点ファイルをダウンロードしてください](https://github.com/mdn/learning-area/blob/main/css/css-layout/grids/11-grid-system-starting-point.html)。 これには、12 列のグリッドが定義されたコンテナーと、前の 2 つの例で使用したのと同じマークアップが含まれています。 線に基づいた配置を使用して、次のようにコンテンツを 12 列のグリッドに配置できます。 +```css +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: 20px; +} +``` + +これで、行ベースの配置を使用して、 12 列のグリッドにコンテンツを配置することができます。 + ```css header { grid-column: 1 / 13; @@ -810,12 +816,6 @@ body { sans-serif; } -.container { - display: grid; - grid-template-columns: repeat(12, minmax(0, 1fr)); - gap: 20px; -} - header, footer { border-radius: 5px; @@ -867,7 +867,7 @@ aside { ``` -{{ EmbedLiveSample('Grid frameworks in CSS Grid', '100%', 600) }} +{{ EmbedLiveSample('Grid frameworks in CSS grid', '100%', 600) }} [Firefox のグリッドインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)を使用してデザイン上のグリッド線をオーバーレイすると、12 列グリッドがどのように機能するかがわかります。 @@ -875,7 +875,7 @@ aside { ## スキルテスト -この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: グリッド](/ja/docs/Learn/CSS/CSS_layout/Grid_skills) を見てください。 +この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: グリッド](/ja/docs/Learn_web_development/Core/CSS_layout/Grid_skills) を見てください。 ## まとめ @@ -883,10 +883,11 @@ aside { ## 関連情報 -- CSS グリッドレイアウトに関する[ガイドの一覧](/ja/docs/Web/CSS/CSS_grid_layout#ガイド) -- [サブグリッド](/ja/docs/Web/CSS/CSS_grid_layout/Subgrid)ガイド -- [CSS grid inspector: Examine grid layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) (firefox-source-docs) -- [A complete guide to CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/), a visual guide on CSS-Tricks (2023) -- [Grid Garden](https://cssgridgarden.com/), an educational game to learn and better understand the basics of grid on cssgridgarden.com +- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout#ガイド) + - : CSS グリッドレイアウトモジュールのメインページで、多数の追加リソースを格納しています。 +- [A complete guide to CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/)（英語） + - : 視覚的なガイド（CSS-Tricks、2023） +- [Grid Garden](https://cssgridgarden.com/)（英語） + - : グリッドの基本を学び、より理解を深めるための教育用ゲームです。 -{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Flexbox", "Learn_web_development/Core/CSS_layout/Responsive_design", "Learn_web_development/Core/CSS_layout")}} diff --git a/files/ja/learn_web_development/core/css_layout/index.md b/files/ja/learn_web_development/core/css_layout/index.md index 61b7daf48ede6e..921ef97d8f055d 100644 --- a/files/ja/learn_web_development/core/css_layout/index.md +++ b/files/ja/learn_web_development/core/css_layout/index.md @@ -1,63 +1,58 @@ --- -title: CSS レイアウト +title: CSS のレイアウト slug: Learn_web_development/Core/CSS_layout -original_slug: Learn/CSS/CSS_layout l10n: - sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{LearnSidebar}} -現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな `display` の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。 +{{NextMenu("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core")}} -## 前提知識 +前回までのモジュールでは、コンテンツが収まるボックスのスタイルや操作方法について見てきました。 今回は、ボックスを互いに関連づけ、ブラウザーのビューポートに合わせて正しくレイアウトする方法について見ていきます。 このモジュールでは、浮動ボックス、位置指定、その他の最新のレイアウトツール、さまざまな端末、画面サイズ、解像度に適応するレスポンシブデザインの構築について見ていきます。 -このモジュールを始める前に、次のことを理解しているべきです。 +## 前提知識 -1. [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)で説明したように、HTML についての基本的な知識があること。 -2. [CSS 入門](/ja/docs/Learn/CSS/First_steps)で説明したように、CSS の基本を容易にこなせること。 -3. [ボックスの装飾](/ja/docs/Learn/CSS/Building_blocks)の方法を理解していること。 +このモジュールを始める前に、 [HTML](/ja/docs/Learn_web_development/Core/Structuring_content)、[CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)、[CSS によるテキストのスタイル設定](/ja/docs/Learn_web_development/Core/Text_styling)を理解しておいてください。 > [!NOTE] > 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、[JSBin](https://jsbin.com/) や [Glitch](https://glitch.com/) などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。 -## ガイド - -これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。 +## チュートリアルと課題 -- [CSS レイアウト入門](/ja/docs/Learn/CSS/CSS_layout/Introduction) +- [CSS レイアウト入門](/ja/docs/Learn_web_development/Core/CSS_layout/Introduction) - : この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。 -- [通常フロー](/ja/docs/Learn/CSS/CSS_layout/Normal_Flow) - - : ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。 -- [フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox) - - : [フレックスボックス](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)は、アイテムを行または列にレイアウトするための 1 次元のレイアウト方式です。アイテムは余った空間を埋めるために伸ばされたり、小さな空間に収まるために縮んだりします。この記事では、基本的なことをすべて説明しています。このガイドを学習した後は、[フレックスボックスのスキルをテスト](/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills)して、理解度を確認してから次のステップに進むことができます。 -- [グリッド](/ja/docs/Learn/CSS/CSS_layout/Grids) - - : CSS グリッドレイアウトは、ウェブ用の 2 次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前に[グリッドのスキルをテスト](/ja/docs/Learn/CSS/CSS_layout/Grid_skills)しましょう。 -- [浮動ブロック](/ja/docs/Learn/CSS/CSS_layout/Floats) +- [浮動ボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Floats) - : 元々は、テキストブロック内の画像を浮動させるためのものだった {{cssxref("float")}} プロパティは、ウェブページで複数の列のレイアウトを作成するために最もよく使用されるツールの 1 つになりました。フレックスボックスとグリッドの出現により、この記事で説明するように、これで元の目的に戻っています。 -- [位置指定](/ja/docs/Learn/CSS/CSS_layout/Positioning) +- [位置指定](/ja/docs/Learn_web_development/Core/CSS_layout/Positioning) - : 位置指定を使用すると、文書の通常のレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。 -- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) - - : 段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。 -- [レスポンシブデザイン](/ja/docs/Learn/CSS/CSS_layout/Responsive_Design) - - : ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。 -- [メディアクエリーの初心者向けガイド](/ja/docs/Learn/CSS/CSS_layout/Media_queries) - - : **CSS メディアクエリー**は、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。 -- [過去のレイアウト方法](/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) - - : グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、**CSS グリッドレイアウト**以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（4 や 6 や 12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。 -- [古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) - - : このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。 +- [フレックスボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox) + - : [フレックスボックス](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox)は、アイテムを行または列にレイアウトするための 1 次元のレイアウト方式です。アイテムは余った空間を埋めるために伸ばされたり、小さな空間に収まるために縮んだりします。この記事では、基本的なことをすべて説明しています。 +- [CSS グリッドレイアウト](/ja/docs/Learn_web_development/Core/CSS_layout/Grids) + - : CSS グリッドレイアウトは、ウェブ用の 2 次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。この記事では、グリッドレイアウトを始めるために必要なすべてを説明します。 +- [レスポンシブデザイン](/ja/docs/Learn_web_development/Core/CSS_layout/Responsive_Design) + - : ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。ウェブページのレイアウトや外観を、さまざまな画面幅や解像度などに合わせて変更できるようにする一連の実践方法です。これは、多数の端末に対応するウェブのデザイン方法を大きく変える考え方であり、この記事では、この概念を習得するために知っておくべき主なテクニックについてご説明します。 +- [メディアクエリーの初心者向けガイド](/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries) + - : **CSS メディアクエリー**は、ブラウザーや端末の環境が、指定したルールに合致した場合にのみ CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっています。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。 +- [基礎的なレイアウトの理解](/ja/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension) + - : ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。 -## 評価試験 +## 追加のチュートリアル -以下の評価試験では、上記のガイドに応じた CSS レイアウトメソッドの理解度をテストします。 +以下のチュートリアルは学習コースの一部ではありませんが、興味深い内容です。メインのコア記事をすべて読み終えた後にオプションとして学習する、上級者向けの目標として考えてみてください。 -- [基礎的なレイアウトの理解](/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) - - : ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。 +- [段組みレイアウト](/ja/docs/Learn_web_development/Core/CSS_layout/Multiple-column_Layout) + - : 段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。 +- [過去のレイアウト方法](/ja/docs/Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods) + - : グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、**CSS グリッドレイアウト**以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（4 や 6 や 12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。 +- [古いブラウザーの対応](/ja/docs/Learn_web_development/Core/CSS_layout/Supporting_Older_Browsers) + - : このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。 ## 関連情報 -- [実用的な位置指定の例](/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples) +- [実用的な位置指定の例](/ja/docs/Learn_web_development/Core/CSS_layout/Practical_positioning_examples) - : この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。 - [CSS レイアウト料理帳](/ja/docs/Web/CSS/Layout_cookbook) - : CSSレイアウトの料理帳は、一般的なレイアウトパターンのレシピをまとめることを目的としています。自分のプロジェクトの出発点として使用することができるコードを提供するだけでなく、これらのレシピは、レイアウト仕様を使用するさまざまな方法と、開発者として行うことができる選択を強調します。 + +{{NextMenu("Learn_web_development/Core/CSS_layout/Introduction", "Learn_web_development/Core")}} diff --git a/files/ja/learn_web_development/core/css_layout/legacy_layout_methods/index.md b/files/ja/learn_web_development/core/css_layout/legacy_layout_methods/index.md index 864f80d4f0a83c..f53b638356d537 100644 --- a/files/ja/learn_web_development/core/css_layout/legacy_layout_methods/index.md +++ b/files/ja/learn_web_development/core/css_layout/legacy_layout_methods/index.md @@ -1,27 +1,23 @@ --- -title: 過去のレイアウト方法 +title: 古いレイアウト方法 slug: Learn_web_development/Core/CSS_layout/Legacy_Layout_Methods -original_slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods l10n: - sourceCommit: 860fb7609ef4cdba027840cc05f6dafc4dcbc19e + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- {{LearnSidebar}} -{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} - -グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ブロックや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。 +グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動ボックスや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（例えば 4、6、12）として想像し、そしてコンテンツの列をこれらの想像上の列の中に合わせてみてください。この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。
前提知識: - HTML の基礎（HTML 入門で学習）、 CSS の動作の考え方（ - CSS 入門、 - ボックスのスタイル設定で学習） + HTML によるコンテンツの構造化、 + CSS によるスタイル設定の基本、 + 基本的なテキストとフォントのスタイル設定、 + CSS レイアウトの基本概念の基礎知識。
目的:学習成果: - グリッドレイアウトシステムの背後にある基本概念と、CSS グリッドを使用してグリッドレイアウトを実装する方法を理解すること。 +
    +
  • CSS グリッドの目的を理解すること。一連のブロック要素やインライン要素を、 2 次元で柔軟にレイアウトします。
    • +
  • グリッドの用語を理解すること。行、列、間隔、溝。
    • +
  • 既定で display: grid が何をもたらすかを理解すること。
    • +
  • グリッド行、列、間隔の定義。
    • +
  • グリッドでの要素の配置。
    • +
@@ -35,24 +31,24 @@ l10n: ## CSS グリッドレイアウト以前のレイアウトとグリッドシステム -CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。 そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。 今これらを「過去の」方法と呼んでいます。 +CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。 そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。 今これらを「古い」方法と呼んでいます。 -新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の 1 つ以上の最新のレイアウト方法と組み合わせて使用して、任意のレイアウトの基礎とします。 しかし、時々、これらの過去の方法を使用している「グリッドシステム」に遭遇するでしょう。 それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。 +新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の 1 つ以上の最新のレイアウト方法と組み合わせて使用して、任意のレイアウトの基礎とします。 しかし、時々、これらの古い方法を使用している「グリッドシステム」に遭遇するでしょう。 それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。 -このレッスンでは、浮動ブロックとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。 グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう。この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。 +このレッスンでは、浮動ボックスとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。 グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう。この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。 これらのシステムを検討する際には、それらのどれも実際には CSS グリッドレイアウトがグリッドを作成する方法でグリッドを作成しないことに、留意する価値があります。 それらは項目にサイズを与え、グリッドのように*見える*ように一列に並べることによって機能します。 -## 2 列レイアウト +## 2 段組みレイアウト -最も簡単な例として、2 列のレイアウトから始めましょう。 コンピューター上に新しい `index.html` ファイルを作成し、それを[単純な HTML テンプレート](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html)で埋め、適切な場所に以下のコードを挿入することで、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。 +最も簡単な例として、2 段組みのレイアウトから始めましょう。 コンピューター上に新しい `index.html` ファイルを作成し、それを[単純な HTML テンプレート](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html)で埋め、適切な場所に以下のコードを挿入することで、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。 まず最初に、列に入れるためにいくつかのコンテンツが必要です。 次のもので `body` の中に現在あるものはすべて置き換えます。 ```html -

2 column layout example

+

2 段組みレイアウトの例

-

First column

+

1 段目

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, @@ -68,7 +64,7 @@ CSS がごく最近まで内蔵されたグリッドシステムを持ってい

-

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) { ![CSS グリッドで 16 個のグリッドアイテムが 12 列と 2 行にまたがる様子。一番上の行には、 12 列の同じ幅のグリッドアイテムがあります。 2 つ目には、異なるサイズのグリッドアイテムがあります。項目 13 は 1 列、項目 14 は 6 列、項目 15 は 3 列、項目 16 は 2 列にわたります。](simple-grid-finished.png) -{{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 の構成要素で学習） + CSS によるスタイル設定の基本で学習）
- + @@ -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)では、これらのブレークポイントがどこに行くべきかを判断するのにとても便利です。 メディアクエリーを追加してデザインを微調整しながら、ビューポートを小さくしたり大きくしたりして、コンテンツが改善される場所を簡単に確認できます。 -![Firefox 開発ツールのモバイルビューのレイアウトのスクリーンショット。](rwd-mode.png) +![Firefox 開発者ツールのモバイルビューのレイアウトのスクリーンショット。](rwd-mode.png) ## アクティブラーニング: モバイルファーストレスポンシブデザイン @@ -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. +

+
+ +
+ +
+ +
+

© 2024

+
+
+``` -```css +文書のソースは、コンテンツが読みやすいように並べられています。 これは重要な最初のステップであり、コンテンツがスクリーンリーダーで読み上げられる場合に理解できるようにするものです。 +以下は、始めるのに良い初期スタイルです。 + +```css live-sample___walkthrough * { box-sizing: border-box; } @@ -291,54 +449,13 @@ article { } ``` -レイアウトの変更は行っていませんが、文書のソースはコンテンツが読みやすいように並べられています。 これは重要な最初のステップであり、コンテンツがスクリーンリーダーで読み上げられる場合に理解できるようにするものです。 - -```html - -
-
- -
-
-
-
-

Veggies!

-

…

-
- -
- - -
- -

©2019

-
- -``` - -この単純なレイアウトはモバイルでもうまく機能します。 開発ツールのレスポンシブデザインモードでレイアウトを眺めると、サイトのモバイルビューそのものと同じように機能することがわかります。 - -ブラウザーで[ステップ 1 を開く](https://mdn.github.io/css-examples/learn/media-queries/step1.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/step1.html)します。 +開発ツールのレスポンシブデザインモードでレイアウトを見ると、サイトのモバイルビューそのものと同じように機能することがわかります。 -**この例をフォローして実装してみたい場合は、コンピューターに [step1.html](https://github.com/mdn/css-examples/blob/main/learn/media-queries/step1.html) のローカルコピーを作成してください。** +{{EmbedLiveSample("walkthrough", "", "600px")}} このポイントから、行の長さが非常に長くなり、ナビゲーションのためのスペースが水平線で表示されるまで、レスポンシブデザインモードのビューのドラッグを始めます。 これが、最初のメディアクエリーを追加する場所です。 `em` を使用すると、ユーザーがテキストのサイズを大きくした場合、テキストのサイズが小さいユーザーよりも、同様の行長で広いビューポートでブレークポイントが発生します。 -**step1.html の CSS の下部に以下のコードを追加してください。** +次のものを CSS に追加してください。 ```css @media screen and (min-width: 40em) { @@ -360,11 +477,9 @@ article { この CSS は、記事 (`article`) 内の 2 列のレイアウトで、記事のコンテンツ (`content`) および余談 (`aside`) 要素の関連 (`related`) 情報を提供します。 また、フレックスボックスを使用してナビゲーション (`nav`) を 1 行に配置します。 -ブラウザーで[ステップ 2 を開く](https://mdn.github.io/css-examples/learn/media-queries/step2.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/step2.html)します。 - サイドバー (`sidebar`) が新しい列を形成するのに十分なスペースがあると感じるまで、幅を拡張し続けます。 メディアクエリー内で、主要な (`main`) 要素を 2 列のグリッドにします。 次に、2 つのサイドバーが互いに揃うように `article` の {{cssxref("margin-bottom")}} を削除する必要があります。 フッター (`footer`) の上部に {{cssxref("border")}} を追加します。 通常、これらの小さな調整は、各ブレークポイントでデザインをきれいに見せるために行うことです。 -**再び、step1.html の CSS の下部に以下のコードを追加してください。** +スタイルに以下の CSS を追加してください。 ```css @media screen and (min-width: 70em) { @@ -385,8 +500,6 @@ article { } ``` -ブラウザーで[ステップ 3 を開く](https://mdn.github.io/css-examples/learn/media-queries/step3.html)か、[ソースを表示](https://github.com/mdn/css-examples/blob/main/learn/media-queries/step3.html)します。 - さまざまな幅で最後の例を見ると、デザインがどのように反応し、利用可能な幅に応じて 1 列、2 列、または 3 列として機能するかを確認できます。 これは、モバイルファーストレスポンシブデザインの非常に単純な例です。 ## viewport meta タグ @@ -411,7 +524,7 @@ article { これは、次を使用して実現できます。 -```html +```html live-sample___grid ``` -```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. +

+
+``` + +```css live-sample___multicol1 +body { + font: 1.2em / 1.5 sans-serif; +} +.container { +} +``` + +{{EmbedLiveSample("multicol1", "", "300px")}} + +
+ここをクリックすると、解決策を表示します。 + +この課題を達成するには、`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. +

+
+``` + +```css live-sample___multicol2 +body { + font: 1.2em / 1.5 sans-serif; +} +.container { +} +``` + +{{EmbedLiveSample("multicol2", "", "300px")}} + +
+ここをクリックすると、解決策を表示します。 + +`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. +

+
+``` + +```css hidden live-sample___multicol3 +body { + font: 1.2em / 1.5 sans-serif; +} +* { + box-sizing: border-box; +} + +.box { + text-align: center; + margin: 1em 0; +} + +.box h2 { + margin: 0; + display: grid; + grid-template-columns: 1fr auto 1fr; + column-gap: 0.5em; + align-items: center; +} + +.box h2::before { + content: ""; + border-bottom: 5px dotted #ccc; +} + +.box h2::after { + content: ""; + border-bottom: 5px dotted #ccc; +} + +.subhead { + font-style: italic; +} +``` + +```css live-sample___multicol3 +.container { + column-count: 3; +} + +.box { +} + +h2 { +} +``` + +{{EmbedLiveSample("multicol3", "", "400px")}} + +
+ここをクリックすると、解決策を表示します。 + +この課題では、`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: @@ -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: ![緑色のボックスが灰色の枠で囲まれたコンテナーの右上にあります。](position-task1.png) -下記のライブコードを更新して、完成例を再現してみてください。 - -{{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 +
+
+

+ This is the sidebar. It should remain in position as the content scrolls. +

+
+
+

+ 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 入門、 - CSS の構成要素で学習） + HTML によるコンテンツの構造化、 + CSS によるスタイル設定の基本、 + 基本的なテキストとフォントのスタイル設定、 + CSS レイアウトの基本概念の基礎知識。
目的:学習成果: - メディアクエリーの使用方法、およびそれらを使用してレスポンシブデザインを作成するための最も一般的なアプローチを理解する。 +
    +
  • メディアクエリーの構文。
    • +
  • メディアクエリーのよくある種別。
    • +
  • width や height メディアクエリーを使用した、レスポンシブなレイアウトの作成。
    • +
  • ブレークポイントの選択。
    • +
  • メディアクエリーを使用したモバイルファーストデザインの実装。
    • +
前提知識: - HTML の基本（HTML 入門で学ぶ）、および CSS の機能の考え方（CSS 入門で学ぶ）。 + HTML の基本（HTML によるコンテンツの構造化で学ぶ）、および CSS の機能の考え方（CSS によるスタイル設定の基本で学ぶ）。
前提知識: - 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: - snippet of cloth + このインライン要素やこのインライン要素は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。 + インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます。そうでない場合は、この画像のように、新しい行にそのまま続きます。 + 布切れ

``` -```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: - snippet of cloth + このインライン要素やこのインライン要素は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。 + インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます。そうでない場合は、この画像のように、新しい行にそのまま続きます。 + 布切れ

``` @@ -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: - snippet of cloth + このインライン要素やこのインライン要素は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。 + インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます。そうでない場合は、この画像のように、新しい行にそのまま続きます。 + 布切れ

``` @@ -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: - snippet of cloth + このインライン要素やこのインライン要素は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。 + インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます。そうでない場合は、この画像のように、新しい行にそのまま続きます。 + 布切れ

``` @@ -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: - snippet of cloth + このインライン要素やこのインライン要素は、同じ行に空間がある場合、隣接するテキストノードとともに同じ行に配置されます。 + インライン要素がオーバーフローすると、可能な場合は（テキストを含むこの要素のように）新しい行に折り返されます。そうでない場合は、この画像のように、新しい行にそのまま続きます。 + 布切れ

``` @@ -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
- +
+ + + + +
+
-
+

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!

-
  1. dui neque eleifend lorem, a auctor libero turpis at sem.
  2. Aliquam ut porttitor urna.
    3. @@ -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 - - -