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

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

フォントサイズと太さ

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

<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でフォントサイズを変更する方法：大きさと太さ」でした。

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

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

ワードプレスでテキスト効果を付ける方法（ショトカあり）

今回は、WordPressのエディタの標準機能で付いているテキスト効果の種類と付け方についてを紹介していきます。

kt-life.net

2020.03.12

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

CSSの単位のpx・em・rem・vh・vwの違いと使い方

今回は、WEBサイトを構築する際に使うCSSで使用されている文字や要素の長さや大きさの単位である「px」「pt」「em」「rem」「vw」「vh」「vmin」「vmax」「%」などの単位について、それぞれの意味と違い、そして使い方を紹介していきます。

kt-life.net

2020.07.11