Bootstrapの便利さ

はてなブログを始めとしていろいろなブログやCMSのサービスは、それ自身でデザイン系の機能を持っていますから、 さらにBootstrapを入れ込むって特に意味は無いかなと思いながらも興味本位で入れていました。

で、ふと思ったのですが、例えば上のような絵の配置です。自前でサイト構築する場合はメディアクエリで ウインドウサイズに合わせた画像幅設定できるのですが、メディアクエリで設定するのは面倒なサービスもあります。

このような時、Bootstrapのグリッドシステムを使えばスマホサイズのときの画像幅はこれ、タブレットサイズのときは、、、みたい に柔軟に設定できます！

上のいいねアイコンは、ウインドウの横幅が小から大に変わるにつれ、表示幅が（ウインドウ横幅に対して）1/3→1/4→1/6→1/12と 変化する例です。Bootstrapを読み込んでおけば以下のようなコードでOKです。

<div class="container">
	<div class="row justify-content-center">
		<div class="col-4 col-sm-3 col-md-2 col-xl-1">
			<img src="画像のURL">
		</div>
	</div>
</div>