本気で学ぶ!HTML入門#06

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

HTML入門#06

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

目次

  1. p要素とは
  2. p要素の使い方
  3. 【演習】p要素を使ってみよう!
  4. まとめ

p要素とは

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

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

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

HTML入門#05

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

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入門#2

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

なお、昔は上記のグローバル属性以外に「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の作成

  1. テキストエディタを開いて下さい。

  2. とりあえずファイル名を付けて保存しましょう。(ファイル名:index.html)

  3. HTMLの基本構造の要素とタイトルを記述。(タイトル:サンプルカフェ)

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>サンプルカフェ</title>
    </head>
    <body>
    
    </body>
    </html>
  4. body要素内(<body></body>)に文章を入力(下記の文章をコピーするか、直接記述してください)

    サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>サンプルカフェ</title>
    </head>
    <body>
    サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。
    </body>
    </html>
  5. 文字列「サンプルカフェは、」〜「そんな想いがたっぷり詰まったカフェです。」までをp要素(<p></p>)で囲み段落にしましょう

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>サンプルカフェ</title>
    </head>
    <body>
    <p>サンプルカフェは、大阪府豊中市にある架空のカフェです。厳選されたとっても美味しいコーヒー豆をのみを焙煎しご提供しています。お客様に「最高のコーヒーをゆったりと楽しんで頂きたい」そんな想いがたっぷり詰まったカフェです。</p>
    </body>
    </html>
  6. 上書き保存し、ブラウザで確認(ファイルをダブルクリック)

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

上記のようになっていればOKです。

まとめ

p要素は、<p></p>で囲まれた範囲が段落をあわらす要素です。非常によく使う要素の1つですので是非覚えましょう。

次回は、「見出し」をあわらす要素を学習しましょう。

HTML入門#07

【HTML入門】見出しは<h1> 〜 <h6>の6段階の階層構造