CSS3でテキストを長体・平体にする方法と注意点 ｜ Tips Note by TAM

テキストを長体にしたいとき、画像ではなくCSS3を使う方法があります。 テキスト要素に対してtransformのscaleの値を調整すると、文字の一つ一つを細くしたり平たくしたりできます。この方法はWebフォントに対しても使えます。 表現の幅が広がりますね。 ただし、transformの性質上、説明文などの長い文章や、文章中の一部に使おうとするとき、表示がうまくいかないことがあります。ハマりやすいポイントがあるので、すべてのテキストに適用するのではなく、使う場所を選んで設定することをオススメします。 基本的な使い方 <p class="text">普通のテキスト</p> <p class="text text-narrow">長体テキスト</p> <p class="text text-wide">平体テキスト</p> <style> .text { text-align: center;

[iww]

文字を細長にできるやつ。 位置指定とかいろいろ狂うので注意が必要

[real1223]

css, tips, web制作, 困ったとき

[idr_zz]

CSSで長体できる！？ あれ？スマホだと効いてないかも？ CSS3でテキストを長体・平体にする方法と注意点 ｜ Tips Note by TAM