先頭文字を大きくするCSS(ドロップキャップ)の見本

###source
.css_test::first-letter{
    font-size: x-large ;
}
###raw
<style>
.css_test::first-letter {
    font-size: x-large ;
}
</style>
<p class="css_test">祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。</p>

###source
.css_test2::first-letter {
    font-size: 3em;
}

###raw
<style>
.css_test2::first-letter {
    font-size: 3em;
    padding: .1em;
}
</style>
###raw
<p class="css_test2">祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。</p>

###source
.css_test3::first-letter {
    font-size: 3em;
    margin: 0em 0.2em;
    float: left;
}

###raw
<style>
.css_test3::first-letter {
    font-size: 3em;
    margin: 0em 0.2em;
    float: left;
}
</style>
###raw
<p class="css_test3">祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。</p>

###source
.css_test4::first-letter {
    font-size: 3em;
    margin: 0em 0.2em;
    float: left;
	background-color:#ddeeff;
	padding:0.2em;
}

###raw
<style>
.css_test4::first-letter {
    font-size: 3em;
    margin: 0em 0.2em;
    float: left;
	background-color:#ddeeff;
	padding: 0.2em;
}
</style>
###raw
<p class="css_test4">祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。</p>

wakatta 記法

このコンテンツを見る