VIDEO LESSON

HTMLのh4タグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:46動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の七十二本目は、エイチフォー、タグです。
0:07エイチフォーは、エイチワンからエイチシックスまで六段階ある見出しの中で、
0:11四番目の深さにあたる第四階層を担当します。
0:15エイチスリーで作った節を、さらに小さなまとまりに分けたいときに使う見出しです。
0:19長い記事やマニュアルでは出番が多く、内容を細かく整理する要になります。
0:24今回は、その役割と正しい使い方を、順番に確認していきましょう。
0:28見出しの階層全体の中で、自分の位置を意識することが大切です。
0:32焦らず一歩ずつ進めていきましょう。
0:34まず、見出し全体の中での位置を押さえます。
0:37エイチワンが文書全体を表す最も大きな見出しで、エイチツー、エイチスリーと、
0:42数字が増えるごとに一段ずつ下の階層になります。
0:46エイチフォーは、そのエイチスリーのすぐ下に置かれます。
0:51本でいえば、章の中の節を、さらに項目ごとに分けた題名にあたります。
0:56大切なのは、見出しだけを順に拾って読んでも、文章の流れがつかめることです。
1:01題名は内容が具体的に伝わる言葉にし、階層を飛ばさず順番に深くしていくのが基本です。
1:08この階層の考え方は、目次を作るときにもそのまま役立ちます。
1:12番号と階層を常にセットで覚えておくと迷いません。
1:16基本の書き方を確認します。
1:18エイチフォーは、開始タグと終了タグを両方書いて、その間に見出しの文章をはさみます。
1:25画面の例は記事のコード例と同じ形で、見出しの直後に段落を置いて、その節の説明を続けています。
1:33この教材では、開始タグと終了タグを省略せずに明示する書き方で統一します。
1:39置き場所はボディの中です。
1:41見出しの中には基本的に短いテキストを入れ、長い文章や別の見出しを入れ子にしないようにします。
1:49まずはこの形を正確に書けることが、すべての土台になります。
1:54短い見出しほど、読み手に内容が素早く伝わる傾向があります。
1:59書き方が安定すると、後の学習もぐっと楽になります。
2:03では、どんな場面で使うのでしょうか。
2:06代表的なのは、エイチスリーで作った節を、さらに二つ、三つに分けたいときです。
2:13たとえば申し込み手順という節の中で、フォームの入力と内容の確認を分けて説明する、
2:17といった使い方です。
2:21逆に、エイチスリー自体を使っていない文書で、いきなりエイチフォーだけが現れる場面は、
2:25まずありません。
2:30見出しは、見出しだけを読んでも文章の流れが分かる題名にすることが大切です。
2:36必要かどうかは、節の中身が複数に分かれるかで判断してください。
2:41実際に使うかどうかは、文書の長さと深さで判断してください。
2:46記事の活用事例を読み解きます。
2:48例の中心は、エイチフォーの見出しと、その説明を書いた段落の組み合わせです。
2:54ここではセクションの中で、エイチスリーの下にエイチフォーを置き、細かい話題を切り分けています。
3:01試すときは、練習用のエイチティーエムエルファイルをコピーし、ボディの適切な位置にこの形を写して、
3:06保存後に再読み込みします。
3:11そして開発者ツールのエレメンツで、見出しと段落が意図した構造になっているかを確認してください。
3:18見た目ではなく、構造が目的に合っているかを見るのがポイントです。
3:23写して終わりにせず、自分の文章に置き換えて試すと理解が深まります。
3:28属性について確認します。
3:30エイチフォーには、この要素だけのための専用属性で、必須となるものはありません。
3:37代わりに、どの要素にも使えるグローバル属性を、必要に応じて使います。
3:43代表は三つです。
3:44文書の中で重ならない識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
3:50そして内容の言語を示すラングです。
3:56画面のようにアイディーを付ければ、目次からその見出しへ直接リンクできます。
4:03注意として、独自データを入れるデータ属性には、秘密情報を置かないようにしてください。
4:10属性を付ける前に、その見出しへリンクや装飾が本当に必要かを考えましょう。
4:17見た目との関係を整理します。
4:19ブラウザーの初期設定では、エイチフォーは上位の見出しより小さく表示されます。
4:25ここで大切なのは、文字を小さくしたいからエイチフォーを選ぶ、という発想にしないことです。
4:32記事も、文字サイズの好みで見出しレベルを選ばないよう注意しています。
4:38見出しのレベルは文書の意味と階層で決め、文字の大きさや色、余白はシーエスエスで調整します。
4:45画面のように専用のルールを書けば、階層を保ったまま読みやすい見た目に整えられます。
4:52意味と見た目を分けて考えることが大切です。
4:55余白や太さも合わせると、階層がより伝わりやすくなります。
5:00次に、階層を飛ばさないコツです。
5:02よくある失敗は、エイチツーの直後にいきなりエイチフォーを置いてしまうことです。
5:08見た目が程よく小さくて都合がよくても、文書のアウトラインは途中で途切れ、
5:13読み手も検索エンジンも構造を追いにくくなります。
5:18音声読み上げなどの支援技術では、利用者が見出しを頼りにページ内を移動します。
5:24階層が正しければ、その移動もスムーズです。
5:27エイチワンから順に一段ずつ深くしていき、迷ったら見出しだけを抜き出して眺めてみるのがおすすめです。
5:34階層の点検は、公開前の短い作業で大きな効果があります。
5:39ブラウザー互換性を確認します。
5:41記事が参照するエムディーエヌのデータでは、エイチフォー要素は、クロームが一以降、
5:47エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーで非常に古くから対応しています。
5:54そのため、エイチフォー自体が表示できない環境を心配する必要は、まずありません。
5:59ただし、これは要素本体の話です。
6:02新しい属性や機能を組み合わせる場合は、別途対応状況を確認してください。
6:06あわせて、アイオーエスやアンドロイドなど、利用対象の実機でも表示を試しておくと安心です。
6:13表示できることと、意図どおり読めることは別なので、本文の確認も欠かさないでください。
6:18よくある間違いを三つ紹介します。
6:21一つ目は、脚注や注意書きのような、見出しではない文章までエイチフォーで囲んでしまうことです。
6:29それは段落など、内容に合った要素で書きましょう。
6:33二つ目は、見た目を小さくしたいだけの理由でレベルを選ぶことです。
6:39これは前のセクションで触れたとおり、シーエスエスの担当です。
6:44三つ目は、中身のない空の見出しを残してしまうことです。
6:49空の見出しはアウトラインを乱します。
6:52書く前に、その文章が本当に節の題名かどうかを、一度立ち止まって確認してください。
6:59間違いに気づいたら、タグを置き換えるだけでなく階層全体を見直しましょう。
7:05最後にまとめとチェックです。
7:07エイチフォーは、六段階の見出しの四番目で、エイチスリーの節をさらに分けるときに使う見出しです。
7:14専用の必須属性はなく、必要ならアイディーやクラスなどの共通属性を使います。
7:20公開前には、目的が第四階層を示すことに合っているか、階層を飛ばしていないか、
7:26三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを確認しましょう。
7:33自分の長い文書で、細かく分けたい節があれば、ぜひエイチフォーを正しく使ってみてください。
7:40お疲れさまでした。
7:41まずは手元のページの見出し一覧を書き出して点検してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

h4タグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。h3 の下の節を表します。文字サイズの好みで見出しレベルを選ばないようにします。

解説記事・サンプルコードを読む：HTMLのh4タグとは？属性・使い方・ブラウザー互換性と活用例 →