Bootstrap 5を使用して角丸画像を作成する方法

1. HTMLとCSSを使用して角丸画像を作成する方法:

   • まず、HTMLファイルを作成し、画像を表示するための<img>タグを追加します。

   <img src="画像のURL" alt="画像の説明">

   • 次に、CSSを使用して画像に角丸スタイルを適用します。Bootstrap 5では、roundedクラスを使用することで角丸スタイルを適用できます。

   <style>
   img {
    border-radius: 10px; /* 角丸の半径を指定 */
   }
   </style>

2. Bootstrap 5のクラスを使用して角丸画像を作成する方法:

   • Bootstrap 5には、角丸スタイルを適用するための便利なクラスが用意されています。以下のクラスを使用することで、角丸画像を作成できます。

   <img src="画像のURL" alt="画像の説明" class="rounded">

   • 上記の例では、roundedクラスを使用して画像に角丸スタイルを適用しています。

以上がBootstrap 5を使用して角丸画像を作成する方法の例です。これらの方法を使えば、簡単に角丸画像を作成することができます。詳細な使い方や他のオプションについては、Bootstrap 5の公式ドキュメントを参照してください。