タイトル・URLをコピー
記事タイトルHTML 見出しの使い方(h1〜h6)+シンプルな見出しのデザイン例(初心者向け)
記事URLhttps://digitor.jp/textbook/html-heading/
記事タイトルHTML 見出しの使い方(h1〜h6)+シンプルな見出しのデザイン例(初心者向け)
記事URLhttps://digitor.jp/textbook/html-heading/
POINTこの記事をざっくり言うと
HTMLで見出し(h1〜h6)の用途・ルールがわかるようになる。
見出しを実践的に作成できるようになる。
各用途にあったシンプルな見出しデザインをコピペで使えるようになる。
こんにちは!
最近、WEB制作をはじめたけど「見出しってどうやって使うの・・?」
「見出しの使い方のルールってあるの・・?」「コピペで簡単に使えるシンプルな見出しデザインが欲しい・・!」その様に考えている、初心者WEB制作者の方も多いのではないでしょうか?
私も最初の頃は、「見出しの使い方にルールがあることも知らない」「見出しはなんとなくわかったけど、デザインを変えてみたい」など困っていた時期がありました。
今回は、「HTMLの見出しの使い方」「見出しのルール」「コピペで使えるシンプルな見出しデザインの紹介」を中心に、初心者WEB制作者の方むけに解説していきます。
見出しタグとは?
HTML見出しタグとは、WEBページ内の見出しを作るためのタグです。
見出しタグは、6種類あり「h1」「h2」「h3」「h4」「h5」「h6」の6
種類です。
見出しタグ用途
サンプルコード表示結果
HTMLサンプルコード
|
<h1>1番大きな見出し</h1> <h2>2番目に大きな見出し</h2> <h3>3番目に大きな見出し</h3> <h4>4番目に大きな見出し</h4> <h5>5番目に大きな見出し</h5> <h6>6番目に大きな見出し</h6> |
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サンプルコード
|
h2 { border-bottom: 2px solid black; } |
※解説
シンプルな下線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
2px→線の太さ solid→線の種類 black→色
点線のデザイン
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { border-bottom: 2px dotted black; } |
※解説
シンプルな点線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
2px→線の太さ dotted→線の種類 black→色
波線のデザイン
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { border-bottom: 2px dashed black; } |
※解説
シンプルな破線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
2px→線の太さ dashed→線の種類 black→色
2重線のデザイン
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { border-bottom: 6px double black; } |
※解説
シンプルな2重線を引いたデザインです。
boder-bottomを指定しお好みに合わせて値を変更していきます。
6px→線の太さ double→線の種類 black→色
上下に線のデザイン
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { padding: 0.5em 0; border-top: solid 3px red; border-bottom: solid 3px red; } |
※解説
シンプルに上下線を引いたデザインです。
border-top boder-bottomを指定しお好みに合わせて値を変更していきます。
padding: 0.5em 0;→上下の余白 3px→線の太さ solid→線の種類 red→色
囲い線のデザイン
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { padding: 0.5em 1em; border: 3px solid red; } |
※解説
シンプルな囲い線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 3px→線の太さ solid→線の種類 red→色
囲み点線のデザイン
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { padding: 0.5em 1em; border: 3px dotted red; } |
※解説
シンプルな囲み点線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 3px→線の太さ dotted→線の種類 red→色
囲み破線のデザイン
※サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2{ padding: 0.5em 1em; border: 3px dashed red; } |
※解説
シンプルな囲み波線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 3px→線の太さ dashed→線の種類 red→色
囲み2重線
サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { padding: 0.5em 1em; border: 6px double red; } |
※解説
シンプルな囲み2重線のデザインです。
border:を指定しお好みに合わせて値を変更していきます。
padding: 0.5em 1em;→上下の余白 6px→線の太さ double→線の種類 red→色
途中で色の変わる線
※サンプルコード表示結果
HTMLサンプルコード
CSSサンプルコード
|
h2 { border-bottom: solid 3px red; position: relative; } h2:after { position: absolute; content: " "; display: block; border-bottom: solid 3px blue; bottom: -3px; width: 30%; } |
※解説
途中で色の変わる線は、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制作の実力をさらにあげていきましょう
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルHTML 見出しの使い方(h1〜h6)+シンプルな見出しのデザイン例(初心者向け)
記事URLhttps://digitor.jp/textbook/html-heading/
記事タイトルHTML 見出しの使い方(h1〜h6)+シンプルな見出しのデザイン例(初心者向け)
記事URLhttps://digitor.jp/textbook/html-heading/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。