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

CSSのfont-stretchプロパティで要素の文字幅（フォントストレッチ）を設定する方法

CSSで要素のフォントストレッチ（文字の横幅の伸縮）を設定するには、font-stretch プロパティを使用します。このプロパティを使うことで、フォントの通常の幅に対して、より狭く（コンデンスド）またはより広く（エクスパンデッド）表示させることができます。

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

font-stretch プロパティには、以下のキーワード値を指定できます。

  • normal — 通常のフォント幅（デフォルト）
  • ultra-condensed — 極端に狭い幅
  • extra-condensed — 非常に狭い幅
  • condensed — 狭い幅
  • semi-condensed — やや狭い幅
  • semi-expanded — やや広い幅
  • expanded — 広い幅
  • extra-expanded — 非常に広い幅
  • ultra-expanded — 極端に広い幅

使用例

以下は、font-stretch: ultra-expanded; をインラインスタイルで段落に適用した例です。

<html>
   <head>
   </head>
   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer doesn't have a
         condensed or expanded version of the font being used.
      </p>
   </body>
</html>

注意点

上記のコードを実行しても表示が変化しない場合は、使用しているフォントに「コンデンスド（狭幅）版」や「エクスパンデッド（広幅）版」が用意されていない可能性があります。font-stretch はフォント自体が複数の幅バリエーションを持っている場合にのみ機能します。そのため、実際のプロジェクトでは、可変フォント（Variable Fonts）や幅バリエーションを含むWebフォントと組み合わせて使用することをおすすめします。

  1. CSSのmargin-topプロパティで要素の上マージンを設定する方法

    CSSのmargin-topプロパティは、要素の上側のマージン（外側の余白）を指定するために使用します。値には、長さ（px、emなど）、パーセンテージ（%）、またはautoを指定できます。margin-topで使える主な値長さ（length）：px、em、remなどの単位で固定値を指定しますパーセンテージ（%）：親要素の幅に対する割合で指定しますauto：ブラウザが自動的にマージンを計算しますサンプルコード以下のコードを実行すると、margin-topを使って上マージンを設定した要素の表示を確認できます。<html>    <head>  

  2. CSSで画像の高さを設定する方法（heightプロパティの使い方）

    CSSのheightプロパティを使用すると、画像の高さを設定できます。このプロパティには、長さ（px、emなど）またはパーセント（%）の値を指定できます。%で値を指定した場合は、画像が配置されている親要素（ボックス）の高さに対する割合として適用されます。 サンプルコード 以下のコードを実行して、画像の高さを設定する方法を確認してみましょう。 <html>    <head>    </head>    <body>       <img style =