フォント、枠線、およびイメージを使用して見出しを飾る
見出しはほとんどのWebページで共通しています。 実際、ほとんどのテキスト文書は少なくとも1つの見出しを持つ傾向があるので、読んでいるもののタイトルを知ることができます。 これらの見出しは、HTML見出し要素（h1、h2、h3、h4、h5、およびh6）を使用してコード化されています。
一部のサイトでは、これらの要素を使用せずに見出しがコーディングされていることがあります。 その代わりに、見出しは、特定のクラス属性が追加された段落、またはクラス要素との分割を使用することがあります。 私がこの誤った練習についてよく聞く理由は、デザイナーが「見出しの見た目が気に入らない」ということです。 デフォルトでは、見出しは太字で表示され、ページのテキストの残りの部分よりはるかに大きなフォントサイズで表示されるh1要素やh2要素が大きくなります。 これはこれらの要素のデフォルトの外観に過ぎないことに注意してください！ CSSを使うと、あなたは見出しを見せることができます！ フォントサイズを変更したり、太字などを削除することができます。 見出しは、ページの見出しをコーディングする適切な方法です。 理由はいくつかあります。
DIVとスタイリングではなく見出しタグを使う理由
見出しタグのような検索エンジン
これは、見出しを使用し、正しい順序（h1、h2、h3など）で使用する最善の理由です。 検索エンジンは、見出しタグに含まれるテキストの重み付けが最も高くなるのは、そのテキストに意味値があるためです。 言い換えれば、ページタイトルH1にラベルを付けることによって、検索エンジンのスパイダーにそのページの＃1フォーカスであることを伝えます。 H2の見出しは＃2の強調表示をしています。
見出しを定義するために使用したクラスを覚えていない
すべてのWebページに太字、2em、黄色のH1があることがわかったら、それをスタイルシートで一度定義してやることができます。 6ヵ月後、別のページを追加するときに、ページ上部にH1タグを追加するだけで、他のページに戻ってメインIDの定義に使用したスタイルIDやクラスを確認する必要はありませんヘッドラインとサブヘッド。
彼らは強いページの概要を提供する
アウトラインは、テキストを読みやすくします。 そういうわけで、ほとんどの米国の学校は、論文を書く前に概要を書くように学生に教えました。 ヘッダータグをアウトライン形式で使用すると、テキストは明確な構造で非常に迅速に表示されます。 加えて、概要を提供するためにページアウトラインをレビューするツールがあり、アウトライン構造の見出しタグに依存しています。
あなたのページは、スタイルをオフにしても意味をなさない
誰もがスタイルシートを表示したり使用したりすることはできません（これは検索エンジンがスタイルシートではなくページのコンテンツ（テキスト）を表示します）。 見出しタグを使用すると、見出しにDIVタグではない情報が表示されるため、ページをより使いやすくすることができます。
スクリーンリーダーとウェブサイトのアクセシビリティに役立つ
見出しを適切に使用すると、ドキュメントに論理構造が作成されます。 これはスクリーンリーダーが視覚障害のあるユーザーにサイトを「読む」ために使用するもので、障害のあるユーザーがサイトにアクセスできるようにします。
あなたの見出しのテキストとフォントのスタイルを設定する
見出しタグの「大胆で大胆かつ醜い」問題から離れていく最も簡単な方法は、見た目に合わせてテキストのスタイルを設定することです。 実際、私が新しいウェブサイトで作業しているときは、通常、段落、h1、h2、およびh3スタイルを最初に書いています。 私はたいていフォントファミリーとサイズ/重量だけに固執します。 たとえば、これは新しいサイトのための暫定的なスタイルシートであるかもしれません（これらは使用できるいくつかのスタイルの例です）：
本文、html {margin：0; パディング：0; } p {フォント：1em Arial、Geneva、Helvetica、sans-serif; } h1 {フォント：太字2em "Times New Roman"、Times、serif; } h2 {font：太字1.5em "Times New Roman"、Times、serif; } h3 {font：bold 1.2em Arial、Geneva、Helvetica、sans-serif; }見出しのフォントを変更したり、テキストのスタイルやテキストの色を変更することができます。 これらのすべてがあなたの "醜い"見出しをより活気に満ちたものに変え、あなたのデザインに合わせます。
h1 {font：太字斜体2em / 1em "Times New Roman"、 "MS Serif"、 "New York"、serif; マージン：0; パディング：0; 色：＃e7ce00; }ボーダーズはヘッドラインを飾ることができます
ボーダーはあなたの見出しを改善するのに最適な方法です。 そして境界線は簡単に追加できます。 しかし、境界線を試してみることを忘れないでください。ヘッドラインの両側に境界線は必要ありません。 そして、あなたは単なる退屈なボーダー以上のものを使うことができます。
h1 {font：太字斜体2em / 1em "Times New Roman"、 "MS Serif"、 "New York"、serif; マージン：0; パディング：0; 色：＃e7ce00; ボーダートップ：固体＃e7ce00媒体; border-bottom：点線の＃e7ce00薄い。 幅：600ピクセル。 }興味のあるビジュアルスタイルを紹介するために、見出しの見出しに上下の枠を追加しました。 あなたは、あなたが望むデザインスタイルを達成したいと思うような方法で罫線を追加することができます。
あなたの見出しに背景画像を追加するさらに多くのPizazz
多くのWebサイトには、ページの上部にヘッダーが含まれています。ヘッダーは通常、サイトのタイトルとグラフィックです。 ほとんどの設計者はこれを2つの別々の要素と考えていますが、そうする必要はありません。 グラフィックが見出しを飾るだけの場合は、それを見出しスタイルに追加してみましょう。
h1 {font：太字斜体3em / 1em "Times New Roman"、 "MS Serif"、 "New York"、serif; 背景：#fff url（ "fancyheadline.jpg"）repeat-x bottom; パディング：0.5em 0 90px 0; text-align：center; マージン：0; border-bottom：ソリッド#e7ce00 0.25em; 色：＃e7ce00; }この見出しへのトリックは、私の画像が90ピクセルの高さであることを知っていることです。 そこで、90pxの見出しの下にパディングを追加しました（パディング：0.5 0 90px 0p;）。 余白、線の高さ、およびパディングを使用して再生すると、見出しのテキストが必要な場所に正確に表示されます。
イメージを使用するときに覚えておくべきことの1つは、画面サイズとデバイスに基づいてレイアウトが変化するレスポンシブウェブサイト （必要がある）がある場合、見出しのサイズが常に同じではないということです。 見出しを正確なサイズにする必要がある場合は、問題が発生する可能性があります。 それは、私が一般的にヘッドラインで背景画像を避ける理由の1つです。
見出しの画像の置換
これは、Webデザイナーのためのもう1つの一般的なテクニックです。これは、グラフィカル見出しを作成し、見出しタグのテキストをそのイメージに置き換えることができるためです。 これは真実には、ウェブデザイナーの古典的な習慣で、ごくわずかなフォントにアクセスでき、よりエキゾチックなフォントを自分の仕事に使用したいと思っていました。 ウェブフォントの登場は、デザイナーがサイトにどのようにアプローチするかを大きく変えました。 ヘッドラインは、埋め込まれたフォントをもはや必要とせずに、幅広い種類のフォントと画像に設定できるようになりました。 このように、まだ最新のプラクティスに更新されていない古いサイトのヘッドラインの代わりにCSSイメージが見つかるだけです。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：9/6/17