CSSで派手な見出しを作る
フォント、罫線、画像を使用して見出しを装飾する
目次拡大- 部門ではなく見出しタグを使用する理由
- 使用したクラスを覚えておく必要はありません
- 強力なページ アウトラインを提供する
- スタイルがオフになっていても、あなたのページは理にかなっています
- スクリーン リーダーと Web サイトのアクセシビリティに役立ちます
- 見出しのテキストとフォントのスタイルを設定する
- ボーダーは見出しを飾ることができます
- 見出しに背景画像を追加する
- 見出しの画像置換
見出しは、ほとんどの Web ページで一般的です。実際、ほとんどすべてのテキスト ドキュメントには、読んでいるもののタイトルがわかるように、少なくとも 1 つの見出しがある傾向があります。これらの見出しは、 HTML 見出し要素 — h1、h2、h3、h4、h5、および h6。
一部のサイトでは、これらの要素を使用せずに見出しがコーディングされていることがあります。代わりに、見出しは、特定のクラス属性が追加された段落、またはクラス要素を持つ分割を使用できます。この間違ったやり方についてよく耳にする理由は、デザイナーが「見出しの見た目が気に入らない」からです。デフォルトでは、見出しは太字で表示され、サイズが大きくなります。特に、ページのテキストの残りの部分よりもはるかに大きなフォント サイズで表示される h1 および h2 要素です。これはこれらの要素のデフォルトの外観にすぎないことに注意してください。と CSS 、見出しの外観を自由に変更できます。フォント サイズの変更、太字の削除などを行うことができます。見出しは、ページの見出しをコーディングする適切な方法です。ここにいくつかの理由があります。
部門ではなく見出しタグを使用する理由
これが、見出しを使用し、正しい順序で使用する最も良い理由です (つまり、h1、次に h2、次に h3 など)。 サーチエンジン 見出しタグ内に含まれるテキストに最大の重みを与えるのは、そのテキストにセマンティックな値があるためです。つまり、ページ タイトルに H1 というラベルを付けることで、検索エンジンのスパイダーに、それがページの一番の焦点であることを伝えます。 H2 見出しには 2 番目の強調があります。
見出しを定義するために使用したクラスを覚えておく必要はありません
すべての Web ページに太字、2em、黄色の H1 があることがわかっている場合は、スタイルシートでそれを定義するだけで完了です。 6 か月後、別のページを追加するときは、ページの上部に H1 タグを追加するだけです。他のページに戻って、メインの定義に使用したスタイル ID またはクラスを確認する必要はありません。見出しと小見出し。
強力なページ アウトラインを提供する
アウトラインはテキストを読みやすくします。そのため、米国のほとんどの学校では、論文を書く前に概要を書くよう生徒に教えています。見出しタグをアウトライン形式で使用すると、テキストの構造が明確になり、すぐに明らかになります。さらに、概要を提供するためにページのアウトラインを確認できるツールがあり、これらはアウトライン構造の見出しタグに依存しています。
スタイルがオフになっていても、あなたのページは理にかなっています
誰もがスタイル シートを表示または使用できるわけではありません (これは #1 に戻ります — 検索エンジンは、スタイル シートではなく、ページのコンテンツ (テキスト) を表示します)。見出しタグを使用すると、見出しが次のような情報を提供するため、ページのアクセシビリティが向上します。 DIV タグ しません。
スクリーン リーダーと Web サイトのアクセシビリティに役立ちます
見出しを適切に使用すると、ドキュメントの論理構造が作成されます。これは、スクリーン リーダーが視覚障害のあるユーザーにサイトを「読み上げる」ために使用するものであり、障害のあるユーザーがサイトにアクセスできるようにします。
見出しのテキストとフォントのスタイルを設定する
見出しタグの「大きく、太字で、醜い」問題から逃れる最も簡単な方法は、テキストを自分が望むようにスタイルすることです。実際、新しい Web サイトで作業するときは、通常、最初に段落、h1、h2、および h3 スタイルを記述するのが最善です。フォント ファミリーとサイズ/ウェイトだけに固執します。たとえば、これは新しいサイト用の暫定的なスタイル シートである可能性があります (これらは使用できるスタイルの例にすぎません)。
を変更できます。 フォント 見出しを変更したり、テキスト スタイルやテキストの色を変更したりできます。これらはすべて、「醜い」見出しをより活気に満ちたものに変え、デザインに合わせます。
ボーダーは見出しを飾ることができます
罫線は見出しを改善する優れた方法であり、簡単に追加できます。ただし、境界線を試すことを忘れないでください。見出しの両側に境界線は必要ありません。また、単純な退屈な境界線以上のものを使用できます。
サンプルの見出しに上下の境界線を追加して、興味深いビジュアル スタイルを導入しました。必要なデザイン スタイルを実現するために、任意の方法で境界線を追加できます。
見出しに背景画像を追加して、さらに魅力的にする
多くの Web サイトには、ページの上部に見出し (通常はサイトのタイトルとグラフィック) を含むヘッダー セクションがあります。ほとんどのデザイナーは、これを 2 つの別個の要素と考えていますが、そうする必要はありません。グラフィックが見出しを飾るためだけにある場合は、見出しスタイルに追加してみませんか?
この見出しの秘訣は、画像の高さが 90 ピクセルであることを知っていることです。そのため、見出しの下部に 90px のパディングを追加しました (パディング: 0.5 0 90px 0p;)。余白、行の高さ、およびパディングを調整して、見出しのテキストを目的の場所に正確に表示することができます。
画像を使用する際に覚えておくべきことの 1 つは、 レスポンシブ ウェブサイト (そうするべきです) 画面のサイズとデバイスに基づいてレイアウトが変化するため、見出しが常に同じサイズになるとは限りません。見出しを正確なサイズにする必要がある場合は、問題が発生する可能性があります。これが、見出しに背景画像を避けるのが一般的である理由の 1 つです。
見出しの画像置換
これは、グラフィカルな見出しを作成し、見出しタグのテキストをその画像に置き換えることができるため、Web デザイナーに人気のあるもう 1 つの手法です。これは、ごく少数のフォントしか使用できず、より風変わりなフォントを作品に使用したいと考えていた Web デザイナーの昔ながらの慣習です。 Web フォントの台頭により、デザイナーがサイトにアプローチする方法が大きく変わりました。見出しはさまざまなフォントで設定できるようになり、それらのフォントが埋め込まれた画像は不要になりました。そのため、最新のプラクティスにまだ更新されていない古いサイトの見出しの CSS 画像置換のみが見つかります。
ジェレミー・ジラード編集