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

Presented by Nishishi via Movable Type. Last Updated: 2017/05/11. 12:15:28.

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

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

このブログ内限定での主要なカテゴリ

track word

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