最初の文字の装飾

最初の1文字の字下げ

学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。

CODE

HTML


   <p class="indent">学校には宿直があって、職員が代る代るこれをつとめる
。但し狸と赤シャツは例外である。
何でこの両人が当然の義務を免かれるのかと聞いてみたら、
奏任待遇だからと云う。面白くもない。月給はたくさんとる
、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。</p>

CSS


.indent {
	text-indent: 1em;
}
.indent::first-letter{
	font-size: 130%;
}

最初の1文字を囲み文字に

CODE

HTML


   <p class="indentKakomi">学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。</p>

CSS


.indentKakomi{
	text-indent:1em;
}
.indentKakomi::first-letter{
	border: 1px solid;
	font-weight: bold;
	color: red;
	font-size:130%;
}

2行目から1字下げ

※学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。

CODE

HTML


   <p class="indentback">※学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。</p>

CSS


.indentback{
	text-indent: -1em;
	padding-left: 2em;
}

最初の1文字に色を付け、2行目から1字下げ

ドロップキャップ(最初の1文字を大き)

CODE

HTML


   <p class="dropcap">学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。</p>

CSS


.dropcap{

}
.dropcap:first-letter {
    font-size: 3em;
    line-height: 1;
    float: left;
    margin: 0 .2em 0 0;
    padding: .1em 0;
    background:#e3e3e3;
}