シェアする
Creating Headings - Japanese Only
子供の頃は身長が欲しかったです。今は髪の毛が欲しいです。
というわけでみなさまどうもこんにちわ。
これまでちょっと難しい『パス』について学んできてちょっと大変だったと思います。今回はそんなに難しくないですので気楽にいきましょう。
今回は『見出し』について勉強していきます。『見出し』というのは内容が一目で分かるように文章の前に示す簡単な言葉のことです。タイトルとか表題とかのことですね。
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です。
というわけで以上となります。次はテーブルタグについて勉強していきたいと思います。引き続き頑張っていきましょう。
ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
