CSSスキル - 第8章 Lesson6

最初の文字・行にスタイルを適応させる方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

最初の文字・行にスタイルを適応させる::first-lineと::last-lineについて、初心者向けに解説しています。
ここでは、文章に実際に適応させて雑誌のようなデザインに仕上げていきます。



この動画で学べること

・最初の行や文字にCSSをかける方法



最初の行や文字にCSSをかける方法

最初の行や文字にCSSをかける時に使える擬似クラスは2つあります。
・::first-line(最初の行に対してCSSをかける)
・::first-letter(最初の文字に対してCSSをかける)

実際に、これらの擬似クラスを使った書き方を見てみましょう。


まず、::first-lineを使って<p>タグの1行目を紫色に、文字の太さを太くするよう指定します。




p::first-line{
font-weight: bold;
color: #3D2D51;
}




保存してブラウザで見てみましょう。
文章の1行目に指定したスタイルがかかりました。
では次に、::first-letterを使って<p>タグの中の1文字目のスタイルを変更してみます。
今回は、文字の大きさを大きくしてみましょう。




p::first-letter{
font-size:80px;
}




保存してブラウザで見てみましょう。
最初の文字だけ、サイズが大きくなりました。
そのため、少し不自然な余白が開いたので、スタイルを整えていきましょう。




p::first-letter{
font-size:80px;
line-height: 1;
float: left;
}




これで、まとまりのあるデザインになりました。