<h3>のフォントを変えたいbootstrap

2024年6月8日

Bootstrapでは、フォントのスタイルを変更するために、class属性や直接CSSスタイルを使用することができます。以下は、<h3>要素のフォントを変更する例です。

html
<!-- Bootstrapのコンテナ -->
<div class="container">
    <!-- h3要素にtext-primaryクラスを追加して、色を変更 -->
    <h3 class="text-primary">This is a Bootstrap Heading</h3>
    
    <!-- h3要素にfont-weight-boldクラスを追加して、太字にする -->
    <h3 class="font-weight-bold">This is a Bootstrap Heading with Bold Font</h3>
    
    <!-- h3要素に別のフォントを指定する -->
    <h3 style="font-family: 'Arial', sans-serif;">This is a Bootstrap Heading with Custom Font</h3>
</div>

上記の例では、text-primaryクラスを使用して文字色を変更し、font-weight-boldクラスを使用して太字にしています。また、style属性を使用して直接フォントを指定しています。このとき、font-familyには好みのフォントを指定できます。

もし特定のフォントを複数の場所で使用する場合、CSSファイル内でクラスを定義し、それを適用することもできます。例えば、以下のようなCSSを用意します。

css
/* styles.css */

/* カスタムフォントのクラス定義 */
.custom-font {
    font-family: 'Arial', sans-serif;
}

そして、HTML内で次のようにクラスを使用します。

html
<!-- Bootstrapのコンテナ -->
<div class="container">
    <!-- カスタムフォントのクラスを適用 -->
    <h3 class="custom-font">This is a Bootstrap Heading with Custom Font</h3>
</div>

これにより、カスタムフォントのスタイルが再利用できます。