段落 <p>
目次
- 解説
- 1. 段落とは
- 2. pタグの書き方
- 3. 段落の区切り <hr>
解説
1. 段落とは
段落とは、内容ごとにまとめた文章のまとまりのことです。適切に段落を区切ることにより、文章の可読性が向上します。
例）段落で区切られた文章
| <段落>本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。</段落> <段落>HTMLは「Hyper Text Markup Language」の略です。 Webページの画面構造を定義する言語です。</段落> <段落>CSSは「Cascading Style Sheets」の略です。 Webページの見た目を定義する言語です。</段落> |
HTMLで段落を表現するには、pタグを使います。
※p は段落を意味する Paragraph の略です。
2. pタグの書き方
構文：pタグ（段落を表す）
<p></p>例）段落ごとに文章をマークアップする
<p>吾輩は猫である。名前はまだ無い。</p>
<p>
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
</p>表示結果｜例）段落ごとに文章をマークアップする
なお、pタグや次のページで学ぶhタグで囲まれた文章は、自動で1行分の余白を含んだ状態で改行されます。
※詳しくは『ブロック要素とdivタグ』のページで解説します。
3. 段落の区切り <hr>
段落と段落の間で、話題や場面が切り替わる場合はhrタグを使います。hrタグを使うとブラウザに水平線が表示されます。
※hr は水平の罫線を意味する Horizonal Rule の略です。
構文：hrタグ（段落間の意味的な区切りを表す）
<hr>※hrタグに閉じタグは必要ありません。
例）hrタグの使い方
<p>本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。</p>
<hr>
<p>
HTMLは「Hyper Text Markup Language」の略です。<br>
Webページの画面構造を定義する言語です。
</p>表示結果｜例）hrタグの使い方
本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。
HTMLは「Hyper Text Markup Language」の略です。
Webページの画面構造を定義する言語です。
問題
実践問題
| (1) | VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。 |
| (2) | 「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「p_tag」フォルダーを新規作成してください。 |
| (3) | 「p_tag」フォルダー内に、「index.html」を新規作成し、フッターメニューの「Go Live」ボタンをクリックしてブラウザで表示してください。 |
設計書（1）
| 段落 | 本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。 |
| 段落 | HTMLは「Hyper Text Markup Language」の略です。 Webページの画面構造を定義する言語です。 |
| 段落 | CSSは「Cascading Style Sheets」の略です。 Webページの見た目を定義する言語です。 |
下記コードを該当ファイルにペーストし、各問に答えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pタグ</title>
</head>
<body>
<!--
（問1）「設計書（1）」を参考に、下記文章を適切にマークアップしてください。
なお、段落中の改行は、brタグを用いて改行してください。 -->
<!--
（問2）ひとつ目の段落とふたつ目の段落の間にhrタグを記述し、水平線を表示させてください。 -->
本コースではWebページ制作において必要不可欠な技術である、Webデザインについて学びます。
HTMLは「Hyper Text Markup Language」の略です。
Webページの画面構造を定義する言語です。
CSSは「Cascading Style Sheets」の略です。
Webページの見た目を定義する言語です。
</body>
</html>想定結果を表示
