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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

メディアオブジェクト(Media object) v4.0.0設定変更

Bootstrapのメディアオブジェクトの解説と実例は、ブログのコメント、ツイートなどのような繰り返しの多いコンポーネントを構築するために使用。

メディアオブジェクトの設定(Example)

メディアオブジェクトは、いくつかのメディアが周辺のメディアとコンテンツに囲まれずに一緒に配置され、複雑で反復的なコンポーネントが構築可能。さらに、Flexboxのおかげで2つの必要なクラスだけでこれを作成。

以下に、単一のメディアオブジェクトの例を示す。 .media とコンテンツを囲む .media-body の2つのクラスのみ必要。オプションのpaddingとmarginは、空白ユーティリティを使用して制御。

見本
プレースホルダ64x64
メディアのヘッダ
メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ メディアのコンテンツ
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="..." alt="メディアの画像">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">メディアのヘッダ</h4>
		メディアのコンテンツ...
	</div><!-- /.media-body -->
</div><!-- /.media -->
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="media">
	<a href="#" class="mr-3">
		<img src="..." alt="メディアの画像">
	</a>
	<div class="media-body">
		<h5 class="mt-0">メディアのヘッダ</h5>
		メディアのコンテンツ...
	</div><!-- /.media-body -->
</div><!-- /.media -->

【設定】

  • div.media > [a.mr-3(右側のマージンを1remに) > <img>]《メディアの表示》 + {div.media-body > [h*.mt-0(上部のマージンを0に)《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》
  • メディア(<img>)は必ずしもリンク(<a>)で囲む必要はない
    <a> を使用しない場合は、<img>.mr-3 を入れる)
  • ヘッダの大きさ(<h*>)は、好みで変更可能

【Bootstrap3.xとの変更箇所】

  • Flexbox(display: flex)で構築
  • メディアの配置:div.media-left は不要に
  • メディアの表示:<a> > img.media-objecta.mr-3 > <img>
  • 説明のヘッダ:h4.media-headingh5.mt-0

 

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

メディアオブジェクトは無限に入れ子にすることが可能だが、ある時点で停止することを推奨。親メディアオブジェクトの .media-body 内に入れ子にされた .media を配置。

見本
プレースホルダ64x64
親メディアのヘッダ
親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ 親メディアのコンテンツ
プレースホルダ64x64
子メディアのヘッダ
子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ 子メディアのコンテンツ
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="..." alt="親メディアの画像">
		</a>
	</div><!-- /.media-left -->
	<div class="media-body">
		<h4 class="media-heading">親メディアのヘッダ</h4>
		親メディアのコンテンツ...
		<!-- 子メディアオブジェクト -->
		<div class="media">
			<a class="media-left" href="#">
				<img class="media-object" src="..." alt="子メディアの画像">
			</a>
			<div class="media-body">
				<h4 class="media-heading">子メディアのヘッダ</h4>
				子メディアのコンテンツ...
			</div><!-- /.media-body -->
		</div><!-- /.media -->
	</div><!-- /.media-body -->
</div><!-- /.media -->
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><!-- /.media-body -->
		</div><!-- /.media -->
	</div><!-- /.media-body -->
</div><!-- /.media -->

【設定】

  • div.media-body 内に入れ子で div.media.mt-3(上部のマージンを1remに)・・・を設定

【Bootstrap3.xとの変更箇所】

  • 子メディアの表示:div.mediadiv.media.mt-3

 

メディアの配置(Alignment)

画像または他のメディアは、上部、中央、下部に配置させることが可能。デフォルトは上部に配置。

上部に配置(Top-aligned media)

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

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

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

Bootstrap3.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-left">
		<a href="#">
			<img class="media-object" src="..." alt="上メディアの画像">
		</a>
	</div><!-- /.media-left -->
	<div class="media-body">
		<h4 class="media-heading">上メディアのヘッダ</h4>
		<p>上メディアのコンテンツ...</p>
		<p>上メディアのコンテンツ...</p>
	</div><!-- /.media-body -->
</div><!-- /.media -->
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><!-- /.media-body -->
</div><!-- /.media -->

【設定】

  • <a>.align-self-start(画像を上揃えに)を追加(ブラウザ上での変化はない)

【Bootstrap3.xとの変更箇所】

  • div.media-{left|right} > <a> > img.media-objecta.align-self-start > <img>

垂直中央に配置(Center-aligned media)

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

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

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

Bootstrap3.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-left media-middle">
		<a href="#">
			<img class="media-object" src="..." alt="中メディアの画像">
		</a>
	</div><!-- /.media-left -->
	<div class="media-body">
		<h4 class="media-heading">中メディアのヘッダ</h4>
		<p>中メディアのコンテンツ...</p>
		<p>中メディアのコンテンツ...</p>
	</div><!-- /.media-body -->
</div><!-- /.media -->
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><!-- /.media-body -->
</div><!-- /.media -->

【設定】

  • <a>.align-self-center(画像を上下中央揃えに)を追加
  • メディアのコンテンツ:最後の段落要素に .mb-0(下部のマージンを0に)を入れる

【Bootstrap3.xとの変更箇所】

  • div.media-{left|right}.media-middle > <a> > img.media-objecta.align-self-center > <img>

下部に配置(Bottom-aligned media)

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

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

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

Bootstrap3.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-left media-bottom">
		<a href="#">
			<img class="media-object" src="..." alt="下メディアの画像">
		</a>
	</div><!-- /.media-left -->
	<div class="media-body">
		<h4 class="media-heading">下メディアのヘッダ</h4>
		<p>下メディアのコンテンツ...</p>
		<p>下メディアのコンテンツ...</p>
	</div><!-- /.media-body -->
</div><!-- /.media -->
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><!-- /.media-body -->
</div><!-- /.media -->

【設定】

  • <a>.align-self-end(画像を下揃えに)を追加
  • メディアのコンテンツ:最後の段落要素に .mb-0(下部のマージンを0に)を入れる

【Bootstrap3.xとの変更箇所】

  • div.media-{left|right}.media-bottom > <a> > img.media-objecta.align-self-end > <img>

 

コンテンツの順序変更(Order)

HTML自体を変更するか、または order プロパティ(選択した整数)を設定するためのカスタムFlexboxCSSを追加して、メディアオブジェクト内のコンテンツの順序を変更。

1. HTML自体の順序変更 v4.0.0設定変更

見本
右メディアのヘッダ
右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ
プレースホルダ64x64
Bootstrap3.xの設定例 赤背景が変更箇所
<div class="media">
	<div class="media-body">
		<h4 class="media-heading">右メディアのヘッダ</h4>
		右メディアのコンテンツ...
	</div><!-- /.media-body -->
	<div class="media-right">
		<a href="#">
			<img class="media-object" src="..." alt="右メディアの画像">
		</a>
	</div><!-- /.media-right -->
</div><!-- /.media -->
Bootstrap4.xの設定例 緑背景が変更箇所
<div class="media">
	<div class="media-body">
		<h5 class="mt-0">右メディアのヘッダ</h5>
		右メディアのコンテンツ...
	</div><!-- /.media-body -->
	<a href="#" class="ml-3">
		<img src="..." alt="右メディアの画像">
	</a>
</div><!-- /.media -->

【設定】

  • div.media > {div.media-body > [h*.mt-0《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》 + [a.ml-3 > <img>(左側のマージンを1remに)]《メディアの表示》
  • 《メディアの説明》⇒《メディアの表示》の順に記載する必要がある

【Bootstrap3.xとの変更箇所】

  • メディアの配置:div.media-right は不要に

2. Flexユーティリティを使用 v4.0.0新設

見本
プレースホルダ64x64
右メディアのヘッダ
右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ 右メディアのコンテンツ
設定例
<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><!-- /.media-body -->
</div><!-- /.media -->

【設定】

  • div.media > [a.order-2.ml-3 > <img>]《メディアの表示》+ {div.media-body.order-1 > [h*.mt-0《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》
    a.ml-3.order-2div.media-body.order-1 を入れる)

 

メディアリスト(Media list)

メディアオブジェクトは構造要件が非常に少ないため、これらのクラスをリストのHTML要素に使用可能。<ul> または <ol>.list-unstyled を追加して、ブラウザのデフォルトリストスタイルを削除し、.media<li> に適用する。細かく調整する必要がある場合は、いつものように空白ユーティリティを使用すること。

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

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

  • プレースホルダ64x64
    メディア2のヘッダ
    メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ メディア2のコンテンツ
  • メディア3のヘッダ
    メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ メディア3のコンテンツ
    プレースホルダ64x64
Bootstrap3.xの設定例 赤背景が変更箇所
<ul class="media-list">
	<li class="media">
		<div class="media-left">
			<a href="#">
				<img class="media-object" src="..." alt="メディア1の画像">
			</a>
		</div><!-- /.media-left -->
		<div class="media-body">
			<h4 class="media-heading">メディア1のヘッダ</h4>
			メディア1のコンテンツ...
		</div><!-- /.media-body -->
	</li><!-- /.media -->
	<li class="media">
		<div class="media-left">
			<a href="#">
				<img class="media-object" src="..." alt="メディア2の画像">
			</a>
		</div><!-- /.media-left -->
		<div class="media-body">
			<h4 class="media-heading">メディア2のヘッダ</h4>
			メディア2のコンテンツ...
		</div><!-- /.media-body -->
	</li><!-- /.media -->
	<li class="media">
		<div class="media-right">
			<a href="#">
				<img class="media-object" src="..." alt="メディア3の画像">
			</a>
		</div><!-- /.media-right -->
		<div class="media-body">
			<h4 class="media-heading">メディア3のヘッダ</h4>
			メディア3のコンテンツ...
		</div><!-- /.media-body -->
	</li><!-- /.media -->
</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><!-- /.media-body -->
	</li><!-- /.media -->
	<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><!-- /.media-body -->
	</li><!-- /.media -->
	<li class="media">
		<div class="media-body">
			<h5 class="mt-0">メディア3のヘッダ</h5>
			メディア3のコンテンツ...
		</div><!-- /.media-body -->
		<a href="#" class="ml-3">
			<img src="..." alt="メディア3の画像">
		</a>
	</li><!-- /.media -->
</ul>

【設定】

  • ul.list-unstyled > li.media
  • div.media-body 内に入れ子で div.media・・・を設定することも可能

【注意】

  • リストの間には空白がないので、li.media空白ユーティリティクラスを追加する必要がある(上記の見本では真ん中のリストで上下のマージンを1remに設定)

【Bootstrap3.xとの変更箇所】

  • ul.media-listul.list-unstyled