Pタグとスタイルシートでレイアウト


 Pタグにスタイルシートを使ってレイアウトの幅を広げましょう。

 PタグのPとは、Paragraph(段落)の略です。
 <p>〜</p> でひとつの段落を示します。
1.スタイルシート無し
<p>Pタグです</p>   (注:前後に空白行が付く)

Pタグです

2.文字色、サイズ、フォント
<p style="color:blue; font-size:24px;
font-family:HGP創英角ポップ体;">Pタグです</p>

Pタグです

3.背景色を付ける
<p style="background-color:pink;">Pタグです</p>
 (注:横幅はテキスト長でなく、1行)

Pタグです

4.中央配置
<p align="center" style="background-color:pink;">
Pタグです</p>

Pタグ です

5.縦横の長さを指定
<p style="width:200px; height:50px; background-color:pink;">Pタグです</p>

Pタグです

6.前後の空白行を消す
<p style="margin:0px; width:200px; height:50px; background-color:pink;">Pタグです</p>
■消された上段の空白行

Pタグです

■消された下段の空白行
7.枠内中央配置
<p align="center" style="width:200px; height:50px; background-color:pink;">Pタグです</p>

Pタグです

8.複数行中央配置
<p align="center" style="width:200px; height:50px; background-color:pink;">PタグですPタグですPタグですPタグです</p>

PタグですPタグですPタグですP タグです

9.複数行左寄せ配置
<p align="left" style="display:inline-block; width:200px; height:50px; background-color:pink;">PタグですPタグです PタグですPタグです</p>
 (注:TDタグで中央配置を指定)

PタグですPタグです PタグですPタグです

10.テキスト周りの余白
<p align="left" style="padding:5px; display:inline-block; width:200px; height:50px; background-color:pink;">
PタグですPタグですPタグですPタグです</p>
 (注:TDタグで中央配置を指定)

Pタグで すPタグですPタグですPタグです

11.複数行縦中央
<p align="left" style="display:table-cell; vertical-align:middle; width:200px; height:80px; background-color:pink;">PタグですPタグですP タグですPタグです</p>
 (注:TDタグで縦中央配置を指定)

PタグですPタグですPタグですP タグですPタグです

12.行の高さを調整
<p style="line-height:24px; width:200px; height:80px; background-color:pink;">
PタグですPタグですPタグですPタグですPタグです</p>

PタグですPタグですPタグですP タグですPタグです