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タグなどで囲む必要があることを覚えておきましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際に書いてみよう
実際にコードを書いてみましょう。
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デザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
