font-stretch

フォントストレッチ（テキストとフォント）

意味フォントの幅

font-stretchとは？

font-stretchプロパティは、フォントの幅を調整するためにCSSで使用します。このプロパティは、フォントが複数の幅を持つファミリーの場合に特に有効です。例えば、'condensed'（狭い）や'expanded'（広い）などのキーワードを使って、テキストの見た目を調整することができます。

font-stretchの具体的な使い方

狭められたフォントを指定する例

<style>
    p {
        font-stretch: condensed;
    }
</style>

<p>このテキストは狭められたフォントです。</p>

p（段落）要素内のテキストに対して、フォントを狭めたバージョン（condensed）を適用しています。

異なるフォント幅を比較する例

<style>
    .normal {
        font-stretch: normal;
    }
    .condensed {
        font-stretch: condensed;
    }
    .expanded {
        font-stretch: expanded;
    }
</style>

<p class="normal">通常のテキスト</p>
<p class="condensed">狭められたテキスト</p>
<p class="expanded">拡張されたテキスト</p>

通常、狭められた（condensed）、拡張された（expanded）の3種類のフォント幅を比較表示します。

font-stretchに関するよくある質問

Q. font-stretchとは何ですか？

A. font-stretchはCSSプロパティで、フォントの幅を調整するために使用します。フォントファミリーが複数の幅を持つ場合に特に効果的です。

Q. font-stretchの値には何がある？

A. 主な値には、ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expandedがあります。また、パーセンテージ値も使用できます。

Q. 全てのフォントでstretchが使える？

A. いいえ、全てのフォントでfont-stretchが効果を持つわけではありません。フォントファミリーが複数の幅のバリエーションを持っている場合にのみ効果があります。

font-stretchが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのfont-stretchやfont-style、text-decoration-style、font-weight、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。