[4] テキストに見出し(<h1>から<h6>)をつけてみよう

最終更新日:2017年09月14日  (初回投稿日: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>
<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>
<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>要素 を使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

good desu

偶然みつけたんですが、初心者の目線になってくれていてホントたすかります!初心者向けとか書いてあっても、書いてる本人は知ってるもんだから、いろいろすっとばして教えてくれちゃってるサイトが多い中、とても低い目線に感謝。ありがとう!!

Re: good desu

rikoさん。そう言ってくださるのが1番嬉しいです。
こちらこそ、ありがとうございます!!

とても参考になります

「paiza開発日誌」の
<初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選>
を読んでこちらのサイトが紹介されていたのでやってきました。

今まで色んなサイトを見てきましたが、
こちらのサイトは本当にわかりやすい解説で大変参考になります!!
まだまだ序盤ですが、心も折れずに基礎的な事が学べそうです!
  

Re: とても参考になります

TAさん、コメントありがとうございます。
少しでもお役に立てれば何よりです。

最近エンジニア・プログラマのかたもHTML5/CSS3の知識が必要だそうで、大変ですね。
デザイナーの私は、JavaScriptやPHPなんて、数学的なセンスが無いと無理だなと畑違いを感じて、なかなか掘り下げられません。
特にCSSは、新聞や雑誌のレイアウトから生まれた用語や考え方が多いので、編集やデザインの仕事をしている人のほうがすんなり受け入れられるようです。
私も勉強しながら書いています。お互いがんばりましょう!

No title

私のようにHTMLについて右も左もわからない人間にとって
こちらのサイトは非常にわかりやすくて助かります。

Re: No title

コメントありがとうございます。
お役に立てて何よりです!

No title

めちゃくちゃわかりやすくて感動しています!!!!
一つ一つの記事の内容も丁度よく、これなら投げ出さずについていけそうな気がしております!

Re: No title

初心者Aさん
コメントありがとうございます。
最初のうちは「自分がはじめてだったとき」を思い出しながら書いているので、比較的わかりやすいかもです。
でも、そのうち([16]のテーブル関連くらいからかな)「自分のメモとして」書いちゃっているので、説明が雑だったりします(笑)
それでも頑張って。参考書籍や参考サイトの1つとして活用してくだされば…と思っています♪
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.