どうも、ソフトサラダが大好きなユトピ(@yutopi60pa)です。
みなさんHTMLのpタグはご存知ですかな？なんとなく文章を囲むときに使うタグだってことはわかると思うけど、詳しいことまでは理解していない人が意外と多いとおみます。そんな僕もその一人。
ということで今回はHTMLのタグ「<p>タグ」について勉強していきましょうぜ！
pタグとは？
pタグはブロック要素で、英語のParagraphの略です。
pタグで囲まれた部分は段落として扱われます。
段落はそのままの意味ですね。文章のひとかたまりを表すものです。
pタグを使ってみよう！
段落
コード
|
1 2 3 |
<p style="background:coral; color:#fff; width:80%;">段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！</p> <p style="background:cadetblue; color:#fff; width:80%;">段落2ですぞ！段落2ですぞ！</p> <p style="background:#FFD700; color:#fff; width:80%;">段落3ですぞ！段落3ですぞ！段落3ですぞ！段落3ですぞ！</p> |
結果
段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！
段落2ですぞ！段落2ですぞ！
段落3ですぞ！段落3ですぞ！段落3ですぞ！段落3ですぞ！
段落1、2、3と三か所のpタグを使いました。
今回は分かりやすくするためにcssに背景色とwidthを80%で指定してあります。
このようにpタグはブロック要素なので、縦に並んでいきますね。
HTML上で長い文章を段落ごとに分けたい場合はpタグで囲んであげるのが適切ですね。
注意点：改行タグの「<br />」との違いは？
そういえばpタグで改行できるなら、改行タグの<br />とは何が違うんでしょうか？
こいった疑問を持つ方もいると思います。
ここで注意点。
pタグは囲った文章の後に改行が入りますよね。
この特徴を利用して、改行させたい場所に<p>タグを使用する人がいるのですがこれは間違いです。
HTMLに改行させるためのタグ「<br />」があります。
これを使えば好きなところで改行させることができます。
pタグの改行は、あくまでブロック要素の特徴と、段落を分けるための改行なんです。レイアウトのためにpタグを使用するのは適切ではありません。
1段落内での改行の場合は<br />を使用するのが適切です。
<p>タグと<br />の改行の違いは？
|
1 2 |
<p style="background:coral; color:#fff; width:80%;">段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！<strong>ここで改行ですぞ！</strong><br />段落1ですぞ！段落1ですぞ！段落1ですぞ！</p> <p style="background:cadetblue; color:#fff; width:80%;">段落2ですぞ！段落2ですぞ！段落2ですぞ！段落2ですぞ！段落2ですぞ！</p> |
結果
<br />を使ってみる
段落1ですぞ！段落1ですぞ！段落1ですぞ！段落1ですぞ！ここで改行ですぞ！
段落1ですぞ！段落1ですぞ！段落1ですぞ！
段落2ですぞ！段落2ですぞ！段落2ですぞ！段落2ですぞ！段落2ですぞ！
こんな感じでpタグ＝段落の中で、文章の終わりに読みやすくするために<br />を使用しています。
1段落内での改行のときに使うのが適切ですね。
「align」が指定できる！
最後に<p>タグには、整列させることができる属性の「align」を指定することができます。
pタグで囲った部分を右揃えや左揃え、中央揃えなどを好きなように整列させることができます！
百聞は一見にしかずは一見にしかず、やってみましょう！
<p>タグのalign！
左揃え「align=”left”」
コード
|
1 |
<p align="left" style="background:coral; color:#fff; width:100%;" >左揃えですぞ！左揃えですぞ！左揃えですぞ！</p> |
結果
左揃えですぞ！左揃えですぞ！左揃えですぞ！
中央揃え「align=”center”」
コード
|
1 |
<p align="center" style="background:cadetblue; color:#fff; width:100%;" >中央揃えですぞ！中央揃えですぞ！中央揃えですぞ！中央揃えですぞ！中央揃えですぞ！</p> |
結果
中央揃えですぞ！中央揃えですぞ！中央揃えですぞ！中央揃えですぞ！中央揃えですぞ！
右揃え「align=”right”」
コード
|
1 |
<p align="right" style="background:#F4A460; color:#fff; width:100%;" >右揃えですぞ！右揃えですぞ！右揃えですぞ！</p> |
結果
右揃えですぞ！右揃えですぞ！右揃えですぞ！
両端揃え「align=”justy”」
コード
|
1 |
<p align="justy" style="background:#DEB887; color:#fff; width:100%;" >両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！</p> |
結果
両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！両端揃えですぞ！
このように文章の軸を揃えてくれます。
「両端揃え」は左右に隙間なく文章を配置してくれます。
そして説明しておいてなんですが、この「align」は実際はあまり使うことはないです。
cssに「text-align」という同じようなプロパティがありますので、レイアウトの際はそちらを使っていくことが多いですね。
まとめ
以上が<p>タグの解説です。
SEO意識した文章を書くときは非常に重要なタグですので、しっかりと覚えておきましょう。
また使う際は<br />との区別にも注意してくださいね。
質問や意見がありましたらお気軽にツイッターの方へどうぞ。
ユトピのツイッター
@yutopi60pa