閉じる
閉じる

あまめも

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

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

そんな時ありませんか? 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. [甘]WordPressで『プラグインが動かない!?』ってときの…

  2. リストテンプレートも作っておいた方がいいかな?と思ったので作成!…

  3. take089-thumbnail

    WaznFilm更新】「Font Awesomeで何ができるの?…

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

  5. 09222021-info

    HTMLでふりがなを表示する方法!タグの使い方

  6. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

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

  1. 上等カレー看板

Twitter

ページ上部へ戻る