文章の1文字目を大きくする方法とアレンジ方法/first-letter/CSS【初心者向け】

文章の1文字目を大きく表示するCSSを紹介します。
この表示方法は、ドロップキャップ（Drop Cap）といって雑誌記事のデザインで用いられることが多いですがWebサイトの文章でも使用できます。

CSSの記載内容

CSSの記載内容は以下の通りです。

/*1文字目サイズ3倍*/
p::first-letter {
  font-size: 3.0em;
  line-height: 1;
}

1文字目の表示方法を変更する

このCSSを編集すると大きくなる文字の表示方法を変更することができます。
ここからは「見た目を変更した文章」と「編集したCSS」の紹介、そしてCSSのどこをどのように修正したかを説明します。

最初の文字の色を赤色に変更する

変更したCSSの記載内容は以下のとおりです。

/*1文字目サイズ3倍＋赤色*/
p::first-letter {
  font-size: 3.0em;
  line-height: 1;
  color: #CC3366;
}

5行目に以下の記述を追加して、文字色を赤色に指定しています。

color: #CC3366;

＃以下の英数字を別のものに修正することで、タイトルの色を好きな色に変更することができます。

最初の文字を赤色にしてさらに太字にする

変更したCSSの記載内容は以下のとおりです。

/*1文字目サイズ3倍＋赤色＋太字*/
p::first-letter {
  font-size: 3.0em;
  line-height: 1;
  color: #CC3366;
  font-weight: bold;
}

6行目に以下の記述を追加して、文字を太字に変更しています。

  font-weight: bold;

最初の文字の上部を他の文字と合わせる

変更したCSSの記載内容は以下のとおりです。

/*1文字目サイズ3倍＋赤色＋1行目の上に合わせる*/
p::first-letter {
  font-size: 3.0em;
  line-height: 1;
  color: #CC3366;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

7行目と8行目に以下の記述を追加しました。

  float: left;
  margin-right: 5px;

追加した1行目では、最初の文字が文章の左側に回り込むように指定しています。 2行目では、窮屈な見た目にならないように最初の文字の右側に5pxの余白を作るようにしています。文字サイズによって、右側の余白が広すぎたり、窮屈だったり感じる場合は、5pxの数字を適宜修正します。

最初の文字に影を付ける

変更したCSSの記載内容は以下のとおりです。

/*1文字目サイズ3倍＋赤色＋1行目の上に合わせる＋影を付ける*/
p::first-letter {
  font-size: 3.0em;
  line-height: 1;
  color: #CC3366;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  text-shadow: #000000 .05em .05em;
}

9行目に、以下の記述を追加して、文字に影を追加しています。

  text-shadow: #000000 .05em .05em;

影の色は#以下の英数字を修正することで変更できます。

最初の文字を赤地に白文字にする

変更したCSSの記載内容は以下のとおりです。

/*1文字目赤地に白文字*/
p::first-letter {
  font-size: 3.0em;
  line-height: 1;
  color: #FFF;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  background-color: #CC3366;
  border-radius: 5px;
  box-shadow: 0 0 10px 1px #999999;
  margin-top: 7px;
  margin-left: 5px;
  padding: 18px;
  }

9行目から14行目に以下の記述を追加しました。

background-color: #CC3366;
border-radius: 5px;
box-shadow: 0 0 10px 1px #999999;
margin-top: 7px;
margin-left: 5px;
padding: 18px;

追加した記述の最初の行は、四角の色を赤色に指定しています。#以下の英数字を修正することで色を変更できます。
次の行は、四角の角の丸みの調整をしています。数字を小さくすると直角に近くなり、大きくすると丸に近くなります。
3行目は、四角の周辺にうっすらついている影の表現についてです。4つ目の「1px」の数字を大きくすれば影が濃くなります。また、#以下の英数字を修正することで色を変更できます。
4行目と5行目は、四角の上部と左側に余白の幅を指定しています。文字サイズによって、右側の余白が広すぎたり、窮屈だったり感じる場合は、5pxの数字を適宜修正します。
5行目は、四角の大きさです。文字と四角の外郭との距離を指定しているので、数字を大きくすると大きな四角になり、数字を小さくすると小さな四角になります。

最初の段落だけ、1文字目を大きくする

これまでの設定では、全ての段落で、最初の文字が大きく表示されます。
これを、最初の段落だけにしたい場合は、CSSの冒頭を以下のように修正します。

p:first-of-type::first-letter {

こうすることでページの最初の段落の1文字目だけが大きく表示されます。

まとめ

いかがでしたでしょうか。

文章の1文字目を大きく表示する方法を紹介いたしました。
文章のメリハリをつけることができて、面白い表現ができると思います。

色、文字サイズ、表現方法も今回紹介したように修正するとアレンジできると思いますので、ぜひ参考にしていただければと思います。