• 「海外の雑誌のように一文字目だけ大きくおしゃれに表示したい！」

そんな時ありませんか？ cssを編集すれば直ぐに解決可能です。

「::first-letter」セレクタを使用

cssには「このためだけにあるんじゃないか？」ってぐらいドンピシャなセレクタ「::first-letter」があります。

とりあえず基本の設定

.first::first-letter{
    float: left;
    padding: 0;
    line-height: 1em;
    font-size: 4em;
    font-weight: bold;
}

上記cssを適用すると下記のように表示されます。

テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。テストです。

あとは好みで上記cssを編集して下さい。