Bootstrapを使用した円形画像の作成方法

2024-02-18 11:21 Bootstrap 円形画像 CSS

  1. Bootstrapの導入: 最初に、HTMLファイルでBootstrapを使用できるように設定する必要があります。以下のCDNリンクをHTMLファイルのセクション内に追加します。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  2. 円形画像の作成: Bootstrapでは、CSSのクラスを使用して円形の画像を作成することができます。以下のようなHTMLコードを使用します。

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

    このコードでは、rounded-circleクラスを<img>要素に追加しています。これにより、画像が円形に表示されます。また、alt属性を使用して、画像の代替テキストを指定することもできます。

  3. 他のオプション: Bootstrapでは、さまざまなオプションを使用して円形画像のスタイルをカスタマイズすることもできます。以下にいくつかの例を示します。

    <!-- 大きさの指定 -->
<img src="画像のURL" class="rounded-circle" style="width: 150px; height: 150px;" alt="円形画像">
<!-- 余白の追加 -->
<img src="画像のURL" class="rounded-circle p-2" alt="円形画像">
<!-- 影の追加 -->
<img src="画像のURL" class="rounded-circle shadow" alt="円形画像">

    上記のコードでは、style属性を使用して画像のサイズを指定しています。また、p-2クラスを使用すると、画像の周囲に余白を追加できます。さらに、shadowクラスを使用すると、画像に影を追加できます。

これで、Bootstrapを使用して円形の画像を作成する方法がわかりました。適宜、必要なスタイルやオプションを選択して使用してください。