2013年1月30日(水) 15時31分50秒 [仕事]

CSS3のtransformプロパティで、「横に平べったい文字」や「縦に細い文字」を作る方法

ウェブ上に掲載した文字のサイズをCSSで変更する場合、font-sizeプロパティを使います。でも、これで変更できるのは、あくまでも「フォントサイズ」なので、文字の縦横比は維持されたまま（＝1:1のまま）なんですよね。

ワープロソフトなんかには、文字の「縦」か「横」のどちらか一方だけを伸縮させて、

• 横に平べったい文字 「平体」
• 縦に細い文字 「長体」

を作る機能があります。
これと同じことをウェブ上でしようと思うと、従来では文字を画像化して加工するくらいしかありませんでした。

しかし！

CSS3で新しく追加された「transformプロパティ」に値「scale」を指定すると、任意の割合で縦横の比率を変更できます。例えば、縦を1.3倍にして、横を0.9倍にするとか。（その場合だと、縦に細長い文字＝「長体」になります。）

そんな、ウェブ上でも簡単に「平体」や「長体」を作る方法を解説した記事を、All Aboutで公開しました。

■「CSS3のtransformで、文字を長体や平体で表示する方法」（＠All About ホームページ作成）

この方法を使えば、文字をわざわざ画像化してから加工する必要性が減らせるかも知れません。