【CSS】文頭の文字だけ大きくするfirst-letter

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

文頭の文字だけ大きくするfirst-letterのメモ。

文頭の文字だけ大きくするfirst-letter

コードは以下になります。

<div class="container">
  
    <p class="text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem quisquam quo, animi est aliquid explicabo incidunt vitae quia blanditiis rem, perspiciatis, itaque labore enim totam accusantium tempore. Voluptate, unde maxime?</p>

</div>
.text {
    max-width: 400px;
}

.text::first-letter {
    color: white;
    background-color: orange;
    padding: 6px 5px;
    margin-right: 6px;
    float: left;
    font-size: 30px;
    -webkit-initial-letter: 3 3;
    initial-letter: 3 3;
}

.container {
    padding: 40px;
}

::first-letterは疑似要素の一つで、先頭の文字だけにスタイルを適用できます。ただし、ブロック要素のみになります。

以下の部分で、文字位置や何行分の大きさにするか調整できます。

-webkit-initial-letter: 3 3;
initial-letter: 3 3;　/* initial-letter: 文字サイズ[lh] テキストのベースライン; */

3 3にしているので、3行分の大きさ、ベースライン3行目、ということになります。

initial-letterは一部のブラウザではまだ未対応です。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧