Life is Tech! Lesson

オリジナル制作サンプル集

1文字目のサイズを変更する
難易度：
プロパティ：::first-letter
関連レッスン：Chapter 1 レッスン 2

できあがりイメージ

つくりかた

Step1
1文字目を装飾する要素をHTMLから探す

HTML

<h2 class="title">Mom's Bakeryについて</h2>

HTMLのh2タグ、"title"という名前の クラス名が付いているところに対し、CSSを反映させていきます。

Step2
1文字目を装飾する要素のCSSセレクタを探す

CSSのセレクタで クラス名 title を探しましょう。

CSS

.title {
  font-size: 30px;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
}

サンプルでは"title"というクラス名のh2 に反映させます。

Step3
1文字目にCSSを指定する

titleクラスの擬似要素を追加します。

CSS

.title {
  font-size: 30px;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
}

.title::first-letter {
}

擬似要素を使うと、要素 (サンプルでは"title"という名前のh2) の一部分にCSSを指定することができます。
first-letter は要素の最初の文字を指定する擬似要素で、titleクラスとは別に書きます。
書く場所はどこでも大丈夫ですが、titleクラスの近くに書くのがオススメです。

Step4
コードを書くかコピー＆ペーストする

CSS

.title::first-letter {
}

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step5
1文字目の文字サイズを変更する

font-size を追加して、文字のサイズを大きくしましょう。

CSS

.title::first-letter {
  font-size: 60px;
  font-weight: 600;
}

サンプルでは font-size を 60px に、font-weight (文字の太さ) を600 に指定しています。

Step6
コードを書くかコピー＆ペーストする

CSS

font-size: 60px;
font-weight: 600;

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step7
実際の見え方を確認する

文章の一番最初の文字が大きく、太くなっていたら完成です。

ページの先頭へ