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

CSSのfontプロパティ（ショートハンド）の使い方を解説

CSSのfontプロパティは、フォントに関する複数の設定を1行でまとめて指定できる便利なショートハンド（一括指定）プロパティです。これを使うことで、フォントのスタイル（font-style）、サイズ（font-size）、種類（font-family）などを個別に記述する手間を省けます。

fontプロパティで指定できる主な値

fontプロパティでは、以下のサブプロパティを順番にまとめて指定します。

  • font-style … italic（斜体）やobliqueなどのスタイル
  • font-variant … small-caps（スモールキャップス）など
  • font-weight … bold（太字）や数値による太さ
  • font-size … pxやemなどでの文字サイズ
  • line-height … 行の高さ（省略可能）
  • font-family … フォントの種類

なお、ショートハンドで指定する際はfont-sizeとfont-familyの2つが必須です。この2つを省略すると、宣言全体が無効になるので注意しましょう。

使用例

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

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

この例では、段落テキストに対して「italic（斜体）」「small-caps（スモールキャップス）」「bold（太字）」「13pxの文字サイズ」「georgiaフォント」を一括して適用しています。

まとめ

fontプロパティを使えば、複数のフォント関連の設定を簡潔に記述でき、CSSコードの可読性も向上します。ただし、指定順序や必須値（font-sizeとfont-family）には注意して使用してください。

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

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

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none