にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:53.

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

CSS3のtransformで、文字を長体や平体で表示する方法(@All About ホームページ作成)ウェブ上に掲載した文字のサイズをCSSで変更する場合、font-sizeプロパティを使います。でも、これで変更できるのは、あくまでも「フォントサイズ」なので、文字の縦横比は維持されたまま(=1:1のまま)なんですよね。

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

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

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

しかし!

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---