メディアオブジェクト

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

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

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

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

簡単な例

Kitten

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

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

Kitten

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

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

Kitten

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

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.

画像不使用

アイコンを利用

Donec imperdiet sem leo, id rutrum risus aliquam vitae. Vestibulum ac turpis non lacus dignissim dignissim eu sed dui.

図を垂直にセンタリング

Nunc nec fermentum dolor. Duis at iaculis turpis. Sed rutrum elit ac egestas dapibus. Duis nec consequat enim.

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

Kitten

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

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

Kitten

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

Kitten

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.

Kitten

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

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.

Kitten

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にあります。