その１

段落の先頭に字下げを設定

いつものように先回の最終ページを変更していくが、わしは、またファイル名を変更するからの。見本ページはsample18.htmlとstyle18.cssぢゃ。

で、じゃ、第８回のその３・段落設定／行間を空けるで学習したことぢゃが、覚えておるかいのぉ？ｐタグで記事部分を囲んだんぢゃ。
ｐタグ＝段落なんで、今回もそのｐタグについて指定していくぞい。

現在は、下のように、行間の指定しかないと思うが。

p {
line-height: 1.5em;
}

それに追加していくぞい。

p {
line-height: 1.5em;
text-indent: 1em;
}

こうなったかいの？
その１とその２の文章の一番最初のみ１em、つまり１文字分余白が空いたはずぢゃ。（字下げ）

その２

全体に字下げの設定がしてある中で、一部の段落を字下げしないようにする

で、続けていくぞい。
同じｐタグ（段落）でも、字下げしたくない段落がある場合ぢゃが・・・・
その段落をやっぱりhtmlの方で、で囲んで、クラス名をつけるんぢゃ。
そうぢゃの、見本ページでは、その２の記事部分の始まりにつけたをとして、クラス分けしておくことにしよう。
そして、cssファイルの方に下のように追加ぢゃ。下の青い文字の部分ぢゃぞ。

p {
line-height: 1.5em;
text-indent: 1em;
}

p.yame {
text-indext: 0;
}

どうぢゃ？その１は字下げのままぢゃが、その２の文章の先頭は字下げになっておらんぢゃろ？見本ページ

その３

１文字目だけ見た目を変える

お次もｐタグぢゃ。段落の１文字だけ、つまり先頭の文字だけ特別に装飾してみるぞい。

字下げがあってはおかしいのでの。ｐタグからは字下げの設定は削除して、
下の赤いプロパティを追加したぞい。
それから、で始まる段落の最初に画像があると１文字目の装飾は適応されないらしいからの。画像は下に配置換えしておいた。画像の配置換えは、htmlでするんぢゃぞ。
で、p:first-letterとなってって、クラス分けかIDか？と思われた方もいるぢゃろうが、今回のfirst-letterは、とくにhtmlでここがそうだ！と囲む必要はない。ｐタグの中の最初の文字と判断してくれるからの。

p:first-letter {
font-size: 3em;
font-weight: bold;
color: orange;
padding-right: 0.3em;
float: left;
}

p {
line-height: 1.5em;
}

こうなったんぢゃが。
その２の方は、字下げのときに適応除外させたままぢゃから、変化はなしぢゃ。
さて、解説ぢゃな。

p:first-letter	p（段落）の最初の文字（段落１文字目）の指定だと宣言
font-size: 3em	文字サイズ３em
font-weight: bold	文字の太さは、太文字
padding-right: 0.3em	段落１文字目の右側の余白を0.3em
float: left	段落１文字目の回り込みを左に指定

数値など、いろいろテストしてみてくだされ。

で・・ぢゃ、実は、段落１文字目を１つのタグと見なしておるから、今までのタグのように、背景色とか枠線とか枠線の種類とか色などの装飾もできてしまうわけぢゃっ！

追加してみたぞい。

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;
}

どうぢゃの？こうなったちゃろうかの？
お分かりぢゃと思うが、赤い文字の１行目が背景色、２行目が枠線の種類、３行目が枠線の色、４行目が枠線の太さぢゃ。

これもまた、いろいろ設定してテストしてみてくだされ。
背景色だけにするとか、おお！設定によっては白抜きもできるのぉ。
枠線だけにするとか、線も上下だけとか左右だけとか、３方とか、１辺だけとか・・・・いろいろ装飾できてなんか楽しくなってきそうぢゃわい。

にこにこ顔の助手
楽しくなるかならないかはその人によるでしょうけど、でも、バリエーションがたくさんあって面白そうなことは確かですよね。いろいろ試してみてください。
そして、次回はフォームメールの飾り付け？をちょっとしたいと思います。