閉じる
閉じる

あまめも

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

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

そんな時ありませんか? 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. タイプライター

    段落の始まりを一文字自動でインデントする

  2. take091-thumbnail

    【WaznFilm更新】これだけ覚えれば十分、Markdownの…

  3. thumbnail

    WordPressでプラグインを簡単に作成する方法メモ

  4. 【HTML】ホームページから任意のファイルをダウンロードさせる方…

  5. お店の「お知らせ」を開いたら記事ページに飛ぶようにした方が良いん…

  6. take067-thumbnail

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

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

  1. 浅草プリン

Twitter

ページ上部へ戻る