diff --git a/files/ja/learn_web_development/core/css_layout/grid_skills/index.md b/files/ja/learn_web_development/core/css_layout/grid_skills/index.md index 9f38d41788cd00..4a9f301b7a6860 100644 --- a/files/ja/learn_web_development/core/css_layout/grid_skills/index.md +++ b/files/ja/learn_web_development/core/css_layout/grid_skills/index.md @@ -1,18 +1,17 @@ --- title: "スキルテスト: グリッド" slug: Learn_web_development/Core/CSS_layout/Grid_skills -original_slug: Learn/CSS/CSS_layout/Grid_skills l10n: - sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7 + sourceCommit: a92e10b293358bc796c43d5872a8981fd988a005 --- {{LearnSidebar}} -このスキルテストの目的は、[グリッドとグリッドアイテム](/ja/docs/Learn/CSS/CSS_layout/Grids)の動作を理解しているかどうかを評価することです。今までに使用した素材のさまざまな要素を使用する、いくつかの小さな課題に取り組んでいただきます。 +このスキルテストの目的は、[グリッドとグリッドアイテム](/ja/docs/Learn_web_development/Core/CSS_layout/Grids)の動作を理解しているかどうかを評価することです。今までに使用した素材のさまざまな要素を使用する、いくつかの小さな課題に取り組んでいただきます。 > [!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,49 @@ l10n: 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}} +```html live-sample___grid1 +
+
One
+
Two
+
Three
+
Four
+
+``` -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid1-download.html)しましょう。 +```css hidden live-sample___grid1 +body { + font: 1.2em / 1.5 sans-serif; +} +.grid > * { + background-color: #4d7298; + border: 2px solid #77a6b6; + border-radius: 0.5em; + color: #fff; + padding: 0.5em; +} +``` + +```css live-sample___grid1 +.grid { +} +``` + +{{EmbedLiveSample("grid1", "", "200px")}} + +
+ここをクリックすると、解決策を表示します。 + +`display: grid` を使用してグリッドを作成し、 `grid-template-columns` で 3 つの列を使用し、アイテム間に `gap` を設定します。 + +```css +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 20px; +} +``` + +
## 課題 2 @@ -37,31 +74,165 @@ l10n: ![内部に 2 つのアイテムがあり、一方がもう一方に重なっているボックス。](grid-task2.png) +**ボーナス課題:** これで、ソースの項目の順番を変えずに、最初の項目が一番上に表示されるようにすることができますか？ + 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 900)}} +```html live-sample___grid2 +
+
One
+
Two
+
+``` + +```css hidden live-sample___grid2 +body { + font: 1.2em / 1.5 sans-serif; +} +.grid > * { + border-radius: 0.5em; + color: #fff; + padding: 0.5em; +} + +.item1 { + background-color: rgb(74 102 112 / 70%); + border: 5px solid rgb(74 102 112 / 100%); +} + +.item2 { + background-color: rgb(214 162 173 / 70%); + border: 5px solid rgb(214 162 173 / 100%); +} +``` + +```css live-sample___grid2 +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 100px 100px 100px; + gap: 10px; +} -追加課題: +.item1 { +} -- これで、ソースの項目の順番を変えずに、最初の項目が一番上に表示されるようにすることができますか？ +.item2 { +} +``` -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid2-download.html)しましょう。 +{{EmbedLiveSample("grid2", "", "340px")}} + +
+ここをクリックすると、解決策を表示します。 + +アイテムを同じグリッドセルを占めるように重ねることは可能です。 +選択肢の一つとして、下記のような一括指定を使用することもできますが、例えば `grid-row-start` のような個別指定を使用するのが正しいでしょう。 + +```css +.item1 { + grid-column: 1 / 4; + grid-row: 1 / 3; +} + +.item2 { + grid-column: 2 / 5; + grid-row: 2 / 4; +} +``` + +ボーナス問題では、これを達成する一つの方法として、フレックスボックスのチュートリアルで用いた `order` を使用する方法があります。 + +```css +.item1 { + order: 1; +} +``` + +他の有効な解決策としては、 `z-index` を使う方法があります。 + +```css +.item1 { + z-index: 1; +} +``` + +
## 課題 3 -この課題では、このグリッドに 4 つの直接の子供があります。この点では、自動配置を使用して表示されています。 grid-area プロパティと grid-template-areas プロパティを使用して、下記の通りアイテムを表示させましょう。 +この課題では、このグリッドに 4 つの直接の子があります。この点では、自動配置を使用して表示されています。 grid-area プロパティと grid-template-areas プロパティを使用して、下記の通りアイテムを表示させましょう。 -![Four items displayed in a grid.](grid-task3.png) +![グリッド内に表示されている 4 つのアイテム。](grid-task3.png) 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}} +```html live-sample___grid3 +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css hidden live-sample___grid3 +body { + font: 1.2em / 1.5 sans-serif; +} +.grid > * { + background-color: #4d7298; + border: 2px solid #77a6b6; + border-radius: 0.5em; + color: #fff; + padding: 0.5em; +} +``` + +```css live-sample___grid3 +.grid { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 10px; +} +``` -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid3-download.html)しましょう。 +{{EmbedLiveSample("grid3", "", "200px")}} + +
+ここをクリックすると、解決策を表示します。 + +レイアウトの各部分には、 `grid-area` プロパティと `grid-template-areas` を使用して名前を付ける必要があります。 混乱が生じる可能性があるのは、セルを空欄にする際に `.` を置く必要があることや、複数のトラックにまたがる要素を発生させるには名前を繰り返す必要があることを理解していない場合です。 + +```css +.grid { + display: grid; + gap: 20px; + grid-template-columns: 1fr 2fr; + grid-template-areas: + "aa aa" + "bb cc" + ". dd"; +} + +.one { + grid-area: aa; +} + +.two { + grid-area: bb; +} + +.three { + grid-area: cc; +} + +.four { + grid-area: dd; +} +``` + +
## 課題 4 @@ -71,8 +242,122 @@ l10n: 以下のライブコードを更新して、完成例を再現してみてください。 -{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 2000)}} +```html live-sample___grid4 +
+
+ a single red balloon + +
+
+ balloons over some houses + +
+
+ close-up of balloons inflating + +
+
+ a balloon in the sun + +
+
+``` + +```css hidden live-sample___grid4 +body { + font: 1.2em / 1.5 sans-serif; +} +.card { + display: grid; + grid-template-rows: 200px min-content; +} + +.card > img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.tags { + margin: 0; + padding: 0; + list-style: none; +} + +.tags > * { + background-color: #999; + color: #fff; + padding: 0.2em 0.8em; + border-radius: 0.2em; + font-size: 80%; + margin: 5px; +} +``` + +```css live-sample___grid4 +.container { +} + +.tags { +} +``` + +{{EmbedLiveSample("grid4", "", "400px")}} + +
+ここをクリックすると、解決策を表示します。 + +2 次元の行と列に配置するので、コンテナーはグリッドレイアウトにする必要があります。 +この `
+ +## 関連情報 -> [!CALLOUT] -> -> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/grid/grid4-download.html)しましょう。 +- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics) diff --git a/files/ja/learn_web_development/core/css_layout/responsive_design/index.md b/files/ja/learn_web_development/core/css_layout/responsive_design/index.md index 47c663fd7c54d1..6fcb9e066ee6d7 100644 --- a/files/ja/learn_web_development/core/css_layout/responsive_design/index.md +++ b/files/ja/learn_web_development/core/css_layout/responsive_design/index.md @@ -1,12 +1,13 @@ --- title: レスポンシブデザイン slug: Learn_web_development/Core/CSS_layout/Responsive_Design -original_slug: Learn/CSS/CSS_layout/Responsive_Design l10n: - sourceCommit: 4d4e7617f5d573bbf8f51333b959c73b10262d52 + sourceCommit: a92e10b293358bc796c43d5872a8981fd988a005 --- -{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}} +{{learnsidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout/Media_queries", "Learn_web_development/Core/CSS_layout")}} _レスポンシブウェブデザイン_ (RWD) は、ユーザビリティを確保しながら、すべての画面サイズと解像度でウェブページをうまく描画するためのウェブデザインの手法です。複数の端末に対応したウェブをデザインする方法です。この記事では、それを使いこなすために使用できるいくつかのテクニックを理解することをお手伝いします。 @@ -15,17 +16,23 @@ _レスポンシブウェブデザイン_ (RWD) は、ユーザビリティを 前提知識: - HTML の基本（ - HTML 入門を学習してください）、および CSS の動作の概念（CSS の第一歩とCSS の構成要素を学習してください） + HTML によるコンテンツの構造化、 + CSS によるスタイル設定の基本、 + 基本的なテキストとフォントのスタイル設定、 + CSS レイアウトの基本概念の基礎知識。 - 目的: + 学習成果: - レスポンシブデザインを実装するために用いる基本的な目的と CSS 機能を理解すること。 + @@ -57,7 +64,7 @@ HTML は基本的にレスポンシブ、つまり流動的です。CSS を含 レスポンシブウェブデザインは単体の技術ではなく、手法のひとつです。これは、コンテンツを表示するために使用するあらゆる端末に応じることができるレイアウトを作成するために使用される、ベストプラクティス群を表すために使用される用語です。 -レスポンシブデザインという用語は、[2010 年に Ethan Marcotte によって初めて作られ](https://alistapart.com/article/responsive-web-design/)、流動的グリッド、流動的画像、メディアクエリーを使用してレスポンシブなコンテンツを作成することを説明するものであり、 Zoe Mickley Gillenwater の書籍 [Flexible Web Design](http://flexiblewebbook.com/) で説明されています。 +レスポンシブデザインという用語は、[2010 年に Ethan Marcotte によって作られ](https://alistapart.com/article/responsive-web-design/)、流動的グリッド、流動的画像、メディアクエリーを使用してレスポンシブなコンテンツを作成することを説明するものです。 当時は、レイアウトに CSS の `float` を使用し、メディアクエリーでブラウザーの幅を問い合わせ、様々なブレークポイントに対応したレイアウトを作成することが推奨されていました。流動的画像はコンテナーの幅を超えないように設定します。これらの画像は `max-width` プロパティを `100%` に設定しなければなりません。流動的画像は、その段組みが狭くなると縮小しますが、列が大きくなっても内在サイズより大きくなることはありません。これにより、画像はコンテンツをはみ出すことなく、そのコンテンツに合わせて拡大縮小することができ、コンテナーが画像よりも広くなっても、大きくなってピクセル化することはありません。 @@ -83,64 +90,98 @@ HTML は基本的にレスポンシブ、つまり流動的です。CSS を含 メディアクエリーを使用する場合の一般的なアプローチは、狭い画面の端末（携帯電話など）用に単純な単一列レイアウトを作成し、次に、より大きな画面であるかチェックして複数列レイアウトを処理するのに十分な画面幅があることがわかったら、複数列レイアウトを実装することです。これは多くの場合、**モバイルファースト**デザインと呼ばれます。 -ブレークポイントを使用する場合、ベストプラクティスとして、個々の端末の絶対サイズではなく、[相対的な単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#相対長の単位)でメディアクエリーのブレークポイントを定義することを推奨します。 +ブレークポイントを使用する場合、ベストプラクティスとして、個々の端末の絶対サイズではなく、[相対的な単位](/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units#相対長の単位)でメディアクエリーのブレークポイントを定義することを推奨します。 メディアクエリーブロック内で定義するスタイルにはさまざまなアプローチがあります。ブラウザーのサイズの範囲に基づいてスタイルシートの {{htmlelement("link")}} にメディアクエリーを使用するものから、カスタムプロパティ変数に、それぞれのブレークポイントに関連する値を格納するだけのものまであります。 -詳しくは MDN ドキュメント内の[メディアクエリー](/ja/docs/Web/CSS/CSS_media_queries)を探してください。 - -メディアクエリーは RWD に役立ちますが、必須ではありません。柔軟なグリッド、相対的な単位、最小・最大の単位の値はクエリーなしで使用することができます。 +メディアクエリーは RWD で役立ちますが、必須のものではありません。柔軟なグリッド、相対的な単位、最小・最大の単位の値は、メディアクエリーを使用せずに使用することができます。 ## レスポンシブレイアウト技術 -レスポンシブサイトは柔軟なグリッド上に構築されているため、全ての使用可能な端末サイズをピクセルパーフェクトなレイアウトで対象とする必要はありません。 +レスポンシブサイトは柔軟なグリッド上に構築されているため、ピクセル単位で正確なレイアウトで可能な限りの端末サイズをすべて対象とする必要はありません。 柔軟なグリッドを使用することで、特性を変更したりブレークポイントを追加して、コンテンツの見てくれが悪くなり始めた時点でデザインを変更することができます。例えば、画面サイズが大きくなっても行の長さが読めないほど長くならないようにするには、{{cssxref('columns')}} を使用することができます。ボックスが狭くなって行あたりに 2 つしか単語が表示されなくなったら、ブレークポイントを設定します。 -[段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)、[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)、[グリッド](/ja/docs/Learn/CSS/CSS_layout/Grids)などの複数のレイアウト方法は、既定でレスポンシブです。これらはすべて、柔軟なグリッドを作成しようとしていることを想定しており、そのための簡単な方法を提供しています。 +[フレックスボックス](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox)や [CSS グリッド](/ja/docs/Learn_web_development/Core/CSS_layout/Grids)などの複数のレイアウト方式は、既定でレスポンシブです。これらはすべて、柔軟なグリッドを作成しようとしていることを想定しており、そのための簡単な方法を提供しています。 + +### フレックスボックス -### 段組み +フレックスボックス (Flexbox) では、フレックスアイテムは縮小したり拡大したりして、コンテナーの空間に応じてアイテム間の空間を分配します。`flex-grow` と `flex-shrink` の値を変更することで、アイテムの周りの空間が広くなったり狭くなったりしたときにどのように動作させたいかを示すことができます。 -これらのレイアウトメソッドの中で最も古いものは段組み (multicol) です。`column-count` の指定で、コンテンツを分割する列の数を指定します。 ブラウザーはこれらのサイズを計算し、サイズが画面サイズに応じて変化します。 +次の例では、`flex: 1` という一括指定を使用して、フレックスアイテムがフレックスコンテナー内でそれぞれ同じ空間の大きさにしています。レイアウトのトピック「[フレックスボックス: フレックスアイテムの柔軟なサイズ変更](/ja/docs/Learn_web_development/Core/CSS_layout/Flexbox#フレックスアイテムの柔軟なサイズ変更)」で記述されている通りです。 ```css .container { - column-count: 3; + display: flex; } -``` - -代わりに `column-width` を指定すると、*最小*幅を指定します。ブラウザーは、その幅の列をコンテナーに収まるだけ作成し、すべての列に残りの空間を分配します。 したがって、列の数は、どのくらいの空間があるかに応じて変化します。 -```css -.container { - column-width: 10em; +.item { + flex: 1; } ``` -{{cssxref('columns')}} の一括指定を用いると、段組みの最大数と最小の段組み幅を指定することができます。これにより、画面サイズが大きくなっても行の長さが読めないほど長くなったり、画面サイズが小さくなっても行の長さが狭すぎたりしないように保証することができます。 +レスポンシブデザインでメディアクエリーとフレックスボックスを使用する方法を紹介します。 + +```html-nolint live-sample___flex-based-rwd +
+
+

+ このレイアウトはレスポンシブです。ブラウザーウィンドウの幅を広げたり狭めたりしたら何が起こるかを確認してください。 +

+
+
+

+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。 +

+

+ その夜（後に証明されるように、記憶に残る夜）の何百万人もの人々は、発行される煙の輪を眺めていましたが、その事実から何か特別なインスピレーションを何も感じていませんでした。 +

+
+
+``` -### フレックスボックス +```css hidden live-sample___flex-based-rwd +body { + font: 1.2em / 1.5 sans-serif; + margin: 20px; + padding: 0; + background-color: #eee; +} +.wrapper { + max-width: 960px; + margin: 2em auto; +} -フレックスボックス (Flexbox) では、フレックスアイテムは縮小したり拡大したりして、コンテナーの空間に応じてアイテム間の空間を分配します。`flex-grow` と `flex-shrink` の値を変更することで、アイテムの周りの空間が広くなったり狭くなったりしたときにどのように動作させたいかを示すことができます。 +.col1, +.col2 { + background-color: #fff; +} +``` -次の例では、`flex: 1` という一括指定を使用して、フレックスアイテムがフレックスコンテナー内でそれぞれ同じ空間の大きさにしています。レイアウトのトピック「[フレックスボックス: フレックスアイテムの柔軟なサイズ変更](/ja/docs/Learn/CSS/CSS_layout/Flexbox#フレックスアイテムの柔軟なサイズ変更)」で記述されている通りです。 +```css live-sample___flex-based-rwd +@media screen and (min-width: 600px) { + .wrapper { + display: flex; + } -```css -.container { - display: flex; -} + .col1 { + flex: 1; + margin-right: 5%; + } -.item { - flex: 1; + .col2 { + flex: 2; + } } ``` -> [!NOTE] -> 例として、フレックスボックスを使用して上記の単純なレスポンシブレイアウトを構築しました。ブレークポイントを使用して画面が大きくなったときに段組みに切り替え、{{cssxref('max-width')}} で本文コンテンツのサイズを制限しています。[例](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/flex-based-rwd.html)。 +{{EmbedLiveSample("flex-based-rwd", "", "550px")}} + +画面のサイズを変更してみてください。上記の例のサイズが 600px 幅の閾値を超えるとレイアウトが変更されます。 ### CSS グリッド -CSS グリッドレイアウトでは、`fr` 単位を使用して、利用可能な空間をそれぞれのグリッドトラックに分配することができます。次の例では、サイズが `1fr` の 3 つのトラックを持つグリッドコンテナーを作成します。これにより、3 つの列トラックが作成され、それぞれがコンテナー内の使用可能な空間の一部を占めます。 グリッドを作成するこのアプローチの詳細については、CSS レイアウトのグリッドのトピックの [fr 単位での柔軟なグリッド](/ja/docs/Learn/CSS/CSS_layout/Grids#fr_単位での柔軟なグリッド)を参照してください。 +CSS グリッドレイアウトでは、`fr` 単位を使用して、利用可能な空間をそれぞれのグリッドトラックに分配することができます。次の例では、サイズが `1fr` の 3 つのトラックを持つグリッドコンテナーを作成します。これにより、3 つの列トラックが作成され、それぞれがコンテナー内の使用可能な空間の一部を占めます。 グリッドを作成するこのアプローチの詳細については、CSS レイアウトのグリッドのトピックの [fr 単位での柔軟なグリッド](/ja/docs/Learn_web_development/Core/CSS_layout/Grids#fr_単位での柔軟なグリッド)を参照してください。 ```css .container { @@ -149,11 +190,59 @@ CSS グリッドレイアウトでは、`fr` 単位を使用して、利用可 } ``` -> **メモ:** `.wrapper` に列を定義することができるため、グリッドレイアウトのバージョンはさらに単純です。[例](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/grid-based-rwd.html)。 +Here's how we could use grid layout with a media query for responsive design. + +```html-nolint live-sample___grid-based-rwd +
+
+

+ このレイアウトはレスポンシブです。ブラウザーウィンドウの幅を広げたり狭めたりしたら何が起こるかを確認してください。 +

+
+
+

+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。 +

+

+ その夜（後に証明されるように、記憶に残る夜）の何百万人もの人々は、発行される煙の輪を眺めていましたが、その事実から何か特別なインスピレーションを何も感じていませんでした。 +

+
+
+``` + +```css hidden live-sample___grid-based-rwd +body { + font: 1.2em / 1.5 sans-serif; + margin: 20px; + padding: 0; + background-color: #eee; +} +.wrapper { + max-width: 960px; + margin: 2em auto; +} + +.col1, +.col2 { + background-color: #fff; +} +``` + +```css live-sample___grid-based-rwd +@media screen and (min-width: 600px) { + .wrapper { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 5%; + } +} +``` + +{{EmbedLiveSample("grid-based-rwd", "", "550px")}} ## レスポンシブ画像とメディア -メディアがそのコンテナーより大きくならないことを保証するには、次のようにすることができます。 +メディアがそのコンテナーより大きくならないことを保証するには、次の方法が利用できます。 ```css img, @@ -163,15 +252,10 @@ video { } ``` -これは、メディアがコンテナーからあふれないように確実に拡大縮小します。単一の大きな画像を使用し、小さな端末に合わせて拡大縮小すると、使用する画像よりも大きな画像をダウンロードして帯域幅を浪費します。 +これは、メディアがコンテナーからあふれないように確実に拡大縮小します。 -{{htmlelement("picture")}} 要素と {{htmlelement("img")}} の `srcset` 属性や `size` 属性を使用したレスポンシブ画像は、ユーザーのビューポートや端末の解像度に合わせた画像を提供することができます。例えば、モバイル用には正方形の画像を入れ、デスクトップ向けには同じシーンの広い画像を表示させることができます。 - -`` 要素では、複数のサイズを「ヒント」（画像が最適な画面サイズと解像度を記述しているメタデータ）とともに指定することができ、ブラウザーはそれぞれの端末に最も適した画像を選びます。これにより、ユーザーは確実に使用する機器に適したサイズの画像をダウンロードすることができます。`` を `max-width` とともに使用することで、メディアクエリーで画像のサイズを調整する必要がなくなります。これにより、様々なサイズのビューポートに様々な{{glossary("aspect ratio", "アスペクト比")}}の画像を適用することができます。 - -さまざまなサイズで使用される*アートディレクション*画像は、さまざまな画面サイズに対して、さまざまな切り抜きまたはまったく異なる画像を提供します。 - -MDN の HTML の学習セクションで、[レスポンシブ画像の詳細なガイド](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)を見つけることができます。 +> [!NOTE] +> 単一の大きな画像を使用し、それを小さな端末に合うように変倍すると、必要以上に大きな画像をダウンロードすることになり、帯域幅が無駄になります。また、見た目も悪くなります。例えば、ワイド画面のモニターでは横長の画像が適していますが、モバイル端末では縦向きの画像の方がよく合う可能性があるからです。このような問題は、 {{htmlelement("picture")}} 要素と、 {{htmlelement("img")}} の `srcset` および `sizes` 属性を使用することで解決できます。これらは高度な機能であり、このコースの対象範囲を超えるものですが、[レスポンシブ画像](/ja/docs/Web/HTML/Responsive_images)に詳細なガイドがあります。 その他の有用なコツです。 @@ -181,7 +265,7 @@ MDN の HTML の学習セクションで、[レスポンシブ画像の詳細な ## レスポンシブ書体 -レスポンシブ書体は、メディアクエリー内でフォントサイズを変更したり、ビューポート単位を使用したりして画面の面積の大小を反映したりする記述です。 +レスポンシブ書体は、メディアクエリー内やビューポート単位を使用してフォントサイズを変更し、画面の面積の大小を反映する記述です。 ### レスポンシブ書体のためにメディアクエリーを使用 @@ -205,16 +289,70 @@ h1 { 上記のレスポンシブグリッドの例を編集して、説明した方法を使用してレスポンシブ書体も含めました。 レイアウトが 2 段バージョンになると、見出しのサイズがどのように切り替わるかを確認できます。 -モバイルでは、次のように見出しが小さくなります。 +モバイル端末では見出しが小さくなりますが、デスクトップでは見出しが大きなサイズになります。 + +```html-nolint live-sample___type-rwd +
+
+

このサイズを見てください

+

+ このレイアウトはレスポンシブです。ブラウザーウィンドウの幅を広げたり狭めたりしたら何が起こるかを確認してください。 +

+
+
+

+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。 +

+

+ その夜（後に証明されるように、記憶に残る夜）の何百万人もの人々は、発行される煙の輪を眺めていましたが、その事実から何か特別なインスピレーションを何も感じていませんでした。 +

+
+
+``` -![見出しサイズが小さい積み上げレイアウト。](mdn-rwd-font-mobile.png) +```css live-sample___type-rwd +html { + font-size: 1em; +} -しかし、デスクトップでは、次のようにより大きな見出しサイズで表示されます。 +body { + font: + 1.2em Helvetica, + Arial, + sans-serif; + margin: 20px; + padding: 0; + background-color: #eee; +} +.wrapper { + max-width: 960px; + margin: 2em auto; +} -![見出しが大きい 2 段レイアウト。](mdn-rwd-font-desktop.png) +h1 { + font-size: 2rem; + margin: 0; +} -> [!NOTE] -> この例を実際に見てください。[例](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-rwd.html)。 +.col1, +.col2 { + background-color: #fff; +} + +@media screen and (min-width: 600px) { + .wrapper { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 5%; + } + + h1 { + font-size: 4rem; + } +} +``` + +{{EmbedLiveSample("type-rwd", "", "550px")}} この書体へのアプローチが示すように、メディアクエリーをページのレイアウトの変更のみに制限する必要はありません。 これらを使用して任意の要素を微調整し、代わりとなる画面サイズでより使いやすく魅力的にすることができます。 @@ -234,18 +372,65 @@ h1 { ```css h1 { - font-size: calc(1.5rem + 3vw); + font-size: calc(1.5rem + 4vw); } ``` これは、見出しのフォントサイズを指定する必要があるのは一度だけで、モバイル用にメディアクエリーで再定義せずともよいことを意味します。ビューポートのサイズを大きくするにつれて、フォントは徐々に大きくなります。 -> [!NOTE] -> 実際のこの例を見てください。[例](https://mdn.github.io/css-examples/learn/rwd/type-vw.html)、[ソースコード](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html)。 +```html-nolint live-sample___type-vw +
+
+

このサイズを見てください

+

+ このレイアウトはレスポンシブです。ブラウザーウィンドウの幅を広げたり狭めたりしたら何が起こるかを確認してください。 +

+
+
+

+ 1782 年 11 月のある夜、 2 人の兄弟がフランスの小さな町アノネーで冬の暖炉の火を囲み、暖炉から立ち上る灰色の煙が広い煙突を登っていくのを見ながら、話を実行したという話があります。彼らの名前はステファンとジョセフ・モンゴルフィエで、紙職人でした。また、思慮深い頭脳を持ち、科学的な知識と新しい発見すべてに深い関心を持っていることで知られていました。 +

+
+
+``` + +```css live-sample___type-vw +body { + font: 1.2em / 1.5 sans-serif; + margin: 20px; + padding: 0; + background-color: #eee; +} + +.wrapper { + max-width: 960px; + margin: 2em auto; +} + +h1 { + font-size: calc(1.5rem + 4vw); + margin: 0; +} + +.col1, +.col2 { + background-color: #fff; +} + +@media screen and (min-width: 600px) { + .wrapper { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 5%; + } +} +``` + +{{EmbedLiveSample("type-vw", "", "550px")}} ## ビューポートメタタグ -レスポンシブなページの HTML ソースを見ると、通常、文書の `` に次の {{htmlelement("meta")}} タグがあります。 +レスポンシブなページの HTML ソースを見ると、通常、次の {{htmlelement("meta")}} タグが文書の `` の中にあります。 ```html @@ -253,7 +438,7 @@ h1 { この[ビューポート](/ja/docs/Web/HTML/Viewport_meta_tag)メタタグは、モバイルブラウザーに、ビューポートの幅を端末の幅に設定し、文書を意図したサイズの 100% にスケーリングするよう指示します。 これにより、文書はモバイル向けに最適化されたサイズで表示されます。 -なぜこれが必要でしょうか？ モバイルブラウザーは、ビューポートの幅について嘘をつく傾向があるためです。 +なぜこれが必要なのでしょうか？ モバイルブラウザーは、ビューポートの幅について嘘をつく傾向があるためです。 このメタタグが存在するのは、スマートフォンが登場した当初、ほとんどのサイトがモバイルに最適化されていなかったからです。そのため、モバイルブラウザーはビューポート幅を 980 ピクセルに設定し、その幅でページをレンダリングし、その結果をデスクトップレイアウトの拡大版として表示していました。ユーザーはウェブサイトを拡大したり、パンしたりして、関心のある部分を見ることができましたが、見た目が悪いものでした。 @@ -267,11 +452,13 @@ h1 { また、これらのレッスンで学んだレイアウト方法の助けを借りて、レスポンシブデザインを実現することがはるかに容易になりました。今日、ウェブ開発を新しく始めた方は、レスポンシブデザインの初期の頃よりも自由に使えるツールがたくさんあります。そのため、使用している素材の古さを調べる価値があります。過去の記事は今でも有用ですが、現代の CSS と HTML を使用することで、訪問者がどんな端末でサイトを閲覧しても、エレガントで有益なデザインをはるかに簡単に作成することができます。 +次に、メディアクエリーについてさらに詳しく検討し、よくある問題の解決に役立てる方法を紹介します。 + ## 関連情報 - タッチ画面端末での作業: - [タッチイベント](/ja/docs/Web/API/Touch_events)は、タッチ画面やトラックパッド上の指（またはスタイラス）の動きを解釈する機能を提供し、複雑なタッチベースのユーザーインターフェイスの高品質な対応を可能にします。 - [pointer](/ja/docs/Web/CSS/@media/pointer) または [any-pointer](/ja/docs/Web/CSS/@media/any-pointer) メディアクエリーを使用すると、タッチ対応端末で異なる CSS を読み込むことができます。 -- [CSS-Tricks Guide to Media Queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/) +- [CSS-Tricks guide to media queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/) -{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}} +{{PreviousMenuNext("Learn_web_development/Core/CSS_layout/Grids", "Learn_web_development/Core/CSS_layout/Media_queries", "Learn_web_development/Core/CSS_layout")}}