/*サーチコンソール*/ /*google adcense*/

初心者向け段落の作成方法【HTML】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はHTMLを勉強する上で必須な、段落を表す「p要素」について解説していきます。p要素はとても単純なものですが、HTMLの基本となるものなのでしっかりと理解しましょう。

この記事の要点まとめ
p要素って何?
p要素とは「Paragraph」の略称で、段落を表す要素。
p要素と記事のレイアウト

段落間の幅
段落間の幅はCSSを使って変えることができる。
段落を変えるタイミング
段落は文字数ではなく、文章の区切りの良さで切り分ける。読みやすいことを意識する。
HTML中で改行
HTMLで改行をしたいときは、p要素かbrタグを使う。HTML中で改行しても改行扱いにならない。
WordPressにおけるp要素
WordPressでは文章中にエンターキーを押せば、自動的に段落が切り替わる。
ブログを書くならp要素は必須
記事を書くだけならHTMLは必要ないが、見やすい記事を書くためにはHTML編集が必須。
そのためにもp要素は理解するべき。

p要素って何?

p要素はHTMLの基本だよ。この下の文章を例に説明しているから、しっかりと理解してね。

ヒナ
ヒナ

p要素とは、Paragraphの略称で、「段落」を表す要素のことです。そのまま「ピー」と呼ぶことの方が多いです。このサイトを含めるWebサイトの文章はこのp要素で構成されています。<p>タグ(開始タグ)〜</p>タグ(終了タグ)で囲まれた範囲が一つの段落として処理され、この文章でいくと『〜』内の『p要素とは、〜(段落)としています。』までが1つのp要素(段落)としています。』

ここから新しいp要素が始まりました。上の『』の文章とこの文章との間に空白が確認できました。上の『』内の文章が一つの段落、今書いている文章がまた同じように下の文章との間に空白ができるまでが一つの段落となります。

excelやPowerPointで書類を作成するときや、授業の内容をノートにまとめるときなども「改行」を行うと思います。改行をしないと文字がだらだらと並び読みにくくなってしまいます。HTMLでもそれと同じような目的として、このp要素が使われます。

ちなみにここではわかりやすい例として「改行」と説明しましたが、改行をするだけならまた別の<br>というタグを使用します。brタグはまた別の記事で解説します。

p要素は改行するものではなく、「段落を変えるもの」と覚えておいてください。

pタグについて
クリックで拡大

p要素と記事のレイアウト

ハリボー
ハリボー

とにかく記事を書くときはp要素を使えばいいんだね。

何も考えずに使ってもだめだよ。記事の見やすさとかも考えようね。

ヒナ
ヒナ

段落間の幅

段落が変わると一つ前の段落との間に空白ができます。

このブログでは表示されている文字サイズに合わせた空白の幅に設定しています。もしこの文字サイズを大きくしたい、小さくしたいと考えた場合、空白の幅をもう少し広く(狭く)することもできます。

こんなかんじです。「二つ上の段落」と「一つ上の段落」との間の空白よりも、「一つ上の段落」と「この段落」との間の空白の方が大きくなりました。このようにブログを読みやすくするために、文字サイズに合った段落の空白を調整することも大切です。

この記事では詳しくは説明しませんが、これは「CSS」と呼ばれるものを使用しています。この記事を見ている人はきっと、HTMLを始めたばかりだと思います。CSSはHTML同様、Webプログラミングをする上で必須ですが、今は「そんなものもあるんだ」くらいで深く考えなくて大丈夫です。

CSSを使った段落間の幅
クリックで拡大

段落を変えるタイミング

一つの記事を書いていく中で段落は複数存在します。段落の数は記事全体の文章が長ければ長いほど多くなります。この段落を変えるタイミングに決まりはありませんが、「その段落の文字数ではなく、文章の区切りの良さ」でわけることを心がけましょう。ブログを読む画面の幅にもよりますが、この記事内でも長い文章では5行、短い文章では2行しかない段落があります(PC画面)。ちなみにこれはp要素の説明ではなく文章を書くテクニックですが、全て綺麗に同じ幅にするよりも「一つ目の段落は3行、二つ目の段落は4行、二つ目は2行、三つ目は5行」など、長い文章と短い文章を交互にしていくことで読みやすい文章になります。もちろんこれはあくまでテクニックの一つなので、段落ごとの文字数を意識するよりも「どこを段落として区切ったらわかりやすいか」を意識する方が良いでしょう。

というふうに長々書きましたが、上の文章は読みにくかったと思いませんか?上の文章は僕の感覚で行くと、「3段落」に区切ります。「一つの記事を〜」が一つ目、「この段落を変えるタイミングに〜」が二つ目、「ちなみにこれはp要素の〜」が三つ目です。

極端な例で言うと、一つの記事を一つのpタグだけで構成することも可能です。しかし段落をわけないと上の文章のように、とても読みにくい文章になってしまいます。分けるタイミングも分ける数も決まりはありませんが、「読みやすいこと」を意識して段落分けをするように心がけましょう。

HTML中で改行

先ほど、「HTMLは段落を変えるもの」と説明しました。同時に<br>という、改行をしてくれるタグがあることも簡単に紹介しました。

<p>要素はHTML編集中に開始タグと終了タグで囲み、次に新しく開始タグが書かれたときに改行されます。<br>タグは使えばその時点で改行されます。この記事では簡単にしか説明しませんが、<p>タグで段落を変えると段落間に空白ができますが、<br>はできません。

HTMLを始めたばかりの人はこれらの役割をよく知らずに、「HTMLで改行したのにプレビューを見ると改行されていない!」ということがよくあります。

HTML編集中の改行は、下のコードを見てもらえばわかるように改行として扱われません。改行をしたいときは、<p>タグで囲むか<br>タグを使いましょう。

※CodePenの使い方がわからない方はこちら

See the Pen XWJROXP by Kosei@SplaTech (@pompom_stk) on CodePen.

WordPressにおけるp要素

Webサイトを作るときは、さまざまなサービスの中から一つ選択し使います。僕はブログを始めたとき、「はてなブログ」というものを使っていました。今はWebプログラミングをするための練習も含めて「WordPress」というものを使用しています。

WordPressは、HTMLを全くわからなくても使うことができます。記事の編集画面は下ノートの左側のような画面で、段落を変える度に「まず<p>タグを書いて文章を書いたら</p>タグで段落を終わらせて」のようなことを考える必要はありません。段落を変えたいところでエンターキーを押せば、自動的に段落が切り替わるようになっています。

テーブル(表)を作ったり、このブログの目次のようなおしゃれな囲みをつけたいときなどは、HTML編集に切り替えることもできます。HTML編集に切り替えると下ノートの左側のような画面になります。<p>から始まり</p>で終わることがわかります。

WordPressにおけるp要素
クリックで拡大

ブログを書くならp要素は必須

ハリボー
ハリボー

p要素は<p>タグと</p>タグで囲めばいいだけなんだ。簡単だね!

あとは余白が変えられるということも合わせて覚えておいてね。

ヒナ
ヒナ

ブログを書く上でp要素は必須だということがわかったでしょうか? ただ記事を書くだけというのなら覚える必要もありませんが、見やすい記事を書くにはやはりHTML編集が必須です。そのためにもまずは、一番簡単なp要素は理解しておきましょう。

理解すると言っても全く難しくはなく、段落は<p>で始まり</p>で終わること、段落間の余白は変えることができること、これさえ理解できていればp要素に関しては問題ありません。

これからWebプログラミングを始めようという人にとっては、p要素はスタート地点です。全ての基本はこれで、あとは<>の中身を他のタグに変えるだけです。どのようなタグがあるかはまた別の記事で見ていきましょう。