閉じる
閉じる

あまめも

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

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

そんな時ありませんか? 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. take092-thumbnail

    【WaznFilm更新】MarkdownをWordPressのG…

  2. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  3. ブログにYouTube動画を載せたら領域をはみだすのでレスポンシ…

  4. gitのリモートリポジトリをDropboxで作成してpushする…

  5. [甘]パンくずリストつけてみた。

  6. HTML

    【HTML】でタグや特殊記号を表示する方法【一覧】

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

  1. 高圧洗浄
  2. 看板

Twitter

ページ上部へ戻る