pタグとは？その使い方と意味について。改行をさせないように打ち消し方も解説

pタグとはなんで勝手に改行してしまうのか。初心者のうちは使い方もタグの意味もよくわからない…。
そんな風に悩んだ人もいるのではないでしょうか。この記事の中でpタグについてわかりやすく解説しております。
また、pタグの改行をさせないようにする打ち消し方もご紹介しておりますので、是非最後までご覧ください。

目次: pタグとは?意味についてもご紹介; pタグの使い方について; pタグを改行させないようにするには？

pタグとは?意味についてもご紹介

pタグとは、〜タグで囲んだ箇所を一纏めの段落にするという指定です。
なお「p」はParagraph（パラグラフ / 段落）の略です。

pタグで囲われた箇所がひとつの段落ですので、タグがその段落の終了を意味しており、この終了に伴い改行が実行されます。
の後に書かれたテキストなどは段落外にある為、改行が行われた先で表示されます。

pタグのソース形式

〜

タグの要素

ブロック要素

pタグの使い方について

pタグの使い方と使用例を紹介します。

pタグの使い方のHTML例

<p>pタグの中に記述しているものは一つの段落としてコンピュータに情報を与えますが、
ソース上で改行を実施しても改行をするという指示がコンピュータに送られないので改行はされません。</p>
<p>改行を実施したい場合はbrタグと一緒に使用すると<br>
改行が可能になります。</p>

結果

pタグの中に記述しているものは一つの段落としてコンピュータに情報を与えますが、ソース上で改行を実施しても改行をするという指示がコンピュータに送られないので改行はされません。

改行を実施したい場合はbrタグと一緒に使用すると
改行が可能になります。

pタグを改行させないようにするには？

pタグを改行させないようにするにはcssを使用しての要素を変更する。
つまり段落としての機能を無効化することにより、”改行”されているような見た目を無効化することができます。

pタグの要素の変更方法

cssを使用してインラインブロックまたはインライン要素に変更することで改行しないように変更できます。

CSSを使用して要素の変更

<style>
p{
    display: inline-block;
} 
/* または */
p{
    display: inline;
}

/* 個別指定の場合はこちら */
.p-style{
    display: inline-block;
}
</style>

<div>
    どちらかのCSSを反映すると
    <p>インラインブロック要素</p>または<p>インライン要素</p>
    になるので改行をしないように出来ます。
</div>
<!--または-->
<p class="p-style">pタグ全体ではなく個別に改行をさせないように指定する場合はclassを追加する</p>

結果

どちらかのCSSを反映すると

インラインブロック要素

または

インライン要素

となるため改行をしないように指定出来ます。

pタグ全体ではなく個別に改行をさせないように指定する場合はclassを追加する

pタグまとめ

pタグとは、その使い方と意味についてを説明してきました。
改行させないようにするためには段落としての機能を無効化することで簡単に対応が可能です。
複雑な要素も少なく一般的なタグですので、と仲良くなって使いこなしていきましょう。