メディアオブジェクト

メディアオブジェクトは、オブジェクト指向CSS(OOCSS)の典型です。そのシンプルさと便利さは多くのCSS開発者（筆者自身を含む）をOOCSSの方法論に転向させました。

しかし、ほとんどのCSSレイアウトのテクニックと同様に、メディアオブジェクトはその目的を果たすためにトリックやハックに頼っています。

メディアオブジェクトの本体は、ブロック整形文脈もしくは、左マージン/パディングを画像の幅と等しくするかのどちらかの方法で、画像の下にテキストが覆われてしまうのを防止しなければなりません。また、overflow:hiddenまたは擬似要素のどちらかを使って、メディアオブジェクトの本体をclearfixしなければなりません。

Flexboxでは、これらの問題は解決されています。加えて、Flexboxはメディアオブジェクトがどのような形状だったとしても、垂直方向に整列させることができます。また、ソース中の順番を変更することなく、図を右側に並べることができます。

簡単な例

普通のメディアオブジェクト

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.

普通のメディアオブジェクト

Donec imperdiet sem leo, id rutrum risus aliquam vitae. Cras tincidunt porta mauris, vel feugiat mauris accumsan eget.

反転させたメディアオブジェクト

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut. Integer gravida pharetra cursus. Nunc in suscipit nunc.

画像不使用

ネストしたメディアオブジェクト

メディアオブジェクトのタイトル

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo.

Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie.

Vestibulum ac turpis non lacus dignissim dignissim eu sed dui. Proin a ligula sit amet massa malesuada mattis eu a ante. Nunc porttitor sed quam quis sollicitudin. Vestibulum ac turpis non lacus dignissim dignissim eu sed dui.

Rutrum risus aliquam vitae.

メディアオブジェクトのタイトル

Phasellus vel felis purus. Aliquam consequat pellentesque dui, non mollis erat dictum sit amet. Curabitur non quam dictum, consectetur arcu in, vehicula justo. Donec tortor massa, eleifend nec viverra in, aliquet at eros. Mauris laoreet condimentum mauris, non tempor massa fermentum ut.

Donec imperdiet sem leo, id rutrum risus aliquam vitae.

Mauris porta arcu id magna adipiscing lacinia at congue lacus. Vivamus blandit quam quis tincidunt egestas. Etiam posuere lectus sed sapien malesuada molestie. Aliquam vitae pharetra dolor. Nullam non mattis nunc.

HTML

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">…</p>
</div>

CSS

.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

この例で利用しているMediaコンポーネントの完全なソースはGithubにあります。