HTMLテキストを変形！長体・回転(CSS transform) | デザインやWEBに関する情報を発信する【まるログ】

最近は印刷のデザインをしている方が手がけた、Webデザインのコーディングする機会が多くあります。illustratorなどで制作し、カンプ先行でクライアントにOKをもらっている場合、どうにかデザイン通りに仕上げたいところですが、このようなデザイン最優先でのコーディングでは、テキストの扱い方に苦労する時があります。 特に主流となっているレスポンシブデザインでは文字を画像ではなくテキストとして扱いたいけれど、枠内に納まらない。文字ツメを使ったりする方法もありますが、それでも改行してしまう。「一行で入りませんか？」とデザイン担当からのお願いがあったりで、「テキストに長体をかけることができればすっきり納まるのに」と思うことがあります。 この問題はcss3のtransformを使うことで解決することができます。 実際に制作をした時のトライ＆エラーで順次解説してみます。 テキスト文字に長体をかけたい