From a271f179028fedd7cc33a44a8bac3913bbc6c12f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 23 Dec 2021 23:32:28 +0900 Subject: Web/CSS/Layout_cookbook 以下の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/layout_cookbook/media_objects/index.html | 89 ---------------------- .../web/css/layout_cookbook/media_objects/index.md | 89 ++++++++++++++++++++++ 2 files changed, 89 insertions(+), 89 deletions(-) delete mode 100644 files/ja/web/css/layout_cookbook/media_objects/index.html create mode 100644 files/ja/web/css/layout_cookbook/media_objects/index.md (limited to 'files/ja/web/css/layout_cookbook/media_objects') diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.html b/files/ja/web/css/layout_cookbook/media_objects/index.html deleted file mode 100644 index 3fbb3dc75d..0000000000 --- a/files/ja/web/css/layout_cookbook/media_objects/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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}}
- -

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

- -

- -

必要条件

- -

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

- - - -

レシピ

- -

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

- -
-

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

-
- -

行った選択

- -

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

- -

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

- -

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

- -

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

- -

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

- -

代替方法

- -

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

- -

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

- -
-

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

-
- -

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

- -

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

- -

MDN の関連資料

- - - -

ブラウザー実装状況

- -

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

- -

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

- -

grid-template-areas

- -

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

- -

float

- -

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

diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.md b/files/ja/web/css/layout_cookbook/media_objects/index.md new file mode 100644 index 0000000000..3fbb3dc75d --- /dev/null +++ b/files/ja/web/css/layout_cookbook/media_objects/index.md @@ -0,0 +1,89 @@ +--- +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}}
+ +

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

+ +

+ +

必要条件

+ +

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

+ + + +

レシピ

+ +

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

+ +
+

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

+
+ +

行った選択

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

代替方法

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

MDN の関連資料

+ + + +

ブラウザー実装状況

+ +

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

+ +

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

+ +

grid-template-areas

+ +

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

+ +

float

+ +

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

-- cgit v1.2.3-54-g00ecf