Bootstrap ページタイトル

この文章では、Bootstrap でページタイトルを作成するために使用される様々な HTML 要素と、Bootstrap の組み込みクラスとユーティリティを使用してタイトルの外観をカスタマイズする方法について説明します。

セマンティックなタイトル

HTML のセマンティック要素 (<h1> から <h6>) は、ページタイトルにおいて重要な役割を果たします。これらの要素は、タイトルの階層構造と重要度をブラウザと検索エンジンに伝えるために使用されます。

セマンティックな要素を使用することには、次のような利点があります。

• アクセシビリティの向上: スクリーンリーダーなどの支援技術は、セマンティックな要素を使用してページの構造を理解し、ユーザーに情報を提供します。
• SEO の向上: 検索エンジンは、セマンティックな要素を使用してページのコンテンツを理解し、検索結果のランキングを決定します。

表示タイトル

Bootstrap の .display-* クラスを使用すると、より目立ち、大きなサイズのページタイトルを作成できます。これらのクラスは、デフォルトのタイトルスタイルよりも大きく、太字のテキストを表示します。

使用可能な .display-* クラスを以下の表に示します。

これらのクラスを使用して、タイトルのサイズと太さをカスタマイズする方法の例を次に示します。

<h1 class="display-1">タイトル 1</h1>
<h2 class="display-4">タイトル 2</h2>

タイトルのカスタマイズ

Bootstrap のカラー、マージン、パディングユーティリティクラスを使用して、タイトルの外観をさらにカスタマイズできます。

たとえば、タイトルの色を変更するには、次のようにします。

<h1 class="text-primary">プライマリカラーのタイトル</h1>
<h2 class="text-danger">危険を表す赤色のタイトル</h2>

タイトルにマージンやパディングを追加するには、次のようにします。

<h1 class="mt-5 mb-3">上下にマージンを持つタイトル</h1>
<h2 class="p-2">パディングを持つタイトル</h2>

タイトルの補助テキスト

タイトルに補助テキストを追加するには、<small> 要素または .lead クラスを使用できます。

• <small> 要素は、より小さなサイズの副題を作成するために使用されます。
• .lead クラスは、より大きく、目を引く紹介文を作成するために使用されます。

<h1>メインタイトル <small>副題</small></h1>
<p class="lead">これは、より大きく、目を引く紹介文です。</p>

例

上記の要素とクラスを組み合わせて、様々なページタイトルスタイルを作成する方法の例を次に示します。

<h1 class="display-3 text-center mb-4">ウェブサイトへようこそ</h1>

<h2 class="text-primary">セクションタイトル</h2>
<p class="lead">このセクションの紹介文です。</p>

<h3>サブセクションタイトル <small>副題</small></h3>
<p>サブセクションのコンテンツです。</p>

関連QA

1. Q: <h1> 要素はページにいくつ使用できますか？

   A: <h1> 要素はページに1つだけ使用することをお勧めします。ただし、HTML5ではセクションごとに<h1>要素を使用することが可能です。

2. Q: タイトルのフォントサイズを変更するにはどうすればよいですか？

   A: Bootstrapのユーティリティクラス（例：.fs-1, .fs-2など）を使用してフォントサイズを変更できます。または、カスタムCSSを使用してフォントサイズを指定することもできます。

3. Q: タイトルを特定のブレークポイントでのみ表示するにはどうすればよいですか？

   A: Bootstrapの表示ユーティリティクラス（例：.d-none .d-md-block）を使用して、特定のブレークポイントでのみタイトルを表示または非表示にすることができます。