メインコンテンツへスキップ

※メディアオブジェクト(Media object) v5.0.0-alpha1クラス廃止

目次
【Bootstrap4.xとの変更箇所】
  • div.mediadiv.d-flex
  • メディアの表示:a.mr-3 > <img>a.flex-shrink-0.me-3 > <img><a> を使用しない場合は、<img>.flex-shrink-0アイテムの非収縮)を入れる)
  • メディアの説明:div.media-body<div> のみ

メディアオブジェクトの基本設定

見本
プレースホルダ64x64
メディアのヘッダ
メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<a href="#" class="flex-shrink-0 me-3">
		<img src="..." alt="メディアの画像">
	</a>
	<div>
		<h5 class="mt-0">メディアのヘッダ</h5>
		メディアのコンテンツ...
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<a href="#" class="mr-3">
		<img src="..." alt="メディアの画像">
	</a>
	<div class="media-body">
		<h5 class="mt-0">メディアのヘッダ</h5>
		メディアのコンテンツ...
	</div>
</div>
【設定】
  • div.d-flex > [a.flex-shrink-0.me-3(行末側のマージンを1remに) > <img>]《メディアの表示》 + {<div> > [h*.mt-0(上部のマージンを0に)《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》
  • メディア(<img>)は必ずしもリンク(<a>)で囲む必要はない
    <a> を使用しない場合は、<img>.flex-shrink-0.me-3 を入れる)
  • ヘッダの大きさ(<h*>)は、好みで変更可能

 

メディアオブジェクトの入れ子

見本
プレースホルダ64x64
親メディアのヘッダ
親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ
プレースホルダ64x64
子メディアのヘッダ
子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<a href="#" class="flex-shrink-0 me-3">
		<img src="..." alt="親メディアの画像">
	</a>
	<div>
		<h5 class="mt-0">親メディアのヘッダ</h5>
		親メディアのコンテンツ...
		<!-- 子メディアオブジェクト -->
		<div class="d-flex mt-3">
			<a href="#" class="flex-shrink-0 me-3">
				<img src="..." alt="子メディアの画像">
			</a>
			<div>
				<h5 class="mt-0">子メディアのヘッダ</h5>
				子メディアのコンテンツ...
			</div>
		</div>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<a href="#" class="mr-3">
		<img src="..." alt="親メディアの画像">
	</a>
	<div class="media-body">
		<h5 class="mt-0">親メディアのヘッダ</h5>
		親メディアのコンテンツ...
		<!-- 子メディアオブジェクト -->
		<div class="media mt-3">
			<a href="#" class="mr-3">
				<img src="..." alt="子メディアの画像">
			</a>
			<div class="media-body">
				<h5 class="mt-0">子メディアのヘッダ</h5>
				子メディアのコンテンツ...
			</div>
		</div>
	</div>
</div>
【設定】
  • div.d-flex > <div>《親メディア》 > div.d-flex > <div>《子メディア》と入れ子に設定可能

 

メディアの配置

上部に配置

見本
プレースホルダ64x64
上メディアのヘッダ

上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ

上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ 上メディアのコンテンツ

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<a href="#" class="align-self-start flex-shrink-0 me-3">
		<img src="..." alt="上メディアの画像">
	</a>
	<div>
		<h5 class="mt-0">上メディアのヘッダ</h5>
		<p>上メディアのコンテンツ...</p>
		<p>上メディアのコンテンツ...</p>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<a href="#" class="align-self-start mr-3">
		<img src="..." alt="上メディアの画像">
	</a>
	<div class="media-body">
		<h5 class="mt-0">上メディアのヘッダ</h5>
		<p>上メディアのコンテンツ...</p>
		<p>上メディアのコンテンツ...</p>
	</div>
</div>
【設定】
  • <a>.align-self-start(画像を上揃えに)を追加(ブラウザ上での変化はない)

垂直中央に配置

見本
プレースホルダ64x64
中メディアのヘッダ

中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ

中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ 中メディアのコンテンツ
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<a href="#" class="align-self-center flex-shrink-0 me-3">
		<img src="..." alt="中メディアの画像">
	</a>
	<div>
		<h5 class="mt-0">中メディアのヘッダ</h5>
		<p>中メディアのコンテンツ...</p>
		<p class="mb-0">中メディアのコンテンツ...</p>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<a href="#" class="align-self-center mr-3">
		<img src="..." alt="中メディアの画像">
	</a>
	<div class="media-body">
		<h5 class="mt-0">中メディアのヘッダ</h5>
		<p>中メディアのコンテンツ...</p>
		<p class="mb-0">中メディアのコンテンツ...</p>
	</div>
</div>
【設定】
  • <a>.align-self-center(画像を上下中央揃えに)を追加
  • メディアのコンテンツ:最後の段落要素に .mb-0(下部のマージンを0に)を入れる

下部に配置

見本
プレースホルダ64x64
下メディアのヘッダ

下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ

下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ 下メディアのコンテンツ
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<a href="#" class="align-self-end flex-shrink-0 me-3">
		<img src="..." alt="下メディアの画像">
	</a>
	<div>
		<h5 class="mt-0">下メディアのヘッダ</h5>
		<p>下メディアのコンテンツ...</p>
		<p class="mb-0">下メディアのコンテンツ...</p>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<a href="#" class="align-self-end mr-3">
		<img src="..." alt="下メディアの画像">
	</a>
	<div class="media-body">
		<h5 class="mt-0">下メディアのヘッダ</h5>
		<p>下メディアのコンテンツ...</p>
		<p class="mb-0">下メディアのコンテンツ...</p>
	</div>
</div>
【設定】
  • <a>.align-self-end(画像を下揃えに)を追加
  • メディアのコンテンツ:最後の段落要素に .mb-0(下部のマージンを0に)を入れる

 

コンテンツの順序変更

行末側にメディアを配置。

1. HTML自体の順序変更

見本
右メディアのヘッダ
右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ
プレースホルダ64x64
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<div>
		<h5 class="mt-0">右メディアのヘッダ</h5>
		右メディアのコンテンツ...
	</div>
	<a href="#" class="flex-shrink-0 ms-3">
		<img src="..." alt="右メディアの画像">
	</a>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-body">
		<h5 class="mt-0">右メディアのヘッダ</h5>
		右メディアのコンテンツ...
	</div>
	<a href="#" class="ml-3">
		<img src="..." alt="右メディアの画像">
	</a>
</div>
【設定】
  • 《メディアの説明》⇒《メディアの表示》の順に記載

2. Flexユーティリティを使用

見本
プレースホルダ64x64
右メディアのヘッダ
右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex">
	<a href="#" class="order-2 flex-shrink-0 ms-3">
		<img src="..." alt="右メディアの画像">
	</a>
	<div class="order-1">
		<h5 class="mt-0">右メディアのヘッダ</h5>
		右メディアのコンテンツ...
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="media">
	<a href="#" class="order-2 ml-3">
		<img src="..." alt="右メディアの画像">
	</a>
	<div class="media-body order-1">
		<h5 class="mt-0">右メディアのヘッダ</h5>
		右メディアのコンテンツ...
	</div>
</div>
【設定】
  • a.flex-shrink-0.ms-3《メディアの表示》に .order-2<div>《メディアの説明》に .order-1 を入れる

 

メディアリスト

リストの中に設定。

見本
  • プレースホルダ64x64
    メディア1のヘッダ

    メディア1のコンテンツ メディアのコンテンツ メディア1のコンテンツ メディア1のコンテンツ メディア1のコンテンツ メディア1のコンテンツ

  • プレースホルダ64x64
    メディア2のヘッダ
    メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ
  • メディア3のヘッダ
    メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ
    プレースホルダ64x64
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="list-unstyled">
	<li class="d-flex">
		<a href="#" class="flex-shrink-0 me-3">
			<img src="..." alt="メディア1の画像">
		</a>
		<div>
			<h5 class="mt-0">メディア1のヘッダ</h5>
			<p>メディア1のコンテンツ...</p>
		</div>
	</li>
	<li class="d-flex my-4">
		<a href="#" class="flex-shrink-0 me-3">
			<img src="..." alt="メディア2の画像">
		</a>
		<div>
			<h5 class="mt-0">メディア2のヘッダ</h5>
			メディア2のコンテンツ...
		</div>
	</li>
	<li class="d-flex">
		<div>
			<h5 class="mt-0">メディア3のヘッダ</h5>
			メディア3のコンテンツ...
		</div>
		<a href="#" class="flex-shrink-0 ms-3">
			<img src="..." alt="メディア3の画像">
		</a>
	</li>
</ul>
※Bootstrap4.xの設定例 赤背景が変更箇所
<ul class="list-unstyled">
	<li class="media">
		<a href="#" class="mr-3">
			<img src="..." alt="メディア1の画像">
		</a>
		<div class="media-body">
			<h5 class="mt-0">メディア1のヘッダ</h5>
			<p>メディア1のコンテンツ...</p>
		</div>
	</li>
	<li class="media my-4">
		<a href="#" class="mr-3">
			<img src="..." alt="メディア2の画像">
		</a>
		<div class="media-body">
			<h5 class="mt-0">メディア2のヘッダ</h5>
			メディア2のコンテンツ...
		</div>
	</li>
	<li class="media">
		<div class="media-body">
			<h5 class="mt-0">メディア3のヘッダ</h5>
			メディア3のコンテンツ...
		</div>
		<a href="#" class="ml-3">
			<img src="..." alt="メディア3の画像">
		</a>
	</li>
</ul>
【設定】
  • ul.list-unstyled > li.d-flex
  • <div>《メディアの説明》内に入れ子で div.d-flex・・・を設定することも可能
【注意】
  • リストの間には空白がないので、li.d-flex空白ユーティリティクラスを追加する必要がある(上記の見本では真ん中のリストで上下のマージンを1remに設定)