zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 文字(テキスト)の大きさを変更する

CSSで文字(テキスト)の大きさを変更する方法を紹介します。

以下のように、font-size: 文字の大きさ;の形式で指定します。

<div>
  <span style="font-size: 24px;">テキスト</span>
</div>
<div>
  <span style="font-size: 16px;">テキスト2</span>
</div>
<div>
  <span style="font-size: 8px;">テキスト3</span>
</div>

文字の大きさを指定する単位はpx, %などがあります。

%は親要素に対しての割合になります。

例えばように指定した場合、「テキスト」の文字サイズは24pxになり、「テキスト2」の文字サイズは12pxになります。

<div style="font-size: 48px;">
  <span style="font-size: 50%;">テキスト</span>
  <div style="font-size: 50%;">
    <span style="font-size: 50%;">テキスト2</span>
  </div>
</div>

関連記事