【HTML】【p】文章の段落ごとに区分する方法

【HTML】
【p】タグ
文章の段落ごとに区分する方法

「p」タグは、
Web内の文章を段落ごとに区分するのに使われる「ブロック要素」の「HTMLタグ」。

長い文章の中で、
段落が発生したときに、
それぞれの段落を「p」タグでグループ化します。

「p」タグでグループ化するのは、
「CSS」で、レイアウトデザインをするためでもあります。

INDEX

■ 「インライン要素」と「ブロック要素」の違い
■ 「p」タグの使い方

■ 「p」タグの書式
■ グローバル属性
■ イベントハンドラ属性

「インライン要素」と「ブロック要素」の違い

「p」タグは、
「ブロック要素（ブロックレベル要素）」のHTMLタグの一つで、

「HTMLタグ」は、
・ブロック要素
・インライン要素
の２つの種類に分類ができるようになっています。

「ブロック要素」は、
「見出し」「段落」「表」など「文書」「画像」などで構成された集合体で、
一つの「ブロック（かたまり）」のことを意味している。
コンテンツを囲む「枠」のイメージ。

「インライン要素」は、
ブロック要素を構成する「文字」「文章」「画像」などのことで、
文章の一部分を装飾したりするためのHTMLタグなどが「インライン要素」です。
「文章」の一部を装飾するイメージ。

	ブロック要素	インライン要素
CSS「display」プロパティでの値	block	inline
改行	前後に改行が入る	前後に改行が入らない
幅	指定可能	指定不可
高さ	指定可能	指定不可
余白	指定可能	指定不可
内包可能なタグ	なんでもOK	インライン要素のみ
ブロック要素への変換	-	「display」プロパティにより一部可能
インライン要素への変換	「display」プロパティにより一部可能	-

ブロックレベル要素の種類

「address」「blockquote」「center」「div」「dl」「fieldset」「form」「h1 - h6」「hr」「noframes」「noscript」「ol」「p」「pre」「table」「ul」

インライン要素の種類

「a」「abbr」「acronym」「b」「basefont」「bdo」「big」「br」「cite」「code」「dfn」「em」「font」「i」「img」「input」「kbd」「label」「q」「s」「samp」「select」「small」「span」「strike」「strong」「sub」「sup」「textarea」「tt」「u」「var」

Back

「p」タグの使い方

「p」タグは、
「Paragraph」の略で、
文章を段落ごとに区切るのに使用される「HTMLタグ」。
「ブロック要素」の一つで、
「p」タグの前後には、「改行」が加わります。

長い文章を段落ごとに区分するのは、
レイアウトデザイン的な必要性でもあります。
長い文章だと、
枠に入りきらないことや、
配置的に綺麗ではなかったり、
など、色々と扱いにくくなることがあります。

長い文章で扱いにくいときに、
[p」タグを使って、
段落ごとにグループ化し、分割することで、
「CSS」でのレイアウトデザインがしやすくなる時もあります。

Webでは、「p」タグは、
かなり使用頻度の高い方の「HTMLタグ」です。

扱い方は、「div」タグなどの「ブロック要素」とほとんど同じなので、
文章を段落ごとに区分する時には「p」タグを使った方が良いとされています。
「div」タグを使っても問題はないですが、
「p」タグを使うことで、
コンテンツの内容を明示することになります。

意味を持つタグの例

意味	HTMLタグ
ヘッダー	「header」タグ
フッター	「footer」タグ
主要なコンテンツ	「main」タグ
補足的なコンテンツ	「aside」タグ
1つのセクション	「section」タグ
1つの独立した記事	「article」タグ
メニューなどのナビゲーション	「nav」タグ
見出し	「h1-h6」タグ
段落	「p」タグ

「p」タグの基本書式

コンテンツ内容
コンテンツ内容
コンテンツ内容

文字列

グローバル属性

「グローバル属性」は、HTMLのすべての要素（タグ）で指定できる属性。

グローバル属性	説明
acccesskey	「ショートカットキー」を指定できる属性。「値」は、「１文字」で、「半角英数字」を指定する。「大文字」「小文字」は、区別される。「半角スペース」で区切ると、複数の値を指定できる。
id	要素に「ID名」を指定できる属性。「ID名」は、文書内（ファイル）内に一つしか許されないので、同名の「ID名」を複数に指定することはできない。「ID名」は、「CSSセレクタ」として指定できるので、「CSS」レイアウトによく使われる。「ID名」の条件は、・１文字以上・空白文字は使えない要素に固有の識別名を指定します。id属性の値は文書内で一意であり、同じ値を複数の要素に指定できません。また、最低でも1文字が必要で、空白文字は含めません。CSSのセレクタとして利用できるほか、リンクのフラグメント識別子としても利用できます。
class	要素に「クラス名」を指定できる属性。「クラス名」は、文書（ファイル）内に、同一クラス名を複数指定できる。「クラス名」は、「CSSのセレクタ」として指定することができるので、「CSS」でのレイアウトデザインによく使われる。「半角スペース」で区切ることで、複数のクラス名を指定でき、使用できるのは、「半角英数字」で、、最初の文字は「英字」から始める。
contenteditable	「閲覧者」による要素の「編集」を許可するかを指定できる属性。「値」を指定しない場合は、「上位要素」の指定を継承する。・「true」 = 閲覧者による編集を許可する・「false」 = 閲覧者による編集を許可しない
dir	要素内にある「文章の向き」指定する属性。・「ltr」 = 「左から右」（left to right）。・「rtl」 = 「右から左」（right to left）。
hidden	指定すると、要素を表示しなくなる属性。
lang	要素内の文字列が、記されている言語を指定する属性。指定するタグによって、「html要素」「文書全体」「一部の要素」などに言語を指定することが可能。
spellcheck	指定したタグ（要素）の内容を「スペルチェック」するかを指定する属性。・「true」 = スペルチェックを実行する・「false」 = スペルチェックを実行しない
style	「HTMLタグ」に直接「CSS」を記述するための属性。
tabindex	「tab」キーで、フォーカスを移動させるときの「優先順位」を指定する属性。「正の数字」で値を指定することで、「優先順位」を指定する。「0」を指定された要素が「最後」にフォーカスされる。
title	「タグ（要素）」のタイトル的な補足情報を記述する属性。「値」には、任意のテキストを記述する。
translate	「タグ（要素）」内の内容に「翻訳」を実行するかを指定する属性。・「yes」 = 翻訳を許する。・「no」 = 翻訳を許可しない
カスタムデータ	「カスタムデータ」は、製作者が属性名を決めることができる属性で、「data-*****="値"」という書式で記述することが可能。「JavaScript」を利用してのデータ処理も可能。

イベントハンドラ属性

「イベントハンドラ属性」は、
属性値に指定した「JavaScript」などのプログラムコードを
「操作（アクション）」に合わせて実行する属性。

イベントハンドラ属性	説明
onclick	マウスクリックしたときに指定内容を実行することができる属性。「Javascript」などのプログラムコードを指定して、動的な変化を起こすことも可能。画像に置いては、画像のURLを変更するように指定することも可能。
oninput	入力フォームなどで、データが入力されたときにアクションが実行される属性。「Javascript」などの実行プログラムを指定すると、データ入力されたときにプログラムが実行される。
onsubmit	入力フォームの「送信」ボタンを押した時など、データが送信されるときに、アクションを実行する属性。

Back