VIDEO LESSON

HTMLのpタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:06動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の四十一本目は、ピータグです。
0:06ピーは段落を意味する英単語、パラグラフの頭文字で、一つのまとまった文章の塊を示す、
0:10最も基本的なタグの一つです。
0:14ブログの本文も、商品の説明も、ニュースの文章も、土台はこのピータグの積み重ねでできています。
0:20今回は基本の書き方から、中に入れてよいものとダメなもの、そして初心者がつまずきやすい自動で閉じられる仕組みまでを順に確認していきます。
0:29地味に見えますが、文章の読みやすさを左右する大切なタグです。
0:33どんな場面で使うのかを考えてみましょう。
0:36原則はシンプルで、普通の説明文はピータグで書き、話題が変わったら新しいピータグを始めます。
0:43一つの段落に一つの話題を入れるようにすると、読み手は区切りごとに内容を理解でき、
0:47ぐっと読みやすくなります。
0:52逆に、何でもかんでも長い一つの段落に詰め込むと、途中で息切れする文章になってしまいます。
0:59見出しはエイチタグ、箇条書きはリストのタグ、というように、文章の種類ごとに担当のタグが決まっています。
1:07その中で、本文の中心を担うのがピータグだと覚えてください。
1:12基本の書き方を確認します。
1:13文章をピーの開始タグと終了タグで囲むだけです。
1:17例のように段落を二つ並べると、ブラウザーでは段落と段落の間に自動で少しの余白が付き、
1:21見た目にも区切りがはっきりします。
1:25ここで注意したいのは、エディターの中でエンターキーを押して改行しても、それだけでは段落は分かれないという点です。
1:34エイチティーエムエルの文章は、タグで囲んで初めて意味のある段落になります。
1:39段落を変えたいときは、改行ではなく、新しいピータグを書くのが正解です。
1:44記事の活用例を、自分の言葉でたどってみましょう。
1:48この例では二つの段落が並んでいます。
1:51一つ目はエイチティーエムエルが内容の構造を作る話、二つ目はシーエスエスが見た目を整える話です。
1:58話題が切り替わる場所で段落を分けているのがポイントです。
2:03もし二つの話を一つのピータグに続けて書いてしまうと、構造の話と見た目の話が混ざって伝わり、
2:07読み手が混乱します。
2:12段落分けは、見た目を整える作業であると同時に、考えを整理する作業でもあります。
2:18書く前に、話題の切れ目がどこかを意識してみてください。
2:22ピータグの中に入れられるものを整理します。
2:26入れてよいのは、文章の流れの中で使う小さな要素、いわゆる文中の要素だけです。
2:32たとえばリンクのエータグ、強調のストロングやイーエム、範囲を示すスパンなどは、
2:36段落の中に自然に溶け込ませられます。
2:40一方で、ディブやセクションのような大きな箱、見出し、そして別のピータグそのものは、
2:45中に入れることができません。
2:49大きなまとまりはピーの外に置き、ピーの中は文章とその装飾だけにする、という線引きを守ってください。
2:56ここが今回いちばん大切なルールです。
2:59少し踏み込んで、終了タグの話をします。
3:02実はピータグは、条件によっては終了タグを省略してもよいと決められている珍しいタグです。
3:09しかし教材では、開始タグと終了タグを必ずセットで明示することをおすすめします。
3:14理由は、省略するとブラウザーが段落の終わりを自動で判断するためです。
3:20たとえばピーの中にディブを入れると、ブラウザーはその手前でピーを勝手に閉じてしまい、
3:25自分が書いたソースと実際の構造が食い違ってしまいます。
3:30表示がおかしいときは、開発者ツールの要素パネルで、段落が意図せず閉じられていないか確かめてください。
3:37属性の整理をします。
3:39ピータグには、この要素専用の属性はありません。
3:43使えるのは、どの要素でも使える共通属性です。
3:46代表例は三つあります。
3:48一つ目はアイディーで、文書の中で一つの要素を特定し、ページ内リンクやプログラムからの参照に使います。
3:56二つ目はクラスで、シーエスエスやプログラムで複数の段落をまとめて扱うときに使います。
4:03三つ目はラングで、その段落の言語を示します。
4:07日本語の文章ならジェイエーを指定します。
4:10そのほか、独自の値を保持するデータ属性も使えます。
4:14属性は段落自体の意味を変えるものではない点も覚えておきましょう。
4:19見た目の調整でよくある誤解を解いておきます。
4:23段落どうしの間隔を広げたいとき、空のピータグを何個も並べる方法は使ってはいけません。
4:30空の段落は意味のない要素であり、読み上げソフトなどにも余計な情報を渡してしまいます。
4:37間隔はシーエスエスのマージンで調整するのが正しい方法です。
4:41また、段落の中で一行だけ改行したいときはビーアールタグの出番ですが、それは住所や詩のような、
4:47改行自体に意味がある場面に限ります。
4:52段落を分けたいならビーアールではなく新しいピータグです。
4:57意味はエイチティーエムエル、見た目はシーエスエス、と役割を分けてください。
5:03使うときの注意点を三つにまとめます。
5:06一つ目、段落の中にディブやセクション、別の段落といった大きな要素を入れないことです。
5:12ブラウザーの自動補正で構造が崩れる一番の原因になります。
5:17二つ目、一つの段落に話題を詰め込みすぎないことです。
5:21長くなったら、話題の切れ目で思い切って段落を分けましょう。
5:25三つ目、表示確認です。
5:27横幅三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも文章が欠けずに読めるか、
5:31実機でも確かめてください。
5:36あわせて、ソースと実際の構造が一致しているか、開発者ツールで見る習慣も付けておくと安心です。
5:43ブラウザー互換性を確認します。
5:45記事が参照するエムディーエヌの記録では、ピータグはクロームが一以降、エッジが十二以降、
5:50ファイアフォックスが一以降、サファリが一以降で対応しています。
5:56つまり、各ブラウザーのほぼ最初のバージョンから使えてきた、歴史の長い要素です。
6:01そのため、対応を心配する必要はほとんどありません。
6:05むしろ気をつけるのは互換性よりも書き方の方で、中に入れてよい要素のルールや、
6:09自動で閉じられる仕様を守れているかどうかです。
6:14安心して使えるからこそ、正しい意味で使うことを意識しましょう。
6:18最後にまとめです。
6:20ピータグは、一つの段落を示す、文章の最小単位でした。
6:24ポイントは三つです。
6:26一つ目、一つの段落には一つの話題を入れ、話題が変わったら新しい段落を始めること。
6:33二つ目、中に入れてよいのは文字と文中の小さな要素だけであり、大きな箱や別の段落は外に置くこと。
6:42三つ目、段落の間隔は空の段落ではなくシーエスエスのマージンで調整し、終了タグは省略せずに明示することです。
6:51練習として、身近な文章を三つの段落に分けて書いてみてください。
6:57話題の切れ目を考えるだけでも、伝わる文章に近づきます。
7:02お疲れさまでした。
7:04次回もお楽しみに。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

pタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。1つの段落。中に section や別の p を入れず、文章の区切りとして使います。

解説記事・サンプルコードを読む：HTMLのpタグとは？属性・使い方・ブラウザー互換性と活用例 →