From 1133530abe8707d933dbf00e484410921e105329 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 24 Dec 2021 03:48:59 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/layout_cookbook/media_objects/index.md | 98 ++++++++++------------ 1 file changed, 46 insertions(+), 52 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.md b/files/ja/web/css/layout_cookbook/media_objects/index.md index 3fbb3dc75d..922a859de9 100644 --- a/files/ja/web/css/layout_cookbook/media_objects/index.md +++ b/files/ja/web/css/layout_cookbook/media_objects/index.md @@ -3,87 +3,81 @@ title: 'レシピ: メディアオブジェクト' slug: Web/CSS/Layout_cookbook/Media_objects tags: - CSS - - Layout - - Media object - - Recipe - - cookbook + - ガイド + - レイアウト + - メディアオブジェクト + - 料理帳 - fit-content - float - - grid + - グリッド translation_of: Web/CSS/Layout_cookbook/Media_objects --- -
{{CSSRef}}
+{{CSSRef}} -

メディアオブジェクトは、ウェブ上のいたるところで見られるパターンです。 Nicole Sullivan によって命名され、それは一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような2列のボックスを指します。

+*メディアオブジェクト*は、ウェブ上のいたるところで見られるパターンです。 [Nicole Sullivan によって命名](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)され、一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような 2 列のボックスを指します。 -

+![](media-object.png) -

必要条件

+## 要件 -

メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。

+メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。 - +- モバイルでは積み重ね、デスクトップでは 2 列です。 +- 画像は左右どちらでもかまいません。 +- 画像は小さい場合も大きい場合もあります。 +- メディアオブジェクトはネストできます。 +- メディアオブジェクトは、どちら側が高いかに関係なく、コンテンツをクリアする（区切る）必要があります。 -

レシピ

+## レシピ -

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 2700)}} -
-

この例をダウンロードする

-
+> **Callout:** +> +> [この例をダウンロードする](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html) -

行った選択

+## 行った選択 -

必要に応じて2次元でレイアウトを制御できるため、メディアオブジェクトにグリッドレイアウトを使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。

+必要に応じて 2 次元でレイアウトを制御できるようにするため、メディアオブジェクトに[グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)を使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。 -

グリッドレイアウトを使用するもう1つの理由は、画像のトラックのサイズ変更に {{cssxref("fit-content")}} を使用できるようにするためです。 最大サイズが 200 ピクセルの fit-content を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり max-content のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の {{cssxref("max-width")}} が適用されるため、列の内側に収まるように縮小されます。

+グリッドレイアウトを使用するもう 1 つの理由は、画像のトラックのサイズ変更に {{cssxref("fit-content")}} を使用できるようにするためです。 最大サイズが 200 ピクセルの `fit-content` を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり `max-content` のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の {{cssxref("max-width")}} が適用されるため、列の内側に収まるように縮小されます。 -

レイアウトを実現するために {{cssxref("grid-template-areas")}} を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになったら、グリッドを定義します。 そのため、より小さいデバイスではメディアオブジェクトが積み重ねられます。

+レイアウトを実現するために {{cssxref("grid-template-areas")}} を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになった時点でグリッドを定義しているので、小さな端末ではメディアオブジェクトが積み重なります。 -

パターンのオプションはそれを反転して画像を反対側に切り替えることです — これはレイアウトを反映させる反転グリッドテンプレートを定義する media-flip クラスを追加することによって行われます。

+パターンのオプションに、反転して反対側に切り替えるというものがあります。 — これはレイアウトを反映させる反転グリッドテンプレートを定義する `media-flip` クラスを追加することによって行われます。 -

あるメディアオブジェクトを別のメディアオブジェクトの中にネストするときは、通常のレイアウトでは2番目のトラックに、反転したときは最初のトラックに配置する必要があります。

+あるメディアオブジェクトを別のメディアオブジェクトの中に入れ子にするときは、通常のレイアウトでは 2 番目のトラックに、反転したときは最初のトラックに配置する必要があります。 -

代替方法

+## 代替策 -

サポートしたいブラウザーに応じて、このパターンにはいくつかの代替方法があります。 良いキャッチオールは、画像を左に浮かべること、そしてそれがフロートを含むことを確実にするためにボックスに clearfix ハックを追加することです。

+このパターンには、対応するブラウザーによって、いくつかの代替策が考えられます。良い万能策としては、画像を左に浮動させ、ボックスに clearfix を追加して、浮動が確実に収まるようにすることです。 -

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 3000)}} -
-

この例をダウンロードする

-
+> **Callout:** +> +> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html) -

浮動要素がグリッド項目になると、そのフロートは適用されなくなるため、フロートを除去するために特別なことをする必要はありません。

+浮動要素がグリッドアイテムになると、その float が適用されなくなるため、浮動要素を除去するために特別なことをする必要はありません。 -

する必要があるのは、項目に適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための {{cssxref("gap")}} プロパティがあり、トラックがサイズを制御します）。

+やらなければならないことは、アイテムに適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための {{cssxref("gap")}} プロパティがあり、トラックがサイズを制御します）。 -

MDN の関連資料

+## MDN の関連資料 - +- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout) +- [プログレッシブエンハンスメントとグリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [グリッドテンプレート領域の使用](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) +- [fit-content](/ja/docs/Web/CSS/fit-content) +- [grid-template-areas](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) -

ブラウザー実装状況

+## ブラウザーの互換性 -

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用しているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

+レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。 -

このページの互換性テーブルは構造化データから生成されます。 データに貢献したい場合は、https://github.com/mdn/browser-compat-data をチェックして、プルリクエストを送ってください。

+#### grid-template-areas -

grid-template-areas

+{{Compat("css.properties.grid-template-areas")}} -

{{Compat("css.properties.grid-template-areas")}}

+#### float -

float

- -

{{Compat("css.properties.float")}}

+{{Compat("css.properties.float")}} -- cgit v1.2.3-54-g00ecf