pタグとh1タグの段落と見出しで読みやすい文章構成を作成する方法
前回ホームページ入門・初心者向け html5の基本的な文法までで、htmlをブラウザで表示することができるようになりました。
今回からは、実際にhtmlでのいろいろな表現方法を紹介していき、最終的にはきれいなホームページを作成することを目指します。
このページでは段落と見出しを表示して、読みやすい文章のレイアウトを表現する方法を紹介します。
段落
作文などで文章を書くときは、文の区切りには段落を入れて読みやすくすることがあります。
htmlでも段落を意味するタグがあります。
pで囲まれた文章が一つの段落となります。pはParagraphの頭文字を意味します。
<p>この文章が一つ目の段落になります。</p>
<p>この文章が二つ目の段落になります。</p>段落の間にはスペースが入り、読みやすくなります。
見出し
新聞などと同じように、ホームページでも見出しを表示し、閲覧者が一目見て何のページなのか把握してもらう必要があります。
h1というタグを使用すれば見出しを表示することができます。h1のhはheaderの頭文字を意味します。
h1は一番大きな見出しで、さらに細かい見出しを表示するために、h1～h6まで用意されています。
基本的には以下のような構成になると思います。
<h1>栄養のある野菜の紹介</h1>
栄養のある野菜の紹介をします。
<h2>トマト</h2>
<h3>特徴</h3>
栄養がいっぱいです！
<h3>色</h3>
とっても赤いです！
<h2>ピーマン</h2>
<h3>特徴</h3>
栄養がいっぱいです！
<h3>色</h3>
とっても緑です！行間や文字の大きさはブラウザで見やすいように調整してくれます。
「h1の文字色を緑にしたい」など、自分で微調整したい場合があると思います。その場合は前ページで紹介したように、タグにスタイルを指定すれば可能です。
<h1 style="color:green;">栄養のある野菜の紹介</h1>
栄養のある野菜の紹介をします。
<h2>トマト</h2>
<h3>特徴</h3>
栄養がいっぱいです！
<h3>色</h3>
とっても赤いです！
<h2>ピーマン</h2>
<h3>特徴</h3>
栄養がいっぱいです！
<h3>色</h3>
とっても緑です！次回は、ボーダー（罫線）を表示して、よりレイアウトをわかりやすく整える方法を紹介します。