bootstrapのタイトル

2024年6月8日

Bootstrapでは、異なるスタイルのタイトルに対応するために、display クラスや h タグのクラスを使用することが一般的です。以下はいくつかの例です。

1. デフォルトのタイトルスタイル:
   Bootstrapでは、通常のHTMLのタイトルタグ (<h1>, <h2>, …) にもデフォルトのスタイルが適用されます。

   html
   <h1>タイトル</h1>
   <h2>サブタイトル</h2>
   

2. display クラスを使用:
   display クラスを使用すると、大きな見出しを簡単に作成できます。

   html
   <h1 class="display-1">大見出し</h1>
   <h2 class="display-2">中見出し</h2>
   <h3 class="display-3">小見出し</h3>
   

3. カスタムスタイル:
   必要に応じて、独自のスタイルを適用することもできます。

   html
   <h2 class="my-custom-title">カスタムタイトル</h2>
   

   そして、カスタムスタイルを追加するCSS:

   css
   .my-custom-title {
       color: #007bff; /* テキストの色を変更 */
       font-size: 2rem; /* フォントサイズを変更 */
       /* 他にも必要なスタイルを追加 */
   }
   

これらの例を参考にして、Bootstrapのスタイルまたは独自のスタイルを使用して、プロジェクトのデザインに適したタイトルを作成できます。選んだスタイルがデザインに合っているか確認して調整してください。