CSSでフォントサイズを変更する方法:大きさと太さ

HTML/CSS

今回はCSSでフォントの大きさや太さなど、サイズを変更するためのプロパティをいくつか紹介します。

フォントサイズと太さ

フォントサイズを変更するプロパティは「font-size」です。

フォントサイズ12px
フォントサイズ15px
フォントサイズ18px
フォントサイズ20px
フォントサイズ23px
フォントサイズ25px
フォントサイズ28px
フォントサイズ30px
フォントサイズ33px
フォントサイズ35px
<span style="font-size: 12px;">フォントサイズ12px</span><br>
<span style="font-size: 15px;">フォントサイズ15px</span><br>
<span style="font-size: 18px;">フォントサイズ18px</span><br>
<span style="font-size: 20px;">フォントサイズ20px</span><br>
<span style="font-size: 23px;">フォントサイズ23px</span><br>
<span style="font-size: 25px;">フォントサイズ25px</span><br>
<span style="font-size: 28px;">フォントサイズ28px</span><br>
<span style="font-size: 30px;">フォントサイズ30px</span><br>
<span style="font-size: 33px;">フォントサイズ33px</span><br>
<span style="font-size: 35px;">フォントサイズ35px</span><br>

フォントの太さを変更するプロパティは「font-weight」です。

フォントの太さ
フォントの太さ
フォントの太さ
フォントの太さ
フォントの太さ
フォントの太さ
フォントの太さ
フォントの太さ
フォントの太さ
<span style="font-weight: lighter;">フォントの太さ</span><br>
<span style="font-weight: normal;">フォントの太さ</span><br>
<span style="font-weight: bold;">フォントの太さ</span><br>
<span style="font-weight: bolder;">フォントの太さ</span><br>
<span style="font-weight: 500;">フォントの太さ</span><br>
<span style="font-weight: 600;">フォントの太さ</span><br>
<span style="font-weight: 700;">フォントの太さ</span><br>
<span style="font-weight: 800;">フォントの太さ</span><br>
<span style="font-weight: 900;">フォントの太さ</span><br>

ある特定の文字のみ大きくしたい場合は、<p>タグをメインテキストに使用して大きくしたいテキストを<span>で囲ってあげれば良いでしょう。

テキストテキストテキストここを大きくテキストテキスト

<p>テキストテキストテキスト<span style="font-size: 23px">ここを大きく</span>テキストテキスト</p>

見出しやタイトルは<h2>〜<h4>や<title>タグに対してfont-sizeを指定します。

<title style="font-size:30px">タイトル</title>
<h2 style="font-size:27px">見出し1</h2>
<h3 style="font-size:24px">見出し2</h3>
<h4 style="font-size:20px">見出し3</h4>

アイコンフォントもfont-sizeやfont-weightで調整が可能。

<i class="fab fa-angellist" style="font-size:20px"></I>
<i class="fab fa-angellist" style="font-size:25px"></I>
<i class="fab fa-angellist" style="font-size:30px"></I>
<i class="fab fa-angellist" style="font-size:35px"></I>
<i class="fab fa-angellist" style="font-size:40px"></I>
<i class="fab fa-angellist" style="font-size:45px;font-weight: bold;"></I>
<i class="fab fa-angellist" style="font-size:50px;font-weight: 900;"></i>

WordPressの場合

WordPressの場合は、ブロックの設定部分にあるテキスト設定文字サイズから簡単にフォントサイズを変更できます。

太字にしたい場合は、テキスト上の「B」を押せば選択部分が太字になります。


以上が「CSSでフォントサイズを変更する方法:大きさと太さ」でした。

フォントの太さや大きさを上手く調整して見やすいサイトを心がけましょう。

テキスト効果の付け方に関しては以下

フォントや要素のサイズ指定にはpx以外にも色んな単位を使用することが出来ます。その代表的な単位を以下の記事でまとめました。合わせてどうぞ。

2020年4月5日HTML/CSSCSS,WEB

Posted by KT