レシピ: メディアオブジェクト

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

必要条件

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

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

レシピ

行った選択

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

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

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

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

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

代替方法

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

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

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

MDN の関連資料

• CSS グリッドレイアウト
• プログレッシブエンハンスメントとグリッドレイアウト
• グリッドテンプレート領域の使用
• fit-content
• grid-template-areas

ブラウザー実装状況

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

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

grid-template-areas

float