文字列を扇形にカーブさせたり、円形に配置させたい

文字列を扇形に配置

文字列を扇形に配置

ウェブ上で、文字列を扇形にカーブさせて装飾したいと思ったことはないでしょうか。ワープロソフトなどには、文字列を扇形に整形できるものがあります。そのような装飾は、右図のようにウェブ上でも実現可能です。

文字を画像化する必要はありません。テキストデータのままで、スクリプトとCSSを使うことで、右図のような扇形の装飾が可能です。このような装飾を、タイトルや見出しとして使ってみるのも、おもしろいかもしれません。


 
文字列を円形に配置することもできる

文字列を円形に配置することもできる

「下向きの扇形」と「上向きの扇形」を合わせることで、右図のように文字列を円形に配置することもできます。右図の画面イメージ内にある「コーヒー店のロゴのような円形のデザイン」には、画像は一切使われていません。すべての文字はテキストデータです。スクリプトとCSSを使って、この効果が実現されています。

このように文字列を扇形に配置するには、CSS3のtransformプロパティなどを駆使して1文字ずつ装飾を指定する方法もあります。しかし、それを自力で記述するのは面倒です。


 
文字列を扇形に配置するスクリプト「Arctext.js」

文字列を扇形に配置するスクリプト「Arctext.js」

そこで便利なのが、「Arctext.js」というスクリプトです。jQueryを使って作られたこのスクリプトを使えば、ほんの数行の記述で、簡単に文字列を扇形に配置できます。


 

画像化することなく、jQuery+CSS3で文字列を扇形・円形に配置

画像化することなく扇形に配置

画像化することなく扇形に配置

文字列を扇形や円形に配置して装飾したい場合、画像として作ってしまおうと思われるかもしれません。しかし、文字の画像化にはデメリットも多くあります。

この「Arctext.js」スクリプトを活用して、「テキスト」+「jQuery」+「CSS」で作れば、それらのデメリットはありません。検索にもヒットしますし、修正が容易なのでメンテナンス性が損なわれることもありません。


 
Arctext.js公式サイトのサンプルページ

Arctext.js公式サイトのサンプルページ

「Arctext.js」を使ってどのような効果が実現できるのかは、公式サイト内にある以下のサンプルページ(右図)をご覧頂くと、よく分かります。
Arctext.js - Curving text with CSS3 and jQuery

タイトルの「ARCTEXT.JS」や、その下の円形ロゴのような部分も、すべてテキストで構成されています。ページ全体の背景を除いて画像は使われていません。「Arctext.js」スクリプトとCSSだけで、これらの効果が出されています。


 
今回は、この「Arctext.js」スクリプトを使って文字列を扇形に配置する方法と、それらをCSSで装飾する方法をご紹介致します。

それでは次のページから、Arctext.jsスクリプトの設置方法と使い方を見ていきましょう。