CSS3のtransformで、文字を長体や平体で表示する方法

ワープロのように、ウェブ上でも文字を平たくしたり細長くしたりしたい

ワープロソフトでは、文字の横幅だけを伸縮させ、横に平べったい文字(平体)や、縦に細い文字(長体)を作れます。このような文字をウェブ上でも表示させたいと思ったことはないでしょうか。

従来なら、文字を画像化してから加工するくらいしか方法がありませんでしたが、CSS3を使うと簡単に実現できます。

従来、ウェブ上でできる文字サイズの変更方法は、あくまでも縦横比を維持した状態での拡大・縮小(＝フォントサイズの変更)だけでした。画像の場合なら、「width」と「height」の値を別々に指定できるため、縦だけを細くしたり太くしたりできましたが、文字の場合にはそのような方法はありませんでした。

しかし、CSS3のtransformプロパティを使うと、ウェブ上でも「平体」や「長体」のように、文字の縦横比率を変更する装飾ができます。本文の装飾に使うにはあまり向いていませんが、幅が限定された領域に表示する見出しや、ページ脇に飾りのように表示する文字など、様々なデザインに活用できるでしょう。

CSS3のtransformプロパティで、文字を平体や長体で表示する方法

CSS3を使って、文字を平体や長体で表示させる方法はとても簡単です。transformプロパティの値に「scale」という値を指定して、CSSソースを以下のように記述するだけです。

transform: scale( xx , yy );

「xx」には横方向の倍率を、「yy」には縦方向の倍率を数値で記述します。標準のサイズは「1」で、1より小さくすれば表示サイズも小さくなり、1より大きくすれば表示サイズも大きくなります。これを使って「平体」や「長体」を作るには、例えば、以下のようにCSSソースを記述します。

■文字を「平体」にするCSSソース：

transform: scale( 1   , 0.7 ); /* A */
transform: scale( 1.7 , 1   ); /* B */

A：文字の縦方向が0.7倍に縮むため、「平体」になります。ブラウザでは、右図の上側のように表示されます。

B：文字の横方向が1.7倍に伸びるため、「平体」になります。ブラウザでは、右図の中央のように表示されます。

※右図の下側は、比較のために掲載した普通の(何も装飾を指定しない場合の)文字です。

■文字を「長体」にするCSSソース：

transform: scale( 1 , 2.1 ); /* C */
transform: scale( 0.6 , 1 ); /* D */

C：文字の縦方向が2.1倍に伸びるため、「長体」になります。ブラウザでは、右図の上側のように表示されます。

D：文字の横方向が0.6倍に縮むため、「長体」になります。ブラウザでは、右図の中央のように表示されます。

このように、縦横の大きさを「何倍にするか？」を、数値で別々に指定して利用します。「横幅を大きく」するか「高さを小さく」すれば平体になりますし、「横幅を小さく」するか「高さを大きく」すれば長体になります。

プロパティの値は関数のような書き方をしますが、普通のスタイルと同様に以下のような感じで適用できます。

h1.title {
   transform: scale( 0.9 , 2.3 );
}

使い方は上記のように簡単ですが、実際に活用する上では、いくつかの注意点があります。詳しくは、次のページでご紹介いたします。