文書構造でも、基本中の基本となる「段落・改行・見出し」のタグについて学習します。
HTMlを作成する前に
HTMLファイルを保存する前に、「Web制作」内へ「Chap03」フォルダを作成しましょう。
Web制作フォルダ（ルートフォルダ）
chap03（フォルダを作成）
2-1.html（今回作成するファイル）
chap02
HTMLの基本構造
HTMLを作成したら文書構造を記述しておきます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>段落・改行・見出し</title>
</head>
<body>
<body>
</html>
入力ミスがないか確認しておきましょう。
HTMLの文章をコピー
Chap3-2で使用する文章です。
コピーをしたら、作成した「2-1.html」へ貼り付けましょう。
ボタンを押すとコピーできます⬇︎
本文で使うタグ
HTMLの文章の中でも、最もよく使い、文書構造を持ったタグ。
pタグ（段落/Paragraph）
段落は、文章の"ひとかたまり"を表し、文章にある話題・内容の最小単位。
文脈が変わるごとに「段落」を使うと、文章が読みやすく、わかりやすくなる。
ブラウザ上では、段落の前後に、1行の空白を開けて表示される。
段落の例
文章のひとかたまりを段落という
brタグ（改行/line Break）
改行は、文章を読みやすくするために、行を変えて表示するタグ。
Webページの文章は自動改行されるので、一文の途中で改行は使わない。
一般的には、段落内の句点（。）の後で使う。
※ 終了タグなし
改行の例
行を変えて読みやすくするためのタグ。
改行は、段落内の句点の後ろで使用する。
h1…h6タグ（見出し/Heading level.1〜6）
見出しは、内容の要点を短い言葉にまとめた文章で、要約文や本文のタイトルになる。
文章を整理し分類する、「章・節・項」を使った『章立て』の書き方は、見出しと同じ役割をしている。
見出しは、1から6までの重要度にレベル分けされ、本文の内容に合わせて適切に使う。
※ 文字サイズを変える目的で、見出しタグを使ってはいけない
見出しの例
h1タグは、最も重要度が高く、ページ全体の見出しになる。
h2タグは、h1タグの次に重要度が高く、ページの内容を表す見出しになる。
h3タグは、h2タグの次に重要度が高く、ページの内容の各項目を表す見出しになる。段落<p>と改行<br>
段落<p>を追加
See the Pen 3-1 by Rayout-gw (@Rayout-gw) on CodePen.
改行<br>を追加
See the Pen 3-1-2 by Rayout-gw (@Rayout-gw) on CodePen.
うまく表示できなかった場合は、入力ミスがないか確認してみましょう
見出し<h1>-<h6>
見出し<h1>〜<h3>を追加
See the Pen 3-1-3 by Rayout-gw (@Rayout-gw) on CodePen.
うまく表示できなかった場合は、入力ミスがないか確認してみましょう