コーディング

【HTML入門】p要素(<p>)で段落の範囲を指定してみよう！

2016.05.25
- HTML
- コーディング

「HTML入門」6回目ですね。
今回から、HTML5より前で採用されていたテキスト関連の「ブロックレベル要素」を実際に使って覚えていきましょう。今回その中でも、かなりよく使う分類に入る「p要素」について見ていきましょう。

p要素とは

p要素は段落を表す要素で、WEBサイト上の説明文などに用いる要素です。

概要: p要素はParagraphの略で、<p> 〜 </p>の範囲が段落であることを表す要素。
コンテンツ・カテゴリ: フロー・コンテンツ
コンテンツ・モデル: フレージング・コンテンツ
配置できる場所: フロー・コンテンツが配置できる場所
ブロックレベル要素・インライン要素: ブロックレベル要素
（ただし、子要素（この要素の中）にブロックレベル要素は配置できない。）

要素のカテゴリやコンテンツモデルについては、下記の記事を下さい。

【HTML入門】要素のカテゴリは配置のルールを示す

2016.05.23

WEBサイト（ホームページ）上の文章のかたまりには、このp要素を使うことが多くなると思います。

p要素の使い方

p要素は、以下のように段落にしたい文章の固まりを<p> 〜 </p>で囲みます。尚、p要素の中にはフレージング・コンテンツを配置することが出来ます。

サンプル

<p>これは最初の段落です。</p>
<p>これは2つ目の段落です。</p>

表示例

See the Pen yJBNwZ by Qlio (@qlio) on CodePen.23853

属性

p要素は、以前紹介した「グローバル属性」を付けることができます。

<p id="first-paragraph">これは最初の段落です。</p>
<p class="text">これは2つ目の段落です。</p>

「属性って何？」という方は先に、属性について見ておいて下さい。

【HTML入門】HTMLの属性ってなに？属性の役割と書き方

2016.05.18

なお、昔は上記のグローバル属性以外に「align属性（アライン属性）」という属性を用いて、文章を中央揃えにしたり、右揃えにしたりしていました。

<p align="center">align="center"は中央揃え。</p>
<p align="right">align="right"は右揃え。</p>

See the Pen NrKGym by Qlio (@qlio) on CodePen.23853

が、HTML4.01からは「非推奨属性」、HTML5からは「廃止」になっています。

HTMLはあくまで、「文書構造」を記す言語です。目の見えない方や機械にとって、「文章が中央揃えであるか」、「右揃えであるか」、という事は重要ではありません。このような視覚的な表現は全てCSS（WEBサイトの視覚的表現を行なう言語）で行うことが推奨されています。

【演習】p要素を使ってみよう！

では、今回から架空のカフェをテーマにHTMLを書いていこうと思います。
まずは、htmlファイルを格納する「ローカルサイトフォルダ」を用意しましょう。

ローカルサイトフォルダ（ルートフォルダ）: WEBサイトに使用するデータ（htmlファイルや画像ファイルなど）を格納するためのフォルダ。このフォルダの中にはWEBサイトに必要なデータのみを格納する。フォルダ名は任意（半角英数字）だが、一般的に「public_html」や、「htdocs」、「www」といったフォルダ名を命名することが多い。

完成イメージ

See the Pen bebdMa by Qlio (@qlio) on CodePen.23853

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>