- border-radiusクラスの使用: Bootstrap 5では、border-radiusクラスを使用して要素に角丸を適用することができます。たとえば、次のようにdiv要素にborder-radiusクラスを追加することで、角丸のスタイルを適用できます。
<div class="border-radius">内容</div>- カードコンポーネントの使用: Bootstrap 5には、カードコンポーネントが用意されており、これを使用することで簡単に角丸のデザインを実現できます。以下に例を示します。
<div class="card">
<div class="card-body">
内容
</div>
</div>- CSSカスタマイズ: Bootstrap 5では、CSS変数を使用して要素のスタイルをカスタマイズすることもできます。以下のように、要素に対してカスタムのborder-radius値を指定することで、角丸のデザインを実現できます。
.custom-rounded {
border-radius: 10px;
}<div class="custom-rounded">内容</div>- インラインスタイルの使用: 特定の要素に対して直接インラインスタイルを指定することも可能です。以下は、div要素に対してインラインスタイルでborder-radiusを指定する例です。
<div style="border-radius: 10px;">内容</div>これらの方法を使用することで、Bootstrap 5で角丸のデザインを実装することができます。適用したい要素やデザインの要件に応じて、最適な方法を選択してください。