どんなタグ？
最上位の見出しを表すときに、
この<h1>タグを使う。
<body>
<h1>おいしいからあげの作り方</h1>
<p>おいしいからあげの作り方を紹介します。</p>
</body>
<h1> タグは headingの略です。見出しの要素は、<h1> 〜 <h6>まであり、<h1> タグは、もっとも最も上位の階層に使用します。従って<h1> ~ </h1>で挟まれた範囲は、ページのタイトルと同等レベルの見出しであることを表します。このタグは画像やテキストに使用できます。
- どのカテゴリに属しているの？
- <h1> タグは フロー・コンテンツ, ヘディング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
-
<h1> タグに梱包できるタグ（コンテンツ・モデル）は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。
ページのタイトルなどに使います！
どうやって使うの？
大見出しにしたい文字や画像を
<h1> タグで挟むだけ！
h1 タグは見出しとして表したい文章やロゴなどを <h1> 〜 </h1> で挟むだけです。
- 使い方
-
<h1>大見出しにする文章</h1>
<h1>架空CAFE</h1>
<p>このCAFEはこんなところが素敵です！</p>
<h2>MENU</h2>
<p>当店のMENUはこちらです。</p>
<h3>サンドイッチ</h3>
<p>たまごとツナのサンドイッチです。</p>
<p>ハンバーガー</p>
<p>こだわり素材のハンバーガーです。</p>https://codehero.shibajuku.net/html/h1/h1sample01/
- どこでも使えるの？
- <h1> タグは フロー・コンテンツ が配置できるところならどこでも使えます。
- 気をつけることは？
- フォントサイズを縮小する目的で低いレベルの見出しを使用しないようにしましょう。(h2やh3など。)文字サイズを変更したい場合は、 CSS の font-size を使用しましょう。
h1の下の階層でh2やh3を使いましょう！
使える属性は？
グローバル属性です。
<h1> タグには、どの要素にでも使えるグローバル属性が使えます。
ただし、HTML4.01までは以下の属性も使えました。
align 属性 HTML4.01 非推奨 XHTML5 廃止
文字の行揃えを指定する属性です。 HTML4.01で非推奨、XHTML5で廃止となりました。
- 属性値
-
left初期値- 左揃え
center- 中央揃え
right- 右揃え
justify- 両端揃え
今は、グローバル属性しか使いません。
サンプルが見たい
<h1>タグを使ったサンプルを
紹介。
<h1>ジャンル別おすすめ飲食店</h1>
<h2>和食</h2>
…
<h3>お寿司</h3>
…
<h4>回転寿司</h4>
…
<h5>1皿150円以下</h5>
…
<h6>〇〇寿司</h6>
…
<h5>1皿150円以上</h5>
…
<h4>回ってない寿司</h4>
…
<h3>うどん</h3>
…
<h2>洋食</h2>
…
h2は食事のジャンルの階層ですね！(和食、洋食)
飲食店→和食→お寿司→回転寿司..と、どんどん階層が下がっていきます！
<h1>ジャンル別おすすめの飲食店</h1>
<section>
<h2>和食</h2>
<p>和食のおいしいお店を集めました。</p>
<section>
<h3>お寿司</h3>
<p>お寿司のおいしいお店を集めました。</p>
<section>
<h4>回転寿司</h4>
<p>回転寿司のおいしいお店を集めました。</p>
<section>
<h5>1皿150円以下</h5>
<p>1皿150円より安い回転寿司のおいしいお店を集めました。</p>
<section>
<h6>〇〇寿司</h6>
<p>〇〇寿司は安くて美味しいお寿司屋さんです。</p>
</section>
</section>
<section>
<h5>1皿150円以上</h5>
<p>1皿150円以上の回転寿司のおいしいお店を集めました。</p>
</section>
</section>
<section>
<h4>回ってない寿司</h4>
<p>回ってない寿司のおいしいお店を集めました。</p>
</section>
</section>
<section>
<h3>うどん</h3>
<p>うどんのおいしいお店を集めました。</p>
</section>
</section>
<section>
<h2>洋食</h2>
<p>洋食のおいしいお店を集めました。</p>
</section>
https://codehero.shibajuku.net/html/h1/h1sample03/
デフォルトスタイルは？
文字サイズは大きめ、太字で、上下に1行分の余白が空きます。
一般的なブラウザで<h1>要素を表示した場合、テキストは、太字で親要素の2倍の文字サイズで表示されます。h1要素の上下に1行分のスペースが確保されます。具体的には、下記のCSSと同等のスタイルが適用されます。
p {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
}スペースの調整や文字の装飾はCSSで行いましょう。
対応ブラウザは？
基本的にどのブラウザでも大丈夫。
<h1>タグは HTML1以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome あり
- Firefox
- Firefox 2 ~
- Safari
- Safari あり
- Opera
- Opera あり
どのブラウザでも問題ありません。
