コーディング
本気で学ぶ!HTML入門#06
【HTML入門】p要素(<p>)で段落の範囲を指定してみよう!

「HTML入門」6回目ですね。
今回から、HTML5より前で採用されていたテキスト関連の「ブロックレベル要素」を実際に使って覚えていきましょう。今回その中でも、かなりよく使う分類に入る「p要素」について見ていきましょう。
目次
p要素とは
p要素は段落を表す要素で、WEBサイト上の説明文などに用いる要素です。
- 概要
-
p要素はParagraphの略で、
<p>
〜</p>
の範囲が段落であることを表す要素。 - コンテンツ・カテゴリ
- フロー・コンテンツ
- コンテンツ・モデル
- フレージング・コンテンツ
- 配置できる場所
- フロー・コンテンツが配置できる場所
- ブロックレベル要素・インライン要素
-
ブロックレベル要素
(ただし、子要素(この要素の中)にブロックレベル要素は配置できない。)
要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。
WEBサイト(ホームページ)上の文章のかたまりには、このp要素を使うことが多くなると思います。
p要素の使い方
p要素は、以下のように段落にしたい文章の固まりを<p>
〜 </p>
で囲みます。尚、p要素の中にはフレージング・コンテンツを配置することが出来ます。
サンプル
<p>これは最初の段落です。</p>
<p>これは2つ目の段落です。</p>
表示例
属性
p要素は、以前紹介した「グローバル属性」を付けることができます。
<p id="first-paragraph">これは最初の段落です。</p>
<p class="text">これは2つ目の段落です。</p>
「属性って何?」という方は先に、属性について見ておいて下さい。
なお、昔は上記のグローバル属性以外に「align属性(アライン属性)」という属性を用いて、文章を中央揃えにしたり、右揃えにしたりしていました。
<p align="center">align="center"は中央揃え。</p>
<p align="right">align="right"は右揃え。</p>
が、HTML4.01からは「非推奨属性」、HTML5からは「廃止」になっています。
HTMLはあくまで、「文書構造」を記す言語です。目の見えない方や機械にとって、「文章が中央揃えであるか」、「右揃えであるか」、という事は重要ではありません。このような視覚的な表現は全てCSS(WEBサイトの視覚的表現を行なう言語)で行うことが推奨されています。
【演習】p要素を使ってみよう!
では、今回から架空のカフェをテーマにHTMLを書いていこうと思います。
まずは、htmlファイルを格納する「ローカルサイトフォルダ」を用意しましょう。
- ローカルサイトフォルダ(ルートフォルダ)
- WEBサイトに使用するデータ(htmlファイルや画像ファイルなど)を格納するためのフォルダ。このフォルダの中にはWEBサイトに必要なデータのみを格納する。フォルダ名は任意(半角英数字)だが、一般的に「public_html」や、「htdocs」、「www」といったフォルダ名を命名することが多い。
完成イメージ
1文だけのとてもシンプルなものですが、練習してみましょう。
index.htmlの作成
- テキストエディタを開いて下さい。
- とりあえずファイル名を付けて保存しましょう。(ファイル名:index.html)
-
HTMLの基本構造の要素とタイトルを記述。(タイトル:サンプルカフェ)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルカフェ</title> </head> <body> </body> </html>
-
body要素内(
<body>
〜</body>
)に文章を入力(下記の文章をコピーするか、直接記述してください)サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルカフェ</title> </head> <body> サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。 </body> </html>
-
文字列「サンプルカフェは、」〜「そんな想いがたっぷり詰まったカフェです。」までをp要素(
<p>
〜</p>
)で囲み段落にしましょう<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルカフェ</title> </head> <body> <p>サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。</p> </body> </html>
- 上書き保存し、ブラウザで確認(ファイルをダブルクリック)
上記のようになっていればOKです。
まとめ
p要素は、<p>
〜 </p>
で囲まれた範囲が段落をあわらす要素です。非常によく使う要素の1つですので是非覚えましょう。
次回は、「見出し」をあわらす要素を学習しましょう。