このページについて
このページではHTMLで使えるh1からh6の見出しタグの使い方を解説しています。
見出しタグの使い方について
そもそもですが今回解説するh1からh6は見出しタグと呼ばれているもので、文章の頭とかにあるようなやつを定義します。これらは数字に意味があります。おおよその意味合いは以下の通りになります。
- h1
- 一番大きな見出し。大体はサイトのタイトル等で使用されます。
- h2
- 記事中で頻繁に使用する見出し。h1に次ぐ一番大きな見出し。
- h3
- 記事中のh2の下で使う見出し。
- h4
- 記事中のh3の下で使います。
- h5
- h4の下で使います。この見出しはかなり細分化しないと使いません。
- h6
- h5の下で使います。ここもh5と同じく、かなり細分化していないと使わないと思います。
大体こんな感じで使い分けています。見出しタグのルールは
- 数字の小さいやつが一番重要
- 数字は順番に大きくなるように使用する
この2つです。なので上でも書きましたがh5とかh6を使う機会はそこまで多くありません。
見出しはCSSで変えれる
見出しはそれぞれCSSで見た目を変えるができます。というより、何も変更していないとただ文字が大きくなる程度で、どこが見出しなのか本文なのか分かりにくいという欠点があります。
オーソドックスな変更は色付きの下線とかですかね。サイトのイメージカラーと合わせることで綺麗に見えたりします。
まずはHTML側から。見出しと本文エリアの違いがわかるようにしただけなので、何の説明も必要なさそうなレベルです。
<h1>見出し1</h1>
<p>本文1</p>
<h2>見出し2</h2>
<p>本文2</p>
<h3>見出し3</h3>
<p>本文3</p>
<h4>見出し4</h4>
<p>本文4</p>これだけだとそれぞれの見出しの数値に応じて文字が大きくなるだけなので、CSSで色をつけたり線をつけたりして見栄えを変えてみます。簡単なサンプルが以下です。
h1{
color: red;
border-bottom: solid 10px;
}
h2{
background-color: aqua;
background-clip: text;
color: transparent;
}
h3{
border-style: dotted;
}
h4{
border-style: outset;
}それぞれ全く違う記述にしました。まずはh1ですが、シンプルにh1全体を赤色にして、下線を10pxで引きました。
h2は背景色を水色にし、テキストをクリップでくり抜き、色を透過しました。これは最終的に「テキストが指定した色で表示される」だけです。ちなみにcolorプロパティで色指定すれば全く同じことができます。
h3はドットの線を表示するだけです。h4は少し特殊な線を表示するだけです。
総括すると以下のようになります。
一番シンプルなのがh1で使っているパターンですかね。あとは角を丸くしたパターンも多いですね。当サイトでも使っていると思います。
background-colorで色を変更するだけだと文字が隠れる場合があるので、白なり黒なりで変えることでみやすくします。そしてpaddingで周囲を少しだけ広くとる事で若干大きくしています。そしてborder-radiusで角を丸くしました。
アレンジの仕方は様々なので色々と試してみると止まらなくなると思います。
まとめ
見出しタグはh1からh6まであり、数値の大きさによって重要度が異なります。基本的にはh1はサイトのタイトルで使用し、h2以降をページ内で使用していきます。
見た目はCSSで色々と変える事ができるので、サイトのイメージに合わせてみましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。