CSSスキル - 第3章 Lesson5

font-sizeを使って、頭文字のみ大きくしてみよう

   

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

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

font-sizeプロパティを利用して、文字の頭文字だけ大きくするCSSをかける方法について、初心者向けに解説しています。



この動画で学べること

・相対単位を使って文字サイズの変更をする方法



相対単位を使って文字サイズの変更をしてみよう

HTMLファイルには、頭文字だけ<span>タグで囲まれた文章があります。
これにCSSがをかけていきましょう。
まず、セレクタpに font-size: 30px; を指定していきましょう。
spanにもfont-size: 45px;と定義します。




p {
font-size: 30px;
}

p span {
font-size: 45px<span></span>;
}



一度、保存してブラウザで見てみましょう。
頭文字だけが大きくなった文章ができました。
次は、単位をpxではなく%でやってみたいと思います。
<span>タグの親要素が<p>タグになるので、セレクタpで指定したサイズからパーセンテージを導き出します。
このようになりました。



p {
font-size: 30px;
}

p span {
font-size: 150%;
}



一度、保存してブラウザで見てみましょう。
先ほどと変化がなければ大丈夫です。
最後にemの単位でも試してみましょう。
emは、親要素で指定したサイズの倍率で示します。
<span>タグを<p>タグの1.5倍という設定にしてみましょう。


p {
font-size: 45px;
}

p span {
font-size: 1.5em;
}



保存してブラウザで見てみす。
この方法でも頭文字が大きく表示することができました。