ホームページ作成/テキストの配置・装飾 (HTML,CSS)

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

CSS3のtransformプロパティを使うと、ワープロソフトなどでは簡単に実現できる「長体」(縦に細長い文字)や「平体」(横に平べったい文字)をウェブ上でも簡単に作れます。長体や平体を実現する方法と注意点等を解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

ワープロなら平体も長体も簡単

ワープロなら平体も長体も簡単

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

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


 
画像なら従来から縦横を別々に指定できた

画像なら、縦横の個別指定が可能

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


 
CSS3を使うと平体も長体も作れる

CSS3を使うと平体も長体も作れる

しかし、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 */
CSS3で文字を「平体」にできる

CSS3で文字を「平体」にできる

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

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

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


 
文字を「長体」にするCSSソース:
transform: scale( 1 , 2.1 ); /* C */
transform: scale( 0.6 , 1 ); /* D */
CSS3で文字を「長体」にできる

CSS3で文字を「長体」にできる

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

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


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

プロパティの値は関数のような書き方をしますが、普通のスタイルと同様に以下のような感じで適用できます。
h1.title {
   transform: scale( 0.9 , 2.3 );
}

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます