閉じる

HTML 見出しの使い方(h1〜h6)+シンプルな見出しのデザイン例(初心者向け)

見出しの作成方法、用途、見出しデザインを初心者の方向けに紹介。 見出しの基本的な作成方法、用途、ルールを学ぶことができます。 また、コピペで使えるシンプルな見出しデザインを10点紹介。 全てにサンプルコードがついているので実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「見出しってどうやって使うの・・?」
「見出しの使い方のルールってあるの・・?」「コピペで簡単に使えるシンプルな見出しデザインが欲しい・・!」
その様に考えている、初心者WEB制作者の方も多いのではないでしょうか?
私も最初の頃は、「見出しの使い方にルールがあることも知らない」「見出しはなんとなくわかったけど、デザインを変えてみたい」など困っていた時期がありました。
今回は、「HTMLの見出しの使い方」「見出しのルール」「コピペで使えるシンプルな見出しデザインの紹介」を中心に、初心者WEB制作者の方むけに解説していきます。

見出しタグとは?

HTML見出しタグとは、WEBページ内の見出しを作るためのタグです。
見出しタグは、6種類あり「h1」「h2」「h3」「h4」「h5」「h6」の6 種類です。

見出しタグ用途

サンプルコード表示結果

HTMLサンプルコード

h1から順番に見出しの重要度・表示の大きさ・役割などが違います。
h1:ページで最も伝えたい内容・タイトル
h2:中見出し
h3:小見出し
h4〜h6:上記よりもさらに章を細かくしたい場合 基本的には、h1〜h4までが使用されることが多いです、h1が1番重要度が高く、数字が大きくなるに従って、重要度が下がると考えて問題ないです。
また、見出しタグを使う理由として、webページ内の情報を整理することができ、検索エンジンにページの情報を正しく伝える事もできます。
本記事では見出しタグを下記のように使用しています。

※h1(タイトル)

※h2(中見出し)

※h3(小見出し)

見出しタグのルール

1.h1タグの使用は1ページ(1記事)1回だけ
h1タグの使用は1回だけにしましょう、h1タグの用途は「タイトルやページで1番伝えたいもの」である為、h1タグが複数あると検索エンジンにも「何を伝えたいのか?」の意図を伝える事ができません。

2.h2〜h6は複数使用OK
h2以下の見出しは何回使ってもOKです。h1だけ気をつけましょう。

3.h1〜h6の使用順 基本的にh1から順番に使っていきます。文字の大きさ(フォントサイズ)が良いからという理由で、h3から使用したりするのは避けましょう。

4.画像を見出しにする時はalt属性を使う
画像を見出しにする時は、「alt属性」を記入するようにしましょう。 <img src=”logo.jpg” alt=”犬の画像”> 理由は、検索エンジンは全ての画像を読み取れるわけではありません「alt属性」の記入により、見出し画像の情報を検索エンジンに伝える為です。

5.一目でわかる見出しにする
見出しは内容が一目でわかる、わかりやすいもの記入しましょう。 わかりずらい長い文章などを、見出しに記入してしまうと、サイト閲覧者にも検索エンジにも内容を上手く伝える事ができません。

6.見出しの下に文章を入れる
見出しだけ記事を書かないようにしましょう。見出しはあくまで見出しで、その内容を一言で説明したものです。必ず見出しの内容の文章をセットで記入してください。

7.見た目を変える(デザイン)都合で見出しタグは使用しない
「文字の大きさはh4がちょうどよいから、h4を使用する」といった使用は避けましょう、見出しタグは論理構造に適しているかで使用判断をし、見た目はCSSで調整しましょう。

ここまでは見出しタグの基本的な使い方・ルールについて解説してきました。 次は、コピペで使える初心者向けのシンプルな見出しタグのデザインを紹介します

見出しタグのカスタマイズ

ここからは、初心者向けにwebページによくあるシンプルな見出しデザインを紹介していきます。シンプルなデザインに絞り解説していきます。
もっと種類を多く詳しく知りたい中級者の方は、下記を参考にしてみてください。

https://jajaaan.co.jp/css/css-headline/

シンプルな下線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな下線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
2px→線の太さ solid→線の種類 black→色

点線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな点線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
2px→線の太さ dotted→線の種類 black→色

波線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな破線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
2px→線の太さ dashed→線の種類 black→色

2重線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説 シンプルな2重線を引いたデザインです。 boder-bottomを指定しお好みに合わせて値を変更していきます。 6px→線の太さ double→線の種類 black→色

上下に線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルに上下線を引いたデザインです。
border-top boder-bottomを指定しお好みに合わせて値を変更していきます。
padding: 0.5em 0;→上下の余白 3px→線の太さ solid→線の種類 red→色

囲い線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな囲い線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 3px→線の太さ solid→線の種類 red→色

囲み点線のデザイン

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな囲み点線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 3px→線の太さ dotted→線の種類 red→色

囲み破線のデザイン

※サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな囲み波線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 3px→線の太さ dashed→線の種類 red→色

囲み2重線

サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
シンプルな囲み2重線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 6px→線の太さ double→線の種類 red→色

途中で色の変わる線

※サンプルコード表示結果

見出しデザイン

HTMLサンプルコード

CSSサンプルコード

※解説
途中で色の変わる線は、after擬似要素を使用します。
h2にborder-bottomを指定し、position: relative;で親ポジションとします。
h2:after、position: absolute→子ポジション border-bottomで線を引き width→after要素で指定した線の長さを指定します。

まとめ

今回は初心者の方向けに、「HTMLの見出しの使い方」「見出しのルール」「コピペで使えるシンプルな見出しデザインの紹介」を中心に解説してきました。
最後にポイントをまとめます。

・見出しタグは<h1>〜<h6>までの6種類あり、h1(重要度高)>h6(重要度低い)

・見出しタグのルールは7つありました
 1.h1タグの使用は1ページ(1記事)1回だけ
 2.h2〜h6は複数使用OK
 3.h1〜h6の使用順(順番に)
 4.画像を見出しにする時はalt属性を使う
 5.一目でわかる見出しにする
 6.見出しの下に文章を入れる
 7.見た目を変える(デザイン)の都合で見出しタグは使用しない

・見出しのデザインはコピペで簡単に変える事ができる

いかがだったでしょうか?
見出しにもルールがあり、ルールを知らずに作り続けてしまっている中級web製作者の方もいます。今のうちにルールを知りweb制作の実力をさらにあげていきましょう

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。