CSSでfirst-letterを使って最初の一文字を指定する方法【初心者向け】
初心者向けにCSSのfirst-letterを使って最初の一文字目のスタイルを指定する方法について解説しています。実際にコードを書きながら例をもとに説明しているので、自分でも書きながら理解していきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
ノマリカ
伝わりやすくて明快なデザインを得意としている。
CSSの「first-letter」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
「first-letter」はブロック要素の最初の文字を対象としてスタイルを適用します。
普段からよく使うものではないかもしれませんが、覚えておくと良いでしょう。
目次
- first-letterとは
- first-letterの書き方
- first-letterを使うメリットとデメリット
- 実際に書いてみよう
- CSS
- first-letterを使う際の注意点
- まとめ
- CSSを学習中の方へ
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はfirst-letterという疑似要素を使ってみよう。
田島メンター！！疑似要素というのは何ですか～？
セレクタに追記することで、要素内の一部にスタイルを適用させることができるものなんだ。
first-letterは最初の1文字を指定するよ。
なるほど、よろしくお願いします！
first-letterとは
「first」とある通りに、最初の文字にスタイル要素を適用させます。
ブロック要素の最初の1文字だけというのがポイントです。
ちなみにブロック要素とは<p></p>で囲まれたものを言います。
以下にある写真が、「first-letter」を適用した部分のサンプルです。
最初の文字のみ色をつけ、フォントサイズを300％に設定すると、最初の1文字目だけ上記のスタイルとなりました。
first-letterの書き方
書き方は以下のように書きます。
p:first-letter{
/*適用したいCSSスタイルを記述*/
}
pというのが指定するブロック要素です。
<p>のpを指しており、<h1>に適用したい場合はh1に変えてください。
セレクタの後ろに:first-letter、あるいは::first-letterを記述するんだ。
今回の場合は<p>要素の最初の文字に、指定したスタイルが適用されるんですね。
first-letterを使うメリットとデメリット
first-letterを使う時に意識したい、メリットとデメリットについて確認してみましょう。
メリット：コードを減らした上でデザイン性を高められる
文章の一部分を装飾する場合、HTMLの該当部分をspanタグ等で囲む方法がよく用いられますが、クラス名なども付けるとコードの見通しが悪くなってしまいます。
今回のように先頭の一文字のみを装飾する場合にはCSSに「:first-letter」と追記するだけで装飾が可能です。
first-letterを使うことで、HTMLにタグを追加する必要が無く、コードの見やすさを保ったままデザイン性を高められます。
デメリット：使えるCSSプロパティが限られている
first-letterを使えば先頭の文字にどんな装飾でも加えられるわけではありません。
例えばpositionプロパティなどで文字の位置を調整したい場合に、first-letterは機能しません。
色、背景、ボーダー、余白などの簡単な文字装飾のみにfirst-letterが指定できます。
positionやdisplayプロパティなどで調整したい場合は、HTMLにてspanタグなどで囲む必要があることを覚えておきましょう。
実際に書いてみよう
実際にコードを書いてみましょう。
HTML
<html>
<head>
<meta charset="utf-8">
<title>first-letter</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p>first-letterのsample</p>
</body>
</html>
CSS
p:first-letter{
color:#5bc0de;
font-size:300%;
}
pの後ろにあるのは「.」ではなく「:」（コロン）です。
これを間違えるだけでスタイルが全く適用されないので注意しましょう。
また、前述しましたが、pというのはブロック要素のことです。
ブロック要素とは<p>のpを指しており、<h1>に適用したい場合はそこの記述をh1に変えます。
｛｝の中身はいつものCSSのスタイルを書きましょう。
つまり、最初の1文字にのみ適用したいスタイルを書いていけばOKです。
テキストが並んでしまうときなどに、簡単にデザイン的なアクセントをつけることができます。
first-letterを使う際の注意点
:beforeを使用していると装飾されない
一文字目を装飾したい要素に、すでにCSSで疑似要素「before」が指定されている場合、beforeのcontentプロパティに設定されている文字の一文字目にfirst-letterが適用されます。
そのため、意図した要素内の一文字目に装飾されません。
またcontentプロパティの値に何も設定していない場合は、first-letterの指定がどこにも装飾されない状態になります。
特殊文字は認識されない可能性あり
「￥」などの特殊文字が先頭にある場合は無視される場合があり、ブラウザーによって認識が違ってきます。
「“」などの囲み記号が先頭にある場合は、一文字目とまとめてfirst-letterの指定が効く場合もあります。
そのため、特殊文字が先頭に来る場合は各ブラウザーの表示を確認しておくべきでしょう。
先頭を空白にしない
先頭が空白だった場合も、ブラウザーによって認識が違ってきます。
空白自体が一文字目と認識される場合と、空白と一文字目がセットで認識される場合に分かれるようです。
空白を文章の先頭に置くことはあまり無いかもしれませんが、そういった場合の挙動も知っておくと役立つ時があります。
まとめ
疑似要素「first-letter」は、ブロック要素の最初の一文字だけにスタイルを加えたい時に、CSSで使用することのできる指定です。
HTMLにタグなどを追加することなく指定できるので、コードが複雑にならないことがメリットですが、指定できるCSSプロパティが限られているため、スタイリングは簡単な文字装飾のみに留めると良いでしょう。
すでにCSSで疑似要素「before」が指定されている場合は、first-letterが機能しなくなります。
また、先頭が特殊文字や空白の場合は、ブラウザーによって表示が異なるので注意しましょう。
今回は要素型セレクタのpにfirst-letterを追記して、色と大きさを設定したよ。
指定した内容が、段落の最初の文字にだけ適用されているのが分かりますね。
疑似要素を使うことによって、要素内の一部分に働きかけることができるんだ。
うまく活用してみよう。
他の疑似要素についても調べてみます。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
