2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
HTMLの基本中の基本、pタグについて解説します！
目次
pタグとは、段落を指定するためのタグになります。
pはParagraphの略であり、翻訳するとそのまま「段落」という意味ですね。
主にWebページに文章を表示させる際、段落としてマークアップする時に使用します。
それでは、実際にpタグの使い方を見てみましょう。
See the Pen pタグについて by spiqa design (@spiqa_design) on CodePen.
基本的には段落や句点(。)ごとにテキストをpタグで囲みますが、文章の内容によってはグルーピングの仕方を変えることもあります。
ブラウザのデフォルトCSSにより、pタグの上下にはmargin(余白)が入るようになっており、読みやすくなっています。
たまに長い文章を1つのpタグ内にまとめて、文章間の余白はbrタグ(改行するためのタグ)を連続で使って空けているWebページを見かけます。
しかし、このような記述では以下のようなデメリットがあります。
pタグで正しくグルーピングすれば、ブラウザごとの表示はほぼ変わりません。
また、読み上げ機能でもグルーピングしたpタグごとに一息おいて読み上げてくれるようになります。
HTML/CSS初学者の方が疑問に思うこととして多いのが、pタグとspanタグの違いです。
一見、どちらも文章を囲むためのタグなので、最初は何が違うのかわかりづらいですね。
実はpタグとspanタグは全く異なるタグになります！
前述した通り、pタグには段落を指定するという役割があります。
spanタグは文章内の微調整をするため(一部だけ文字色を変えるなど)の汎用的なタグになり、spanタグ自体に明確な役割はありません。
pタグはブロックレベル要素ですが、spanタグはインライン要素になります。
要素のタイプの違いについては別の記事で詳しく解説していますので、下記記事をご覧ください。
ブロックレベル要素とインライン要素についての記事はこちら
以上、pタグについての解説でした。
pタグを正しく使用して、誰にでも見やすく使いやすいWebサイトを制作しましょう。
こちらの記事もおすすめ
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/