CSS | テキスト文字のサイズを変更する方法

このページではCSSでテキスト文字のサイズを変更する方法を紹介しています。

テキスト文字のサイズを変更する

サンプルHTMLでは複数のpタグを作成、文字サイズ別のclass名をHTMLのspanタグにを付与しています。

<p class="font-size-16">SAMPLE</p>
<p class="font-size-24">SAMPLE</p>
<p class="font-size-30">SAMPLE</p>

文字サイズを変更するにはfont-sizeプロパティを利用します。

font-sizeはパーセント指定やem、rem、cm、vhやvwなど様々な指定方法が可能ですが、サンプルでは基本的なpxを指定しています。

指定がない場合は親要素の指定サイズ、親要素にも指定がない場合は各ブラウザのデフォルト値となります。
2021年現在、各ブラウザのデフォルト値はスマホ・PC・タブレット共に16pxとなっています。

p.font-size-16 {
	font-size: 16px;
}

p.font-size-24 {
	font-size: 24px;
}

p.font-size-30 {
	font-size: 30px;
}

セレクタの指定は例えば「.font-size-16」だけの指定で概ね問題ありませんが、pタグに元の色が指定されている場合に反映されなくなる可能性がありますので「p.font-size-16」としています。

pタグにCSSプロパティを指定した場合、pタグのdisplayプロパティの変更などは別として基本的に行単位でのサイズ指定となります。

ここでは単語単位または文字単位でサイズを変更する指定する場合のサンプルコードを紹介しています。

単語単位や一文字目だけなど文字単位でサイズを変更する場合は、pタグに指定するのではなくspanタグを使うのが基本的な指定方法です。

spanタグにそれぞれclassをを指定します。

<p>
	<span class="font-size-16">SAMPLE</span>
	<span class="font-size-24">SAMPLE</span>
	<span class="font-size-30">SAMPLE</span>
</p>

各class名それぞれに、colorで目的の色を指定していきます。

span.font-size-16 {
	font-size: 16px;
}

span.font-size-24 {
	font-size: 24px;
}

span.font-size-30 {
	font-size: 30px;
}

Posted by Yousuke.U

まだ、コメントがありません