シュウ

今回は【HTML】pタグとbrタグの使い方、段落と改行を理解し指定しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はpタグとbrタグで段落と改行を指定する解説になります

前回はHTMLの基本構造について解説しました。
HTMLを学び始めた方は、コードを見た際に、「まず、何を書いたら良いのだろうか」と思う方は、
下記のリンクから基本構造の詳細をご確認ください。
【HTML】基本的な書き方！ 基本構造とメタデータを学ぼう

今回は、初心者向け講座になります。
pタグとbrタグを使い文の構成を行います。また、今回はCSSで装飾を行なっていきます。

pタグとbrタグとは

pタグとは
「pタグ」は文章内の段落を示します。段落の開始から終了を<p>〜</p>で囲みます。
「pタグ」はParagraphの略で、「段落」を意味します。

brタグとは
「brタグ」同じ段落内で改行したいときに使用します。
書き方は以下のようになります

<!--OKの例-->
<p>情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など<br>
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。<br>
目立つ、熱を感じる、興奮させると行った心理効果を持っています。</p>

<!--NGの例-->
<p>情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など<br>
<br> <!--←改行、余白目的では使わない-->
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。<br>
目立つ、熱を感じる、興奮させると行った心理効果を持っています。</p>

注意！
1.段落と段落の改行や余白の為に使用するのはNGです。
2.エンターキーで改行した場合は、ブラウザでは反映しません、必ず<br>タグを入れましょう。

段落に対してCSSを適用

段落に対して、余白や行間を指定する際には、CSSを適用させます。

marginを指定し余白を調整する

marginプロパティは、要素の外側の余白を指定します。
marginプロパティはそれぞれ上「-top」、右「-right」、下「-bottom」、左「-left」の余白を指定することが
できます。

<p>情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など
愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
目立つ、熱を感じる、興奮させると行った心理効果を持っています。</p>

<p>新鮮・生き生き・みずみずしい・のどか・自然 など
新しさの象徴、春の新緑を思わせる爽やかで新鮮さを感じさせる色味です。
のどかさや素朴さえお感じさせる親しみやすい色調になります。</p>

p {
	margin-bottom: 20px;
}

marginについての詳しい解説

【CSS】marginの指定方法を学び余白を作ろう！

marginプロパティは、要素の外側の余白を指定します。

line-heightを指定し行間を調整する

line-heightプロパティは、行の高さ(行間)を指定する際に使用します。
「line-height」を指定する際には、「数値のみ」、「数値+px」、「数値+em」などがあります。
詳しい解説のリンクは下記に載せておきます。

p {
	font-size: 16px;
	line-height: normal;
}

p {
	font-size: 16px;
	line-height: 2;
}

line-heightについての詳しい解説

【CSS】line-heightで行間の高さ指定について！

「数値のみ」、「数値+px」、「数値+em」などの違いを解説しております。

letter-spacingを指定し文字の間隔(文字間)を調整する

letter-spacingプロパティは、文字の間隔(文字間)を指定する際に使用します。
「letter-spacing」を指定する際には、絶対値と相対値があります。
詳しい解説のリンクは下記に載せておきます。

p.font_em14 {
	font-size: 14px;
	letter-spacing:0.1em;
}

p.font_em16 {
	font-size: 16px;
	letter-spacing:0.1em;
}

p.font_em20 {
	font-size: 20px;
	letter-spacing:0.1em;
}

letter-spacingについての詳しい解説

【CSS】letter-spacingで文字間を指定しましょう！

「数値+px」、「数値+em」などの違いを解説しております。

first-line、first-letterを指定し最初の1行目、1文字目にスタイルを適用

first-lineプロパティは、要素の1行目にスタイルが適用されます。
first-letterプロパティは、要素の1文字目に適用されます。
詳しい解説のリンクは下記に載せておきます。

<p>赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など</p>
<!--以下省略-->

/*--first-lineを指定--*/
p:first-line {
	/*--文字色の指定*/
	color: #febe3e;
	
	/*--太字を指定*/
	font-weight: bold;
}

<p>赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など</p>
<!--以下省略-->

/*--first-letterを指定--*/
p:first-letter {
	/*--文字サイズの指定*/
	font-size: 20px;
	
	/*--文字色の指定*/
	color: #333;
	
	/*--背景色の指定*/
	background-color: #febe3e;
	
	/*--余白の指定 上下左右に10px*/
	padding: 10px;
}

first-line、first-letterについての詳しい解説

【CSS】擬似要素のfirst-line、first-letterの使い方!

「first-line」、「first-letter」の解説しております。

まとめ

今回はこれで以上です。

最新記事

• 

  【HTML】download属性について、ファイルのダウンロードを学ぼう!

  2021.07.27

• 

  【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

  2021.07.09

• 

  【HTML】kbd要素の使い方、キーボードのキーを表す要素!

  2021.07.06

• 

  【HTML】hr要素の使い方、段落の区切りを示す要素!

  2021.07.02

関連記事

< 前の記事

【HTML】基本的な書き方！ 基本構造とメタデータを学ぼう

次の記事 >

【HTML】aタグの基本的な使い方、リンク先のURLを指定しよう!