実験室

セクションの1文字目を大きくするCSS

CSSの:first-letterを使って、セクションの1文字目をで大文字にするデザイン。

:first-letterに対してfont-size以外のプロパティにemを指定するのはブラウザの互換性的に止めた方が良い。

サンプル

テキコされるというのか

この文章はテキコされたダミーテキストです。これというものはまだ無い。

しかしその時にやって来る事におさんの母親さえ姿を食う。これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。この家には人が三毛(ひとま)れを永く猫が所有権という訳である。ただその日その日目にそいつを容(かない)で泣き出すの上、彼等人間がないといって夜中でも彼等の膝(まった主人をさまして我等猫ので泣き出すの中間に掠奪(こたつ)君などは涙を奪(おこ)に至ってくる。

まあ気を容(はい)れた御馳走はあながち主人は代言の書生が来た猫がわるい――ことに吾輩はいつまで名前さえつけて美しい家族的生活を解して次の白君などは必ずその日その背中(たびごと)総がかりで泣き出すの家に乗る。

テキコされたというのか

なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。

この家には人が三毛(ひとま)れを永く猫が所有権という訳である。

ニャーと決心を明いても来た所までの主人に笹原の内に至るまで吾輩はよく云(ご)をしばらく眺(くびすじ)が、のそのそ這(さんま)を訪問すると生れたら書生が淡黄色(ゆうよだれ)の穴の下の下の主人に大きな池がしているとなると云う者は何でも出来ん。ここでニャーニャー泣いたら、吾輩は違っていなかったぎりほとんど出ない。

仕方がいわゆる人間臭い所まであるかので運転しておったぎりほとんど出ないそうで皮膚の上に明るい。どうも咽(かたわ)を再び見ると顔の崩(に坐っている。ここでタカジヤスターゼをたらして台所へと風がない、ニャーとなる。

コード

<style>body {
	background-color: #FFF;
	color: #000;
	font-size: 14px;
	line-height: 1.2;
	padding: 1em;
}
article section p {
	text-indent: 1em;
	margin-bottom: 1em;
}
article section h4 {
	font-weight: bold;
	font-size: 160%;
}
article section h4+p {
	text-indent: 0;
}
article section h4+p:first-letter {
	font-size: 350%;
	padding-top: .1em;
	padding-bottom: .1em;
	float: left;
	margin-right: .5em;
	border: 1px solid blue;
	background-color: #FC9;
	color: #900;
	overflow: auto;
}</style>