CSSで文の1文字目だけを大きくするドロップキャップの実装

ドロップキャップとは雑誌などではよく見かける最初の文字を大きくするアレのことです。

codepen

code:css

.text{

width: 250px;

}

.text::first-letter{

float: left;

line-height: 1;

font-size: 310%;

padding-right: 5px;

}

code:html

<p class="text">ドロップキャップとは雑誌などではよく見かける最初の文字を大きくするアレのことです。CSSのfirst-letterを使うことで実装することができます。</p>

https://gyazo.com/2b6055e13316a3eb11205a0673dfb5e3

MDN