CSSでfirst-letterを使って最初の一文字を指定する方法【初心者向け】

初心者向けにCSSのfirst-letterを使って最初の一文字目のスタイルを指定する方法について解説しています。実際にコードを書きながら例をもとに説明しているので、自分でも書きながら理解していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSの書き方ですが、今回は「first-letter」について紹介します。

「first-letter」はブロック要素の最初の文字を対象としてスタイルを適用します。普段からよく使うものではないかもしれませんが、覚えておくと良いでしょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回はfirst-letterという疑似要素を使ってみよう。

大石ゆかり

田島メンター!!疑似要素というのは何ですか~?

田島悠介

セレクタに追記することで、要素内の一部にスタイルを適用させることができるものなんだ。first-letterは最初の1文字を指定するよ。

大石ゆかり

なるほど、よろしくお願いします!

 

目次

 

first-letterとは

「first」とある通りに、最初の文字にスタイル要素を適用させます。

ブロック要素の最初の1文字だけというのがポイントです。ちなみにブロック要素とは<p></p>で囲まれたものを言います。

以下にある写真が、「first-letter」を適用した部分のサンプルです。

css_04

最初の文字のみ色をつけ、フォントサイズを300%に設定すると、最初の1文字目だけ上記のスタイルとなりました。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

first-letterの書き方

書き方は以下のように書きます。

p:first-letter{
  /*適用したいCSSスタイルを記述*/
 }

pというのが指定するブロック要素です。

<p>のpを指しており、<h1>に適用したい場合はh1に変えてください。

 

田島悠介

セレクタの後ろに:first-letter、あるいは::first-letterを記述するんだ。

大石ゆかり

今回の場合は<p>要素の最初の文字に、指定したスタイルが適用されるんですね。

田島悠介

次は実際にスタイルを指定して画面で確認してみよう。

 

実際に書いてみよう

実際にコードを書いてみましょう。

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%;
}

スクリーンショット 2016-08-30 10.30.21

pの後ろにあるのは「.」ではなく「:」(コロン)です。

これを間違えるだけでスタイルが全く適用されないので注意しましょう。

 

また、前述しましたが、pというのはブロック要素のことです。ブロック要素とは<p>のpを指しており、<h1>に適用したい場合はそこの記述をh1に変えます。

{}の中身はいつものCSSのスタイルを書きましょう。つまり、最初の1文字にのみ適用したいスタイルを書いていけばOKです。

テキストが並んでしまうときなどに、簡単にデザイン的なアクセントをつけることができます。

 

田島悠介

今回は要素型セレクタのpにfirst-letterを追記して、色と大きさを設定したよ。

大石ゆかり

指定した内容が、段落の最初の文字にだけ適用されているのが分かりますね。

田島悠介

疑似要素を使うことによって、要素内の一部分に働きかけることができるんだ。うまく活用してみよう。

大石ゆかり

他の疑似要素についても調べてみます。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。