IT・WEB・PC事業を行う9BOX IT・WEB・PC事業を行う9BOX

見出しタグとは?hタグの使い方と書き方

見出しタグとは?hタグの使い方と書き方

Webサイトで使われる見出しタグとは?

hタグの使い方、見出しの装飾を施したホームページデザインサンプルをご紹介します。

見出しタグとは?

ホームページの見出しタグとはhタグで囲まれた題名を言います。見出しを見て下に続くコンテンツを見てくれるか判断される重要な要素です。

hタグはh1からh6まで存在し数字が小さい順に重要度の高さと比例します。

hタグの使い方

h1タグの使い方
  • 1ページに1回だけ使える
  • 必ずh1タグを使ったあと書けるhタグはh2であること
  • ページを1番にまとめた要点であること
  • フォントサイズが1番大きいことがふさわしい
h2~h6タグの使い方
  • 何回でも使える
  • h2→h3と順番に使う
  • 数字が小さい順にフォントサイズの大きさと比例することが好ましい

hタグの使用例

  1. <h1>自動車専門店</h1>
  2. <p>自動車についての説明</p>
  3.  <h2>中古車販売</h2>
  4.  <p>中古車についての説明</p>
  5.   <h3>日本車一覧</h3>
  6.   <p>日本車一覧についての説明</p>
  7.   <h3>外車一覧</h3>
  8.   <p>外車一覧についての説明</p>
  9.  <h2>新車販売</h2>
  10.  <p>新車についての説明</p>
  11.   <h3>日本車一覧</h3>
  12.   <p>日本車一覧についての説明</p>
  13.   <h3>外車一覧</h3>
  14.   <p>外車一覧についての説明</p>

読まれる見出しの書き方

決まった見出しの書き方はありませんが、見る人が見やすい書き方のポイントを説明します。

文字数は少なすぎず多すぎず

見出しが例えば3文字程度だと何について書いているのかわかりません。または20文字を超えて多すぎても読む気をなくしてしまいます。

見る人はまず見出しを見て文章に進むので文字数は少なすぎず多すぎない程度に書くことがポイントです。

質問に対する答えを書く

検索して見に来る人は何かを知りたくて検索エンジンにきています。

その為答えが見つからなそうだと他のページへ行ってしまいます。

質問に対する答えを一言で伝えられるように見出しを書くことがポイントです。

抽象的ではなく具体的に書く

あいまいな回答をする人と具体的に回答をする方2人が営業マンだった場合具体的に回答する人の方が業績がよいと思います。

その考えと同じでホームページを見に来た人にも具体的に回答できている見出しのほうが見やすい書き方と言えます。

見出しの装飾

見出しに下線を引いたり背景色を加えることで目に留まる見出しをつくることができます。

サンプルを記載致しますので色を変えたり文字の大きさを変えてお使いください。

下線を引いた見出し

下線を引いた見出し
  1. h2 {
  2.  border-bottom: solid 1px #000;
  3. }

文字を中央揃えで下線に点線

文字を中央揃えで下線に点線
  1. h2 {
  2.  border-bottom: dashed 1px #000;
  3.  text-align: center;
  4. }

背景色を加える

背景色を加える
  1. h2 {
  2.  background-color: #1b00ff;
  3.  color: #fff;
  4.  padding: 5px;
  5. }

背景色と左のみ線

背景色と左のみ線
  1. h2 {
  2.  background-color: #ffa7cc;
  3.  border-left: solid 5px #ff006a;
  4.  color: #fff;
  5.  padding: 5px;
  6. }

アイコンを付ける

fontawesomeが必要です。

アイコンを付ける
  1. h2 {
  2.  border-bottom: solid 1px #ff006a;
  3.  padding: 5px;
  4. }
  5. h2:before {
  6.  font-family: FontAwesome;
  7.  content: "\f14a\00a0";
  8.  color: #ff7f7f;
  9. }

うっすら消えてく線

うっすら消えてく線
  1. h2 {
  2.  font-size: 24px;
  3.  font-size: 2.4rem;
  4.  clear: both;
  5.  position: relative;
  6.  width: 100%;
  7.  margin: 40px 0;
  8.  padding: 10px;
  9.  text-align: center;
  10.  letter-spacing: 2px;
  11. }
  12. h2::before,
  13. h2::after {
  14.  content: '';
  15.  position: absolute;
  16.  bottom: 0;
  17.  left: 0;
  18.  right: 0;
  19.  width: 100%;
  20.  height: 1px;
  21.  margin: 0 auto;
  22.  text-align: center;
  23.  background-image: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
  24.  background-image: linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  25.  background-position: center;
  26.  background-repeat: no-repeat
  27. }
  28. h2::before {
  29.  top: 0;
  30. }
  31. h2::after {
  32.  bottom: 0;
  33. }

お問合せ

お気軽にお問合せ下さい。

  • 電話番号 0285-35-4987
  • メール info@9box.jp