path: root/files/ja/web/css/layout_cookbook/media_objects/index.html

---
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
---
<div>{{CSSRef}}</div>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>

<h2 id="Requirements" name="Requirements">必要条件</h2>

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

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

<h2 id="The_recipe" name="The_recipe">レシピ</h2>

<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>

<div class="note">
<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">この例をダウンロードする</a></p>
</div>

<h2 id="Choices_made" name="Choices_made">行った選択</h2>

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

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

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

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

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

<h2 id="Fallbacks" name="Fallbacks">代替方法</h2>

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

<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>

<div class="note">
<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">この例をダウンロードする</a></p>
</div>

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

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

<h2 id="Relevant_resources_on_MDN" name="Relevant_resources_on_MDN">MDN の関連資料</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">プログレッシブエンハンスメントとグリッドレイアウト</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域の使用</a></li>
 <li><a href="/ja/docs/Web/CSS/fit-content">fit-content</a></li>
 <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
</ul>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>

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

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

<h4 id="grid-template-areas" name="grid-template-areas">grid-template-areas</h4>

<p>{{Compat("css.properties.grid-template-areas")}}</p>

<h4 id="float" name="float">float</h4>

<p>{{Compat("css.properties.float")}}</p>