【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つの種類がありました。

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

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

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

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

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

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

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