閉じる
閉じる

あまめも

「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能です

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

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

 

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

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

とりあえず基本の設定

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

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

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

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

関連記事

  1. take067-thumbnail

    【WaznFilm更新】新感覚陣取りゲーム「Potlatch K…

  2. info

    <p>タグの改行(余白)を調整したい時は【初心者用】…

  3. 線(line)

    【HTML】<hr>タグ(区切り線)を簡単にカスタム…

  4. まとめ

    「Git」の履歴が見づらいのでまとめたい、そんな時の修正方法

  5. HTML

    サイトの情報を消した時は<del>タグで削除した部分…

  6. take090-thumbnail

    【WaznFilm更新】「Markdownって良く聞くけど、どん…

こんなメモもありますよ♪

  1. みつせ鶏もも肉・シュリンプ・ホタテ貝柱のグリル(for2)

Twitter

ページ上部へ戻る