段落（pタグ）

段落（pタグ）もボックスに見なして設定できます！
※カラーリスト（ブラウザ対応色名）
 ※サイズ指定単位リスト

１．行間

p {
line-height: 行間の数値;
}		 p {
line-height: 1.5em;
}		 ※サイズ指定単位リスト

２．段落１文字目を下げる（字下げ）

p {
text-indent: 1em;
}		 １文字下げるからここでの数値は、1em

ページ全体の段落（<p></p>で囲んだ段落）設定で、字下げが設定してある場合、ある段落だけ字下げをしたくない場合、その段落をクラス分けして別に設定する。
※その場合、htmlでそのpタグにクラス名をつけることも必要になる

●webページのhtmlモードで
字下げしない段落<p><p/>のところの最初の<p>のところにクラス名を記述
クラス名は、スタイルシートの方のみ見てどういったものか判断できるようにしておいた方が良い。
※終了タグ</p>の方は追記なし。

<p class="no">
文章
</p>
●スタイルシート
p {
line-height: 1.5em;
text-indent: 1em;
}

p.no {
text-indext: 0;
}
</p>

※pだけは、pタグ全体（学年全部）に影響し、.クラス名（ドット＋クラス名）のは、クラス分けした、そのクラス名のpタグのみに影響。

△PageTOPへ

３．一文字目の装飾

●例
p:first-letter {
font-size: 3em;
font-weight: bold;
color: orange;
padding-right: 0.3em;
float: left;
 background-color: lightgreen;
border-style: solid;
border-color: brown;
border-width: 1px;
}

p {
line-height: 1.5em;
}
p:first-letter  p（段落）の最初の文字（段落１文字目）の指定だと宣言
font-size: 3em 文字サイズ３em
font-weight: bold 文字の太さは、太文字
padding-right: 0.3em 段落１文字目の右側の余白を0.3em
float: left 段落１文字目の回り込みを左に指定
background-color: lightgreen; 段落１文字目の背景色
border-style: solid; 段落１文字目を囲む線のスタイル（線種）
border-color: brown; 段落１文字目を囲む線の色
border-width: 1px; 段落１文字目を囲む線の太さ

※<p>で始まる段落の最初に画像があると１文字目の装飾は適応されないので画像の位置に要注意

※pタグのクラス分けではないので、htmlの方の追加記述は必要ない。

△PageTOPへ

４．画像の回り込み

●指定例

img
{
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
●float: left; … 画像は左より
※leftをrightにすると右よりになる。
●margin-right: 1em; … 画像の右側に1emの余白を設ける。
●margin-bottom: 1em; … 画像の下に1emの余白を設ける。
※bottomをtopにすると上に余白を設けることになる。

※この回り込みは、画像だけでなく、各タグにも適応できる。
　（ページの余白をbodyタグで指定、pタグで段落の周囲の余白、などなど・・）

△PageTOPへ