【CSS】first-letterで最初の位置文字を指定する方法

3384 ワード
HTML 初心者 プログラミング勉強日記 CSS HTML テキストリンク

プログラミング勉強日記

2021年3月16日

first-letterとは

　ブロック要素の最初の文字にスタイルの要素を適用できる疑似要素である。

first-letterの使い方
要素名(.クラス名):first-letter{
  /*適用したいCSSスタイルを記述*/
}

サンプルプログラム

sample.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>sample</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>

<p>Sample</p>

</body>
</html>
sample.css
p:first-letter{
  color:#5bc0de;
  font-size:300%;
}

表示結果

first-letterのメリットとデメリット

メリット

  • コードの量を減らしてデザイン性を高められる
  • 多くのブラウザに対応する

　HTMLをspan要素などで複雑にすることなく、スタイルを統一できる。first-letterは昔からある要素なので昔のブラウザでも使用することができる。

デメリット

　デメリットというデメリットではないが、注意しなければならない点がある。

  • ブロック要素にしか効かない
  • 利用可能なCSSのプロパティが限られている

　最初に説明したように、インライン要素やインラインブロック要素のようなブロック要素以外では適応しないので注意が必要である。また、背景や色、マージンやパディングやボーダーなどの簡単なスタイルは使えるが、ディスプレイ要素の変更や位置の調整はできない。なので、そういう場合はspan要素で囲ってCSSを適応するのが望ましい。

参考文献

::first-letter (:first-letter)
CSSだけで見出しや文章の一文字目をスマートに装飾する方法
CSSでfirst-letterを使って最初の一文字を指定する方法【初心者向け】