HTMLスキル - 第6章 Lesson1

見出しをつける<h1>~<h6>の書き方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

文字を見出しとして定義するための<h1>から<h6>までのタグの考え方と、書き方について初心者向けに解説しています。



この動画で学べること

・文章を見出しに定義する方法



文章を見出しにするタグを知ろう

文章が多い場合は、見出しを設定して文章を読みやすくする必要があります。
見出しの設定には<h1>〜<h6>タグを使っていきますが、<h1>から順に使うというルールがあります。
<h1>が一番大きな見出しで、数字の順に重要度が変わってきますので、実際に書いて見てみましょう。



<h1>これは見出し1です。</h1>
<h2>これは見出し2です。</h2>
<h3>これは見出し3です。</h3>
<h4>これは見出し4です。</h4>
<h5>これは見出し5です。</h5>
<h6>これは見出し6です。</h6>



一度このように書き 、保存してブラウザで見てみましょう。
見出し1が一番大きく、だんだん小さくなっていることがわかります。




見出しをつける練習をしよう

では、練習ファイルで練習してみましょう。
大見出しを<h1>タグ、★マークのついた文章を中身出しの<h2>タグ、(1)(2)(3)の文章を小見出しの<h3>タグで囲んでいきましょう。
最後に例を<h4>タグで囲んでください。
このように階層、レベルに応じた適切な見出しをつけて、文章を読みやすくしましょう。



 <h1>HTMLについて</h1>
<h2>★HTMLとは?</h2>
HTML(HyperText Markup Languageの頭文字を取ったもの)は、ウェブページを作成するために開発された言語です。
<h2>★HTML基本の書き方</h2>
<h3>(1)開始タグと終了タグについて</h3>
開始タグと終了タグで内容を挟んで書きます。
開始タグと終了タグで内容を囲めば、それ全体を「要素」として意味を付ける事が出来ます。
<h3>(2)タグの種類について</h3>
HTMLにはたくさんの種類のタグがあります。しかし、実際にウェブページで使用するタグはその中でもごく一部です。
<h3>(3)属性について</h3>
HTMLでは、それぞれタグの種類ごとに指定できる属性の名称と値を書くことが出来ます。
タグに属性を追加することで、要素に付加情報を記述する事が出来ます。
<h4>例</h4>
画像を表示する「img」タグに、src属性を加えて「どの画像を」表示するか、付加情報を加える



文章を見出しにするタグで囲めたら、保存してブラウザで見てみましょう。
見出しの大きさによって、下の画像のように文字の大きさが変わったことがわかります。