JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのfont-sizeプロパティの使い方を徹底解説

font-sizeプロパティは、フォント（文字）のサイズを拡大または縮小するために使用される、CSSの基本プロパティの一つです。Webページ上のテキストの大きさを自由に制御でき、読みやすさやデザインの調整に欠かせません。

font-sizeプロパティで指定できる値

font-sizeプロパティには、主に以下のような値を指定できます。

  • 絶対的なキーワード： xx-small、x-small、small、medium（標準サイズ）、large、x-large、xx-large
  • 相対的なキーワード： smaller（親要素より小さく）、larger（親要素より大きく）
  • 絶対単位： px（ピクセル）など
  • 相対単位： %（親要素のフォントサイズに対する割合）や、em・remなど

font-sizeの基本的なコード例

次のサンプルコードでは、インラインスタイルを使って3つの異なるfont-sizeの指定方法を示しています。

<html>
   <head>
   </head>
   <body>
      <p style = "font-size:15px;">このフォントサイズは15ピクセルです</p>
      <p style = "font-size:small;">このフォントサイズはsmallです</p>
      <p style = "font-size:large;">このフォントサイズはlargeです</p>
   </body>
</html>

コードの解説

  • 最初の段落は15pxとピクセル値で直接指定しており、常に固定のサイズで表示されます。
  • 2番目の段落はキーワードsmallを指定しており、ブラウザの標準サイズより小さく表示されます。
  • 3番目の段落はキーワードlargeを指定しており、ブラウザの標準サイズより大きく表示されます。

実務でのポイント

ピクセル（px）指定は手軽ですが、ユーザーがブラウザで文字サイズを変更した際に対応しにくいというデメリットがあります。近年のWeb開発では、親要素との相対関係を保てる%やem、ルート要素を基準にしたremといった相対単位を使用することで、アクセシビリティやレスポンシブデザインに配慮した実装が推奨されています。

  1. CSSのborder-right-styleプロパティの使い方を徹底解説

    border-right-styleプロパティとはCSSのborder-right-styleプロパティは、要素の右側の境界線（ボーダー）のスタイルを指定するためのプロパティです。破線や点線、実線など、さまざまな線種を設定できます。主な値の一覧none … ボーダーを表示しない（初期値）solid … 一本の実線dashed … 破線dotted … 点線double … 二重線groove / ridge / inset / outset … 立体的な装飾線実装例以下のコードでは、右側のボーダーに破線（dashed）を適用しています。border-widthで線の太さを4pxに設定し、bor

  2. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border