見出し、リスト、段落、改行
2.5 見出し、リスト、段落、改行
HTMLファイルの作成時によく使う要素について学習します。見出し要素やリスト要素、段落要素などの基本的な要素の記述方法と、それらがブラウザでどのように表示されるかを見ていきましょう。
2.5.1 見出し
WEBページの見出しを作成します。見出しには<h1>～<h6>まで重要度の異なる6つのタグがあります。
まずは、<h1>タグを使ってみましょう。
1. HTMLファイルにソースコードを記述
①ソース・フォルダー ：webpage/ch02
②ファイル名 ：header.html
➢ header.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎</title>
</head>
<body>
<h1>HTMLの基礎</h1>
</body>
</html>
「HTMLの基礎」というテキストを、<h1>タグで囲みました。
2. ブラウザで表示を確認
ブラウザでどのように表示されるか、確認しましょう。
図 2.5.1
<h1>～</h1>で囲まれた文章が、見出しです。字が大きく太字で表示されているのがわかります。
◉見出しの種類
見出しを示す要素には、h1～h6までの6種類があります。
「h」に続く数字は、見出しのレベル（重要度）を示しており、h1がもっとも上位の見出し（大見出し）で、h6はもっとも下位の見出し（小見出し）となります。
一般的なブラウザでは、重要度の高い見出しほど大きく表示されます。
2.5.2 リスト
リストはいわゆる箇条書きのことで、よく使用されるタグのひとつです。リストを使って、ナビゲーションメニューの項目をリストアップします。
1. HTMLファイルにソースコードを記述
①ソース・フォルダー ：webpage/ch02
②ファイル名 ：list.html
➢ list.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎</title>
</head>
<body>
<h1>HTMLの基礎</h1>
<ul>
<li>ホーム</li>
<li>会社案内</li>
<li>アクセス</li>
<li>お問い合わせ</li>
</ul>
</body>
</html>
リスト形式で表示させたいテキスト全体を囲むように<ul>タグでマークアップし、リストにしたい文字列を<li>タグでマークアップします。<ul>要素、<li>要素を指定したテキストがリスト形式で表示されます。
<ul>タグは箇条書きとしてコンテンツの本文中に使用されるほか、ナビゲーションメニューの項目を列挙するときにもよく使用されます。
<ul>タグの子要素は必ず<li>タグで、テキストやほかのタグが子要素になることはありません。
2.5.3 段落
段落には、<p>タグを使用します。HTMLタグの中でも一番よく使用されるタグです。
1. HTMLファイルにソースコードを記述
①ソース・フォルダー ：webpage/ch02
②ファイル名 ：paragraph.html
➢ paragraph.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎</title>
</head>
<body>
<h1>HTMLの基礎</h1>
<ul>
<li>ホーム</li>
<li>会社案内</li>
<li>アクセス</li>
<li>お問い合わせ</li>
</ul>
<p>
HTMLの基礎を勉強しています。
</p>
<p>
HTMLの基礎を勉強しています。
</p>
<p>
HTMLの基礎を勉強しています。
</p>
</body>
</html>
<p>～</p>で囲まれた部分がひとつの段落として表示されます。
<p>タグはparagraph（段落）の略で、それがひとつの段落であることを表します。
2.5.4 改行
テキストを強制的に改行するには<br>タグを使用します。
1. HTMLファイルにソースコードを記述
①ソース・フォルダー ：webpage/ch02
②ファイル名 ：break.html
➢ break.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎</title>
</head>
<body>
<h1>HTMLの基礎</h1>
<ul>
<li>ホーム</li>
<li>会社案内</li>
<li>アクセス</li>
<li>お問い合わせ</li>
</ul>
<p>
HTMLの基礎を勉強しています。<br>
HTMLの基礎を勉強しています。<br>
HTMLの基礎を勉強しています。
</p>
</body>
</html>
<br>タグには開始タグ・終了タグはありませんので、改行したいポイントに記述します。
<br>は、Breakの略で、改行を意味します。
