Bootstrap4のcard-deckで異なる列要素数の行内のカード幅を任意調整

Bootstrap4の『card-deck』で扱いづらい部分

Bootstrap4から新たに追加された新機能で『card-deck』があります。『card-deck』は隣り合うカード型デザインの高さを自動的に揃えてくれる便利なコードです。

大変便利な『card-deck』ですがいくつか扱いづらい部分もあります。その要因となるのは列要素の数が『card-deck』内に配置されている『card』要素で自動的に決定されること。

そのためブラウザのサイズやデバイスによる列要素数の変更が容易ではない。また、高さだけではなく1行内の列要素数によってカードの幅が自動的に調整されるため、異なる列要素数の行がある場合はすべてのカードの幅が揃わなくなります。

いくつか解決策がありますがその中でも簡単に実装できる方法を紹介します。

『card-deck』で1行内の列要素数をレスポンシブにコントロールする方法

これらの問題を解決するのに1番簡単な方法はBootstrapのグリットシステムをあわせて利用することです。グリットシステムで1行内の列要素数をレスポンシブにコントロールします。

実際にサンプルコードを見て確認してみましょう。対策前の通常コードは以下のようになっています。

通常コード

<div class="card-deck">



	<div class="card">

		<img class="card-img-top" src="/media/images/img1.jpg" alt="ダミーテキスト">

		<div class="card-body">

			<h2 class="card-title">タイトル1</h2>

			<p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

			<p class="card-text bu"><a href="#">リンクテキスト</a></p>

		</div>

	</div>



	<div class="card">

		<img class="card-img-top" src="/media/images/img2.jpg" alt="ダミーテキスト">

		<div class="card-body">

			<h2 class="card-title">タイトル2</h2>

			<p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

			<p class="card-text bu"><a href="#">リンクテキスト</a></p>

		</div>

	</div>



	<div class="card">

		<img class="card-img-top" src="/media/images/img3.jpg" alt="ダミーテキスト">

		<div class="card-body">

			<h2 class="card-title">タイトル3</h2>

			<p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

			<p class="card-text bu"><a href="#">リンクテキスト</a></p>

		</div>

	</div>



</div>

こちらの基本コードをグリットシステムを使った仕様に置き換えると以下のようになります。

対策済コード

<div class="card-deck">

	<div class="row">



		<div class="col-sm-4">

			<div class="card h-100">

				<img class="card-img-top" src="/media/images/img1.jpg" alt="ダミーテキスト">

				<div class="card-body">

					<h2 class="card-title">タイトル1</h2>

					<p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

					<p class="card-text bu"><a href="#">リンクテキスト</a></p>

				</div>

			</div>

		</div>



		<div class="col-sm-4">

			<div class="card h-100">

				<img class="card-img-top" src="/media/images/img2.jpg" alt="ダミーテキスト">

				<div class="card-body">

					<h2 class="card-title">タイトル2</h2>

					<p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

					<p class="card-text bu"><a href="#">リンクテキスト</a></p>

				</div>

			</div>

		</div>



		<div class="col-sm-4">

			<div class="card h-100">

				<img class="card-img-top" src="/media/images/img3.jpg" alt="ダミーテキスト">

				<div class="card-body">

					<h2 class="card-title">タイトル3</h2>

					<p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

					<p class="card-text bu"><a href="#">リンクテキスト</a></p>

				</div>

			</div>

		</div>



	</div>

</div>

特に難しいことはなく基本コードを下記のグリットシステム内に配置し直しているだけです。

<div class="row">



	<div class="col-sm-4">



	</div>



	<div class="col-sm-4">



	</div>



	<div class="col-sm-4">



	</div>



</div>

1点だけ気をつけるのはグリットシステム内にcardを配置するとそれぞれのカードの高さが自動で揃わなくなります。グリットシステムの要素単位では1番高いカードの高さに統一されているため各カードに『h-100』の設定を入れてカードの並びの高さを自動で調整できるように修正しておきましょう。

<div class="card h-100">

後は『col-sm-4』の指定を任意で調整することでレスポンシブデザインでも1行内の列要素数を自由にコントロールすることができます。

1行内の列要素数が異なる場合でもカードの幅を揃える

通常コードの『card-deck』では1行内の最大列要素数を3つで設定しているとき、1行内の列要素数が2つや1つといった異なる列要素数の行がある場合、カード幅が1行の最大横幅にあわせて自動調整されます。

デザイン的にそれでも問題がない場合は特に対策する必要はありませんが端数が出ても最大列要素数3つの時のカードの幅と同じ幅に固定したい場合はグリットシステムを使った対策コードを利用することで幅も固定できます。

今日のdot

Bootstrap4から新規に追加された『card-deck』の機能はカード型デザインの横並びになっている要素の高さ調整を自動で行ってくれるのでとても便利です。しかし、最終のサイトデザインによってはそれなりに扱いづらい部分もあります。

これらの部分が基本コード等で解消されるまではグリットシステムを使ったコードの記述方法にしておく方がレスポンシブデザインに対して色々と融通がきくので良いでしょう。