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

使用する要素 <h1> 〜 </h1>
<h2> 〜 </h2>
<h3> 〜 </h3>
<h4> 〜 </h4>
<h5> 〜 </h5>
<h6> 〜 </h6>

h1〜6は「見出し(heading)」を指定する要素

<h1>〜<h6>の「h」は「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>くらいと同じですね〜。

h1〜6のHTML要素は「重要度」を表しています。
重要度に合わせて、大きさや太さが変わってるんです。
新聞や雑誌の表紙で、重要な記事のタイトルはデカイでしょ? あれと同じです。
音声ブラウザでは、<h1>のから<h6>まで段階的に、特定の音を付けてゆっくり読み上げます。
音の表現で本文より強調してるんです。

h1〜6は、SEOでも重視されます

そして、<h1>要素は、[2]で登場した <title>要素に次ぐSEO(Search Engine Optimization = 検索エンジン最適化)での重要な要素。
<title>に次いでクロールされやすいので、ここにサイトにとって重要な文言を入れます。
順番に<h2>から<h6>へとクロールされる順位が低くなっていきます。

HTML文書内で、上から下へ順番に<h1>から<h6>と配置したほうがSEO的に良いとされています。
先程紹介した音声ブラウザの事を考えても、<h1>から<h6>へ順番に重要性が流れたほうが、わかりやすいですよね。
たとえば、サイトのメインタイトルを<h1>にして、メインメニューをそれぞれ<h2>に、各ページの小さい見出しを<h3>にする…など、サイトの構成を考えれば、自然にそれなりの流れになります。

文字の大きさを変えたいだけで、<h1>〜<h6>要素を使ったりしないで、見出しの重要度を考えて構成しましょう。

h1〜6タグで囲むと「自動的に改行」されます

先程書いたファイルに、下記のようにコピペで本文だけを増やしてみてください。

<!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文書上で改行しても、特定の「改行のための要素」を指定しないと、改行されません。

次回は、本文テキストを改行をするための<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
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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