HTMLテキストを変形！長体・回転(CSS transform)

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

テキスト文字に長体をかけたい transform: scale

タイトル帯など、テキスト文字を配置したブロックが左右に並び、その左右のブロック枠の高さを揃えたい場合があると思います。高さを取得するjsを使う方法もありますが、それを使わないで高さを合わせるには左右の文字サイズと行数を同じにするのが簡単でベストです！
しかし、片方だけ文字数が多く、枠内に納まらずに改行してしまうこともあります。

実現したいこと

• 1行に納めたい！（改行するとデザインが崩れる）
• 左右ブロックの文字サイズは揃えたい！
  （文字数の多い方だけ文字サイズを小さくするのではブロック枠の高さが揃わない。）
• 枠に固定の高さを指定したくない！

サンプルページ

１. 左右のタイトル枠に、同じサイズのテキストを入れる

文字の大きさが同じだと文字数の多い方だけ改行してしまう。
今回は文字数の多い方（右側）のタイトルBOXだけを調整する。

２. 右側のタイトルを枠ごと幅を80%にする

タイトルブロック<h3>の横幅方向を80%にし、全体を長体にする。
※BOX枠がインライン要素では有効にならないのでインラインブロック、またはブロックにする必要がある

transform: scale(0.80, 1); 　←（左右方向の比率, 上下方向の比率）

ベンダープレフィックスも含めてていねいに書くと

-moz-transform: scale( 0.80, 1 ); /* Firefox */
-webkit-transform: scale( 0.80, 1 ); /* Chrome,Safari */
-ms-transform: scale( 0.80, 1 ); /* IE */
transform: scale( 0.80, 1 ); /* CSS3 */

文字は縦長になったが、外側の枠<h3>Block要素も長細く80%になってしまった。

３. 外枠の幅を拡大

width: 125%;　←（外枠だけを元のサイズに戻す）
↑（125の求め方は100 ÷ 80 =1.25）
transform: scale(0.80, 1);

外枠の<h3>幅を125％にしてみた。
左合わせならこれだけで問題ないが、文字がセンター配置なので、全体的に右へ行ってしまう。

４. 左右の位置調整

(125 – 100)÷2＝12.5（25%の半分12.5%を左へ）
width: 125%;
transform: scale(0.80, 1);
margin-left: -12.5%;　マージンの調整。

ブラウザ依存も特になくできました。
サンプルページ

△を回転させて右向き矢印アイコンとして使いたい transform: rotate

もうひとつ、URLの頭部分に△文字を回転させてアイコンとして配置したデザイン。
△を画像にする方法もあるが、レスポンシブだと大きさや文字の位置合わせが微妙に面倒。

実現したいこと

• 画像を使いたくない
• テキストを後から変更できるようにしたい
• 変更後の調整を簡単にしたい

サンプルページ

１. △だけを回転させる

まず普通にテキストリンクにした場合、このような感じになります。△をひとつづつspanで囲み、90度右に回転させることにした。
※複数個を囲むと一緒に回転してしまう。

transform: rotate(90deg);

こちらもベンダープレフィックスを含めてていねいに書くと

display: inline-block;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
※インライン要素では回転が効かないのでインラインブロック、またはブロックにする

回転させるのは簡単だが、リンクとして使いたいので下線を出したい。

２. 通常の下線表示

回転させた△のリンク下線は左側にでる。

３. △の部分だけ右側に下線を出してみる

border-right:1px solid #0066cc;
△にだけborder-right:をかけたら、通常リンクのunderlineとの違和感がありすぎた。

４. 個別のリンク下線をやめて、1pxの下線を表示させる

text-decoration: underline;をやめて、
aタグにborder-bottom:1px solid #0066cc;を設置、hoverでborder-bottom:none
比較するとunderlineより離れている気がするが、単体で見た場合は気にならないと思う。
ブラウザ依存も特にない。
サンプルページ

まとめ

css3の要素を変化させるtransformの一般的な使い方は、ブロック枠の透過や移動・変形などが中心ですが、個々の文字にかけ、ちょっとした工夫をすることで、使用幅がかなり広がりそうです。今回はコーディング中、必要にせまられて対応方法を試しながらやってみたので過程も書いた方がわかりやすいと思い、順番に記載してみました。
実際には、もっと良い対応方法をみつけられるかもしれませんが、参考になれば使ってみてください。

WEBプログラマー ／ H.C