【HTML初心者入門】段落を表すpタグとは?使い方も徹底解説! | WEBCAMP NAVI
【7月枠も残りわずか】転職保証コース

【HTML初心者入門】段落を表すpタグとは?使い方も徹底解説!

みなさんはHTMLの学習をしていませんか?

今回の記事では<p>タグの使い方や注意点について紹介していきます!

段落を形成する

<p>タグはParagraphの略で、<p>~</p>で囲まれた部分がひとつの段落(文章中の内容的なまとまり)
であることを表します。

一般的なブラウザでは<p>~</p>の前後に1行分改行されますが、 単に改行することが目的の場合には、<p>タグではなく<br>タグを使用してください。

属性

1. 水平方向の位置指定

「align」で水平方向の文字列の位置を表します。

left :左寄せ
center :中央揃え
right :右寄せ
justify :両端揃え

注意点

1. <p>要素同士の間隔の調整

<p> 要素同士の間隔を調整するには CSS の margin プロパティを使用して下さい。
空の<p>要素 (<p></p>) や br 要素 (<br>) を 2 つの p 要素の間に記述してこれを実現してはなりません。
<br>要素は改行のためであり、間隔開けのための調整タグとしては不適切です。

2.リスト要素との関係

リスト要素(特にol と ul 要素)は、p 要素の子となることはできません。
そのため、段落にリスト要素が含まれるとき<p>要素が使えません。

なぜなら、<p>で実現する段落は論理上の概念ではなくHTML構造的な概念であるからです。
HTML構造的に考えるなら、リストの前、リスト本体、そして、リストの後でタグを分けます。

従って、<p>要素とリスト要素を組み合わせる場合は次のようになります。

<p>九州には、</p>
<ul>
<li>福岡県
<li>佐賀県
<li>大分県
<li>長崎県
<li>熊本県
<li>宮崎県
<li>鹿児島県
<li>沖縄県
</ul>
<p>の8つの県があります。</p>

逆に”論理的”な段落を実現したいなら、p 要素の代わりに div 要素を使うことができます。

<div>九州には、
<ul>
<li>福岡県
<li>佐賀県
<li>大分県
<li>長崎県
<li>熊本県
<li>宮崎県
<li>鹿児島県
<li>沖縄県
</ul>
の8つの県があります。
</div>
・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<title>Webページ練習</title>
</head>
<body>
<p>ここがひとつめの段落です。
改行はひとつの空白文字になることがあります。</p>
<p>ここがふたつめの段落です。
IEなどでは段落は1行分の隙間を空けて表示されます。</p>
<p>ここがみっつめの段落です。
複数行の改行をしたいときは<br />
brタグを使用しましょう。</p>
</body>
</html>
・学習におすすめの本を探している方は、「【初心者向け】htmlの学習におすすめの本12選!」の記事を参考にしてください。

まとめ

初心者の方向けにpタグを紹介していきましたが、いかがでしたか?

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 12019年4月時点