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

CSSのem単位を使ってフォントサイズを設定する方法

CSSでフォントサイズを指定する際、emという相対単位を使用すると、柔軟で拡張性の高いデザインを実現できます。emはfont-sizeプロパティと組み合わせて使われ、親要素のフォントサイズを基準にサイズが決まります。

emとpxの関係

一般的なブラウザでは、デフォルトのフォントサイズは16pxに設定されているため、次のような換算式が成り立ちます。

1em = 16px

たとえば、30pxのフォントサイズをemで表したい場合は、以下のように計算します。

30px ÷ 16px = 1.875em

コード例

実際にem単位でフォントサイズを設定するには、次のようなコードを実行してみてください。h1要素に対して1.875em（30px相当）を指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            /* 30px/16 = 1.875em */
            font-size: 1.875em;
         }
      </style>
   </head>
   <body>
      <h1>これはデモ用の見出しです</h1>
      <p>これはデモ用のテキストです。</p>
   </body>
</html>

em単位を使うメリット

emは親要素のフォントサイズを基準とする相対単位のため、ユーザーがブラウザの文字サイズ設定を変更した場合でも、それに応じてレイアウトが柔軟に追従します。アクセシビリティの観点からも、固定値であるpxよりもemやremといった相対単位を採用することが推奨されています。

  1. CSSのfont-sizeプロパティをキーワードで設定する方法

    CSSのfont-sizeプロパティは、絶対キーワードと相対キーワードを使って設定できます。キーワードを指定することで、テキストのサイズを意図した通りに柔軟に拡大・縮小できます。 構文 CSS font-sizeプロパティの基本構文は以下のとおりです。 セレクター {     font-size: /*値*/ } CSSで使用できる標準キーワードの一覧は、次の表をご参照ください。 番号値と説明 1mediumフォントサイズを中程度（標準）に設定します。デフォルト値です 2xx-smallフォントサイズを極小に設定します 3x-smallフォントサイズ

  2. CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

    CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si