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

CSSのfontショートハンドでフォントを一括設定する方法

CSSの font プロパティは、フォントファミリー、サイズ、スタイルなど、複数のフォント関連プロパティを1行でまとめて指定できるショートハンド（省略形）です。

fontショートハンドで指定できる主な値

値は決められた順序で、半角スペースで区切って記述します。

  • font-style：normal / italic / oblique
  • font-variant：normal / small-caps
  • font-weight：normal / bold または数値（100〜900）
  • font-size：px、em、% など（必須）
  • line-height：「16px/1.5」のようにスラッシュで続けて指定可能
  • font-family：フォント名（必須・最後に指定）

なお、font-size と font-family の2つは必須であり、省略した場合は宣言全体が無効になる点に注意してください。

使用例

次のコードを実行して、font プロパティの動作を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "font:italic small-caps bold 13px georgia;">
         すべてのフォントプロパティを一度に適用しています。
      </p>
   </body>
</html>

この例では、イタリック体・スモールキャップ・太字・13pxのサイズ・Georgiaフォントを、たった1つの宣言で同時に適用しています。個別に font-style や font-weight などを書くよりもコードが簡潔になり、メンテナンス性も向上します。

  1. CSSのbackgroundショートハンド（一括指定）プロパティの使い方を解説

    CSSのbackgroundショートハンド（一括指定）プロパティは、要素の背景をまとめて定義するための便利なプロパティです。1つの宣言で複数の背景関連プロパティを同時に設定できるため、コードが簡潔になり、可読性も向上します。backgroundショートハンドに含まれる個別プロパティbackgroundショートハンドを使うことで、以下の8つの個別プロパティを一度に指定できます。background-color：背景色background-image：背景画像background-repeat：画像の繰り返し方法background-position：画像の表示位置background-clip：

  2. CSSのoutlineショートハンドプロパティとは？構文と使い方を実例付きで解説

    CSS outlineショートハンドプロパティとは？ outlineショートハンドプロパティを使うと、要素の境界線の外側に、スタイル（必須）・太さ・色を指定した線をまとめて定義できます。borderプロパティとは異なり、outlineは要素の寸法（幅や高さ）に含まれないため、レイアウトに影響を与えずに輪郭線を表示できるのが大きな特徴です。 構文 CSS outlineショートハンドプロパティの構文は次のとおりです。 Selector {    outline: /*値*/ } 指定できる値 outline-width：線の太さ（thin / medium / thic