[4] テキストに見出し（＜h1＞から＜h6＞）をつけてみよう
最終更新日：2019年03月22日 （初回投稿日：2010年09月21日）今回は「見出し」の要素を書いて、どんな表示をするか試してみましょう。
| 使用する要素 | <h1> 〜 </h1><h2> 〜 </h2><h3> 〜 </h3><h4> 〜 </h4><h5> 〜 </h5><h6> 〜 </h6>
|
|---|
h1〜6は「見出し（heading）」を指定する要素
<h1>〜<h6>の「h」は「heading」の略。heading とは「見出し」という意味です。
何はともあれ、<h1>〜<h6>を書いてみましょう。
前回保存したファイルを開いて <body>要素内に書いた本文をコピペで増やし、下のように <h1> から <h6> まで順番に指定してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
本日は晴天なり〜！
<h1>本日は晴天なり〜！</h1>
<h2>本日は晴天なり〜！</h2>
<h3>本日は晴天なり〜！</h3>
<h4>本日は晴天なり〜！</h4>
<h5>本日は晴天なり〜！</h5>
<h6>本日は晴天なり〜！</h6>
</body>
</html>
これを保存してブラウザでプレビューしてみると、
それぞれ 太字 になって、大きさが変わっているのがわかります。
h1〜6は「重要度」を表しています
<h1>が1番大きく、そこから<h6>まで段階的に小さくなっていくのがわかりましたね。
何も指定していない文字は、太さは標準で、サイズは <h4> と同じくらいです。
何も指定していない文字のサイズは、PCブラウザでは 16px です。
これは、ルート要素とも呼ばれる <html>要素の ブラウザでのデフォルトスタイルなんです。
「スタイル」とは、文字の大きさや太さ、色、文字以外のモノの色や位置など、いろいろな見た目の装飾のこと。これは CSS（シーエスエス）という言語を使って指定します。CSS については追々やっていきます。
また、「デフォルトスタイル」とは、ブラウザがあらかじめ持っているスタイル。HTML文書を書く人がスタイルを何も指定しなくても、要素の役目に合わせた標準のスタイルでブラウザが勝手に表示してくれます。
1 〜 6 の数値は、見出しの「重要度」を表しています。重要度に合わせて文字の大きさが変わってるんです。<h1> が最重要の見出しってことですね。
新聞や雑誌の表紙で、重要な記事ほどタイトルがデカイでしょ？ あれと同じです。
音声ブラウザでは <h1> のから <h6> まで段階的に、特定の音を付けてゆっくり読み上げるんだって。音の表現で本文よりも強調します。
h1〜6は、SEOでも重視されます
<h1>要素は、[2] タイトル（title要素）を設定しよう で登場した <title> 要素に次ぐ SEO（Search Engine Optimization = 検索エンジン最適化）的に重要な要素です。
<title>に次いでクロールされやすいので、ここにサイトにとって重要な文言を入れます。
そのあと<h2>から<h6>へと順番にクロールされる順位は低くなっていきます。
HTML文書内で 上から下へ <h1> から <h6> を置くほうが SEO的に良いと聞きます。
新聞や雑誌でも だいたいそうなっていますもんね。大見出しから小見出しへの流れ。
音声ブラウザの事を考えても、そのほうがわかりやすいよね。
サイトのメインタイトルを <h1> に、それぞれのページのタイトルを <h2> に、サブタイトルは <h3> に…といったかんじで、ページの構成を考えれば、自然にそれなりの流れになります。
個人的には <h1> 〜 <h3> か <h4> くらいまでしか使わないかも。<h5> と <h6> は使ったことが無い気がします。
文字の大きさや太さを変えたいだけで <h1> 〜 <h6>要素を使ったりなんて絶対にしないでください。もったいない。検索されやすい重要な要素なので。
自分のサイトに合った見出しのコトバを考えて <h1> 〜 <h6> を使おう。
h1〜6タグで囲むと「自動的に改行」されます
先程書いたファイルに、下記のようにコピペで新たに3行増やしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
本日は晴天なり〜！
<h1>本日は晴天なり〜！</h1>
<h2>本日は晴天なり〜！</h2>
<h3>本日は晴天なり〜！</h3>
<h4>本日は晴天なり〜！</h4>
<h5>本日は晴天なり〜！</h5>
<h6>本日は晴天なり〜！</h6>
本日は晴天なり〜！
本日は晴天なり〜！
本日は晴天なり〜！
</body>
</html>
これを保存してブラウザでプレビューしてみると、このように、新たに足した3行は、改行されずに1行で表示されます。
h1〜6要素は自動的に改行されているんですね。
これはスタイル的に「ブロックレベル」の要素なので、こうなるんです。
新たに足したテキストのほうは、HTML文書上で改行しても、ブラウザの表示では改行されていません。
こっちのテキストは「インラインレベル」なので、「改行のための要素」を指定しないとブラウザの表示で改行されて見えないんですよ。
「ブロックレベル」「インラインレベル」は スタイルの話です。これらは CSS で変更できますが、その話はいずれまたじっくりと。今のところは基本のHTMLの要素を覚えていこう。
次回予告
今回はここまで。
次回は「改行のための要素」である <br>要素 を使ってみましょう。
- 関連記事
-
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう（CSS使用）
- [11-1] 他のページにリンクしよう
- （ちょっとメモ）index.html という名のファイル
- [10] 絶対URL と 相対URL（絶対パス と 相対パス）
- [9-2] 画像にテキストを回り込ませよう（CSS使用）
- [9-1] 画像を表示しよう img要素
- [8]コメントを入れよう
- [7] ＜div＞や＜span＞で特定の範囲を指定しよう
- [6] 段落に＜p＞要素を使おう（ついでにCSSで整えてみよう）
- [5] テキストを改行（＜br＞）してみよう
- [4] テキストに見出し（＜h1＞から＜h6＞）をつけてみよう
- [3] !DOCTYPE宣言をしよう
- [2] タイトル（title要素）を設定しよう
- [1] テキストエディタで書いてみよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
Re: good desu
こちらこそ、ありがとうございます！！
とても参考になります
<初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選>
を読んでこちらのサイトが紹介されていたのでやってきました。
今まで色んなサイトを見てきましたが、
こちらのサイトは本当にわかりやすい解説で大変参考になります！！
まだまだ序盤ですが、心も折れずに基礎的な事が学べそうです！
Re: とても参考になります
少しでもお役に立てれば何よりです。
最近エンジニア・プログラマのかたもHTML5/CSS3の知識が必要だそうで、大変ですね。
デザイナーの私は、JavaScriptやPHPなんて、数学的なセンスが無いと無理だなと畑違いを感じて、なかなか掘り下げられません。
特にCSSは、新聞や雑誌のレイアウトから生まれた用語や考え方が多いので、編集やデザインの仕事をしている人のほうがすんなり受け入れられるようです。
私も勉強しながら書いています。お互いがんばりましょう！
No title
こちらのサイトは非常にわかりやすくて助かります。
Re: No title
お役に立てて何よりです！
No title
一つ一つの記事の内容も丁度よく、これなら投げ出さずについていけそうな気がしております！
Re: No title
コメントありがとうございます。
最初のうちは「自分がはじめてだったとき」を思い出しながら書いているので、比較的わかりやすいかもです。
でも、そのうち（[16]のテーブル関連くらいからかな）「自分のメモとして」書いちゃっているので、説明が雑だったりします（笑）
それでも頑張って。参考書籍や参考サイトの1つとして活用してくだされば…と思っています♪
