Bootstrap4 画像の形状

この記事では、Bootstrap4 で定義済みの CSS クラスを使用して、画像を円形、角丸、サムネイルなど、様々な形に整形する方法について解説します。

---

1. 円形画像

.rounded-circle クラスを使用すると、画像を完全な円形に整形することができます。

ポイント: 最適な表示結果を得るには、画像は正方形である必要があります。


<img src="..." class="rounded-circle" alt="円形画像の例">

.rounded クラスを使用すると、画像の角に丸みを帯びさせることができます。

このクラスは、画像に border-radius: 0.25rem; のスタイルを適用することで、角丸の効果を実現しています。


<img src="..." class="rounded" alt="角丸画像の例">

.img-thumbnail クラスを使用すると、画像をサムネイルとして表示することができます。

このクラスは、画像に角丸の枠線と、少しの余白を追加します。


<img src="..." class="img-thumbnail" alt="サムネイル画像の例">

上記以外にも、Bootstrap4 では様々な画像クラスが提供されています。以下の表に、主要なクラスとその効果をまとめます。

クラス	効果
`.img-fluid`	画像をレスポンシブ化し、親要素の幅に合わせて縮小します。
`.img-thumbnail`	角丸の枠線と余白を追加し、サムネイルとして表示します。
`.rounded`	角丸を適用します。
`.rounded-circle`	円形にします。

これらのクラスを組み合わせることで、より柔軟に画像の形状を調整することができます。詳細については、公式ドキュメントを参照してください。

A1: 画像が正方形でないことが原因と考えられます。.rounded-circle は正方形の画像に適用することで、完全な円形になります。画像編集ソフトなどで、あらかじめ画像を正方形にトリミングしておきましょう。

A2: はい、border-radius プロパティを直接指定することで、角丸の大きさを調整することができます。例えば、border-radius: 10px; とすると、角丸の半径が 10px になります。

A3: はい、独自の CSS を定義することで、独自の画像クラスを作成することができます。Bootstrap のクラスを参考に、必要なスタイルを定義してみましょう。