閉じる
閉じる

あまめも

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

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

そんな時ありませんか? 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. HPでライン風の対話型吹き出しの表示に枠を付けたい!!ってなった…

  2. 文字をマーカーのように強調するCSS設定。個人用まとめです。

  3. HTML

    HTMLで「引用符を自分好みに設定したい」って時は

  4. 【基礎】MySQLのデータ型まとめ

  5. 【基礎】MySQLを使用した時のDBの「テーブル」「カラム」「レ…

  6. WordPressのタグやカテゴリを整理しようと思ったのでDBか…

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

Twitter

ページ上部へ戻る