【Bootstrapのコンポーネント】メディアオブジェクト（Media object）に関して

記事内に商品プロモーションを含む場合があります

今回はBootstrap4のメディアオブジェクトコンポーネントについて解説していきます。

メディアオブジェクトコンポーネントは、ブログ記事でリンクを貼り付ける際に、画像やタイトル、本文が記載されたカードコンポーネントのようなものです。

カードコンポーネントは縦書きですが、メディアオブジェクトは横書きです。

それでは、どういったものなのか見ていきましょう。

メディアオブジェクトの種類

まず、メディアオブジェクトの種類について見ていきます。

その種類は、大きく分けて3つあります。

■画像の左右の配置位置を決めます

左側に画像、右側に文章
左側に文章、右側に画像

■左右の位置が決まったら・・・次は上中下で位置を決めます

画像を上部
画像を中央
画像を下部

■メディアオブジェクトが複数あって、リスト化する場合

 

それぞれについて確認します。

メディアオブジェクトの記述方法

まず画像を左右どちらに配置するかを決めましょう。

画像の左右の配置位置を決めます

左右配置

1.     <div class=”container”>
2.       <div class=”media mb-5″>
3.         <img src=”https://placehold.jp/64×64.png” class=”mr-3″ alt=””>
4.         <div class=”media-body“>
5.           <h5>メディアヘディング</h5>
6.           ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。
7.         </div>
8.       </div>
9.       <div class=”media”>
10.         <div class=”media-body”>
11.           <h5>メディアヘディング</h5>
12.           ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。
13.         </div>
14.         <img src=”https://placehold.jp/64×64.png” class=”mr-3″ alt=””>
15.       </div>
16.     </div>

 

左右の位置が決まったら・・・次は上中下で位置を決めます

上中下配置

1. <div class=”container”>
2.       <div class=”media mb-5″>
3.         <img src=”https://placehold.jp/64×64.png” class=”mr-3 align-self-start” alt=””>
4.         <div class=”media-body”>
5.           <h5>メディアヘディング</h5>
6.           ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。
7.         </div>
8.       </div>
9.       <div class=”media mb-5″>
10.         <img src=”https://placehold.jp/64×64.png” class=”mr-3 align-self-center” alt=””>
11.         <div class=”media-body”>
12.           <h5>メディアヘディング</h5>
13.           ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。
14.         </div>
15.       </div>
16.       <div class=”media mb-5″>
17.         <img src=”https://placehold.jp/64×64.png” class=”mr-3 align-self-end” alt=””>
18.         <div class=”media-body”>
19.           <h5>メディアヘディング</h5>
20.           ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。ここにメディアコンテンツを入力します。
21.         </div>
22.       </div>
23.     </div>

 

なお、何も指定しない場合は、align-self-startがデフォルトで設定されています。

メディアオブジェクトが複数あって、リスト化する場合

リスト化

1.     <div class=”container”>
2.       <ol class=”list-unstyled”>
3.         <li class=”media mb-5″>
4.           <img class=”mr-3″ src=”https://placehold.jp/64×64.png” alt=””>
5.           <div class=”media-body”>
6.             <h5>メディアヘディング</h5>
7.             メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示
8.           </div>
9.         </li>
10.         <li class=”media mb-5″>
11.           <img class=”mr-3″ src=”https://placehold.jp/64×64.png” alt=””>
12.           <div class=”media-body”>
13.             <h5>メディアヘディング</h5>
14.             メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示
15.           </div>
16.         </li>
17.         <li class=”media mb-5″>
18.           <img class=”mr-3″ src=”https://placehold.jp/64×64.png” alt=””>
19.           <div class=”media-body”>
20.             <h5>メディアヘディング</h5>
21.             メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示・メディアオブジェクトのリスト表示
22.           </div>
23.         </li>
24.       </ol>
25.     </div>

 

メディアオブジェクトが複数ある場合は、こちらの要素を使用するとよいでしょう。

まとめ

Bootstrap4のメディアオブジェクトコンポーネントについて学習しました。

おさらいしますね。

メディアオブジェクトには、大きく分けて3つの種類がありました。

■画像の左右の配置位置を決めます

左側に画像、右側に文章
左側に文章、右側に画像

■左右の位置が決まったら・・・次は上中下で位置を決めます

画像を上部
画像を中央
画像を下部

■メディアオブジェクトが複数あって、リスト化する場合

画像が左右どちらかを決めたら、あとは複数あるかないかで、どれを使うかを決めれば良いでしょう。
上中下に関しては、おそらく上以外には使わないかと思います。

ぜひ使って見てください。