見出しを作ってみよう

子供の頃は身長が欲しかったです。今は髪の毛が欲しいです。

というわけでみなさまどうもこんにちわ。

これまでちょっと難しい『パス』について学んできてちょっと大変だったと思います。今回はそんなに難しくないですので気楽にいきましょう。

今回は『見出し』について勉強していきます。『見出し』というのは内容が一目で分かるように文章の前に示す簡単な言葉のことです。タイトルとか表題とかのことですね。

HTMLで見出しをつけるには『h1〜h6』タグを使用します。以下の様な感じですね。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

HTMLの見出し要素にはランク付けがあり、数字が小さくなればなるほど重要な見出しとなります。

<h1>見出し1</h1> <!-- ←一番偉い -->
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6> <!-- ←一番偉くない -->

一般的なブラウザでは『h1〜h6』タグで囲まれたテキストは文字が大きくなったり太字になったりとフォントに変化がつきます。

サンプルをみてみる。

『h1〜h6』タグの中に画像を置くことも可能です。ただ、その際はalt属性に見出しとして意味のある文を入れるようにしましょう。

<h1><img src="./sample.jpg" alt="ここに見出しの文を記述"></h1>

h1〜h6タグはその前後に改行が入っているように表示されます。
※これについてはCSS入門編のこちらの記事で解説しています。

では少し『h1〜h6』タグを使ってマークアップをしてみましょう。

というわけで適当に文章を用意してみました。以下の「今日のこんだて」についての記事をマークアップしてみましょう。

今日のこんだて
このサイトでは僕のこんだてを紹介しています。
4月1日のこんだて
カルビーポテトチップス　うす塩味
今日の晩ご飯はみんな大好きカルビーポテトチップスです。
作り方
まずパッケージを空けます。机に置いたらできあがり！
※家族みんなで食べるときは袋の背中部分も空けると食べやすいよ！
※じゅうたんで指を拭く人がいるときはウェットティッシュもちゃんと添えてあげてね！

まずは「今日のこんだて」についての記事なので「今日のこんだて」という表題はh1タグを使用して一番重要な見出しとしてマークアップします。

<h1>今日のこんだて</h1>

その後の「このサイトでは僕のこんだてを紹介しています。」という文についてはこのサイトについての解説となりますので『見出し』ではなく『文章』が該当するでしょう。ここはpタグを使います。

<h1>今日のこんだて</h1>
<p>このサイトでは僕のこんだてを紹介しています。</p>

続いて「4月1日のこんだて」については今日のこんだての次に重要な見出しとなるでしょう。今回はh2タグを使用してみます。

<h1>今日のこんだて</h1>
<p>このサイトでは僕のこんだてを紹介しています。</p> 
<h2>4月1日のこんだて</h2>

この流れで「カルビーポテトチップス　うす塩味」はh3タグを、「今日の晩ご飯はみんな大好きカルビーポテトチップスです。」はpタグ、「作り方」はh4タグ、その他の文は丸ごとpタグでマークアップします。

<h1>今日のこんだて</h1>
<p>このサイトでは僕のこんだてを紹介しています。</p> 
<h2>4月1日のこんだて</h2> 
<h3>カルビーポテトチップス　うす塩味</h3>
<p>今日の晩ご飯はみんな大好きカルビーポテトチップスです。</p>
<h4>作り方</h4>
<p>まずパッケージを空けます。机に置いたらできあがり！<br>※家族みんなで食べるときは袋の背中部分も空けると食べやすいよ！<br>※じゅうたんで指を拭く人がいるときはウェットティッシュもちゃんと添えてあげてね！ </p>

これで完成ですね。ここまでは大丈夫でしょうか。

さて、みなさんは
「『h1〜h6』タグの使い方はわかったけど『見出し』とか『文章』とかの定義はどうやって決まっているの？」
と疑問に思ったのではないでしょうか。

実はHTMLにおいて、『これが見出しでこれが本文』という明確な定義は存在しません。

ここがHTMLにおいてかなり面倒くさいややこしいところで、

<h1>今日のこんだて</h1>
<h2>このサイトでは僕のこんだてを紹介しています。</h2> 
<h3>4月1日のこんだて</h3> 
<h4>カルビーポテトチップス　うす塩味</h4>
<p>今日の晩ご飯はみんな大好きカルビーポテトチップスです。</p>
<h5>作り方</h5>
<p>まずパッケージを空けます。机に置いたらできあがり！<br>※家族みんなで食べるときは袋の背中部分も空けると食べやすいよ！<br>※じゅうたんで指を拭く人がいるときはウェットティッシュもちゃんと添えてあげてね！ </p>

とマークアップしたり

<h1>今日のこんだて</h1>
<p>このサイトでは僕のこんだてを紹介しています。</p> 
<h2>4月1日のこんだて</h2> 
<h3>カルビーポテトチップス　うす塩味</h3>
<h4>今日の晩ご飯はみんな大好きカルビーポテトチップスです。</h4>
<p>作り方</p>
<p>まずパッケージを空けます。机に置いたらできあがり！<br>※家族みんなで食べるときは袋の背中部分も空けると食べやすいよ！<br>※じゅうたんで指を拭く人がいるときはウェットティッシュもちゃんと添えてあげてね！ </p>

とマークアップしたとしてもどちらも正解だったりします。この塩梅がちょっと難しいですね。基本的に閉じタグを忘れたりHTMLとして欠陥がなければ特に問題はなかったりしますので自身が感じた重要度に沿って『h1〜h6』タグを使い分けていけばOKです。

というわけで以上となります。次はテーブルタグについて勉強していきたいと思います。引き続き頑張っていきましょう。

ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア