twitter facebook

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

.css_test::first-letter{
    font-size: x-large ;
}

祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。

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

祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。

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

祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。

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

祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらわす。おごれる人も久しからず、唯春の夜の夢のごとし。たけき者も遂にはほろびぬ、偏に風の前の塵に同じ。

AUTHOR
@tanaka.k
最終更新日 2018/09/17
FAVORITE good stock
LINK TAG
記法を見る