(HTML,CSS)文字列をアーチ状(扇形)や円形に並べて配置する方法HTMLで任意の要素に書いた文字列を、アーチ状(扇形)にカーブさせて表示したり、円形に配置して表示したりする方法を解説。jQueryを使うスクリプト「Arctext.js」を活用すれば、テキストを画像化することなく自由な半径でアーチ状に配置できます。上向き・下向きのアーチを組み合わせれば、コーヒー店のロゴのように文字を円形に配置することもできます。文宏ホームページ作成ガイド文字列をアーチ状(扇形)にカーブさせたり、円形に配置したりするWebページ上で、文字列をアーチ状(扇形)にカーブさせて配置したいと思ったことはないでしょうか。ワープロソフトや年賀状ソフトなどにはよく、文字列をアーチ状に配置してカラフルに装飾する機能があります。そのような装飾は、下図のようにWebページ上でも作れます。文字列をアーチ状(扇形)に配置した表示例このように文字列をアーチ状に配置したい場合でも、文字列を画像化する必要はありません。JavaScriptとCSSを併用すれば、掲載する文字はテキストデータのままで、上図のようなアーチ状の配置や装飾が作れます。下向きにカーブするアーチと、上向きにカーブする逆アーチを組み合わせることで、下図のように文字列を円形に配置することもできます。下図の画面イメージ内にある「コーヒー店のロゴのような円形のデザイン」には、画像は一切使われていません。すべての文字はテキストデータであり、JavaScriptとCSSを使ってこのような表示効果を作っています。上向きアーチと下向きアーチを組み合わせることで、文字列を円形に配置することもできるこのように文字列をアーチ状に配置するには、CSSのtransformプロパティなどを駆使して1文字ずつ装飾を指定する方法もあります。それを自力で記述するのは面倒です。■文字列をアーチ状に配置してくれるJavaScriptを使えば簡単そこで便利なのが「Arctext.js」というスクリプトです。jQueryを使って作られたこのスクリプトを使えば、HTMLにほんの数行の記述を加えるだけで、簡単に任意の文字列をアーチ状に配置できます。文字列をアーチ状(扇形)や円形に配置して装飾したい場合、文字列を含む全体を画像として作ってしまおうと思われるかもしれません。文字の画像化にはデメリットも多くあります。このArctext.jsスクリプトを活用して、jQuery+CSSでテキストをアーチ状に装飾すれば、それらのデメリットはありません。アーチ状に装飾された文字列でも検索にヒットしますし、テキストデータなので修正が容易だというメリットもあります。このArctext.jsスクリプトを使ってどのようなテキストの配置エフェクトが作成できるのかは、公式サイト内にある以下のサンプルページをご覧頂くと、よく分かります。jQuery文字列をアーチ状(扇形)に配置してくれるスクリプトArctext.jsの公式サンプルページこのページ内に見えるタイトル部分の「ARCTEXT.JS」や、その下の円形ロゴのような部分も、すべてがテキスト(文字列)で構成されています。ページ全体の背景を除いて画像は使われていません。JavaScript(jQuery)とCSSだけで、これらのエフェクトが作られています。Arctext.jsを使って文字列をアーチ状(扇形)に配置する方法それでは、jQueryで書かれたスクリプトArctext.jsを使って、任意の文字列をアーチ状(扇形)に配置してみましょう。以下の手順で作業してみて下さい。Arctext.jsスクリプト一式をダウンロードして、自サイトにアップロードするまずは、Arctext.js配布サイトからスクリプト一式をダウンロードしましょう。SOURCE」と書かれたボタンが見えます。これをクリックすると、ZIP形式で圧縮されたファイル一式をダウンロードできます。SOURCE」をクリックして、スクリプト一式をダウンロードするダウンロードできるファイルは、本稿執筆時点では「Arctext.zip」というファイル名で、157KBでした。このZIPファイルの中には、下図のように3つのフォルダがあり、合計7つのファイルが含まれています。■ZIP内で必要なファイルはJavaScriptファイル1つだけ「jquery.arctext.js」だけが必要ZIPに含まれているファイルの中で必要なファイルは、jsフォルダの中に入っている「jquery.arctext.js」ファイル1つだけです。この1ファイルを、自サイト上の任意の場所にアップロードして下さい。■jQueryも必須なお、上記の「jquery.arctext.js」ファイル以外に、jQueryも読み込んでおく必要があります。本記事に掲載しているソースはjQueryをCDNサーバから読み込む方法を使っていますので、jQueryを自サイト上にアップロードしておく必要はありません。自サイト上にjQueryをアップロードしてあるなら、そちらを読み込むようにソースを修正しても問題ありません。HTMLに、jQuery本体とArctext.jsを読み込むよう記述する文字列をアーチ状(扇形)に配置したいWebページのHTMLソース内に以下の2行のscript要素を記述して、jQuery本体とArctext.jsスクリプトを読み込みます。type="text/javascript"></script>上記の1行目は、CDNサーバからjQuery本体を読み込む記述です。自サイト上にjQueryをアップロードしているなら、それを利用するよう修正しても構いません。2行目は、Arctext.jsを読み込む記述です。実際にアップロードした場所に合わせて修正して下さい。アーチ状(扇形)に配置したい箇所に、id名を付加するアーチ状(扇形)に配置したい文字列には、任意のid名を付加しておきます。id="example1">こんな感じで文字列を扇形に配置</p>ここでは「example1」というid名を付加しています。同時に複数の箇所をアーチ状にしたい場合は、「id="example1"」、「id="example2"」、「id="example3"」......などのように、異なるid名を付けて下さい。それぞれ個別の設定でアーチ状に整形できます。連番である必要はありません。どのようなアーチ状(扇形)にするのかをスクリプトで指定する「どのid名を付加した要素」を「どのようなアーチ状に整形するのか」という設定を、以下のような形式で記述します。300});</script>上記は、半径300pxの扇形として整形するよう指定した例です。この数値を書き換えることで、アーチの弧(文字列を並べるカーブ)の半径を指定します。値を大きくすればするほど、カーブは緩やかになります。■文字列をアーチ状に配置した表示例1:これまでにご紹介したソースを使ってブラウザで表示すると、下図のように見えます。実際にお使いのブラウザで表示を確認したい場合は、扇形に配置させるサンプルページ1をご覧下さい。■文字列をアーチ状に配置した表示例2:先ほどのソースで、アーチの半径を500pxに変更すると下図のように見えます。表示例1よりもカーブが緩やかになっていることがお分かり頂けるでしょう。このように、数値を変えるだけで自由にカーブの急さ(=扇形の半径)を指定できます。お使いのブラウザで表示を確認したい場合は、扇形に配置させるサンプルページ2をご覧下さい。CSSを使ってアーチに装飾を加えるこのArctext.jsスクリプトを使っただけでは、単に文字列の配置がアーチ状になるだけです。CSSを併用すると、1つ1つの文字に装飾を加えることもできます。下図は、各文字に緑色の囲みを加えてみた例です。実際にブラウザで表示確認したい場合は、扇形に配置させるサンプルページ3をご覧下さい。文字列をアーチ状(扇形)に配置した上で、文字を装飾することもできるこれは、以下のCSSソースを追加するだけで実現できます。*/}ここでは、アーチを作るid名(#example1)の内側にあるspan要素に対して装飾を指定しています。これだけでアーチを作る文字全体を装飾できます。Arctext.jsスクリプトが文字列をアーチ状に配置する際には、対象の文字1つ1つにspan要素を加えているためです。下図のように、アーチを構成する1文字ずつを異なる配色で表示させることもできます。ここでは、6種類の配色を繰り返し指定しています。お使いのブラウザで表示確認したい場合は、扇形に配置させるサンプルページ4をご覧下さい。アーチ状(扇形)に配置した文字列を、1文字ずつ個別の装飾を加えることもできるこの装飾は、以下の7行のCSSソースを記述すると作れます。}この書き方について詳しくは、記事「1文字ずつ色を変えるなど、文字単位で装飾する方法」で解説していますので、そちらをご参照下さい。文字列のアーチを調整するオプションさて、Arctext.jsスクリプトを使って表示できるエフェクトには他にも種類があります。次に、アーチ(扇形)の表示形態を変える2つのオプションと、文字列を円形に配置する活用例をご紹介いたします。Opt.1:アーチ状(扇形)に配置した各文字を傾けないようにする方法Opt.2:逆向きのアーチに配置する方法Opt.3:文字列を円形に配置する方法Opt.1:アーチ状(扇形)に配置した各文字を傾けないようにする方法これまでにご紹介した方法では、アーチ(扇形)の弧に沿うように、各文字も中心に向かって傾いて配置されていました。文字を傾けずに、配置だけをアーチ状にすることもできます。下図はその表示例です。各文字がアーチ状に配置されてはいますが、それぞれの文字は真っ直ぐ下を向いている(傾いていない)ことがお分かり頂けるでしょう。false」を加えます。上記のソース(文字を傾けずにアーチ状に配置)と、これまでにご紹介したソース(文字もアーチに沿うように傾ける配置)の2つを同時に表示させた画面です。このように比較してみると、各文字が傾いていないことがよく分かります。枠線を付加すると「rotate:false」を指定した方(上側)は文字が傾いていないのがよく分かる実際にブラウザで表示させてみるには、以下のサンプルページをご覧下さい。→扇形に配置させるサンプルページ5→扇形に配置させるサンプルページ5B(枠線付きの表示)Opt.2:逆向きのアーチに配置する方法これまでにご紹介したアーチ(扇形)は、下方向に広がるアーチでした。これを逆にして、上方向に広がる逆アーチ状にもできます。下図のような感じです。お使いのブラウザで表示確認するには、扇形に配置させるサンプルページ6をご覧下さい。-1」を書き加えます。-1});</script>Opt.3:文字列を円形に配置する方法これまでにご紹介したアーチ状(扇形)に配置する方法を組み合わせると、下図のように円形に配置することもできます。下図では、文字が円形に配置されていますが、画像は一切使っていません。中心にある「A」の文字は「Webフォントを活用したテキスト」です。すべて、今回ご紹介したArctext.jsスクリプトとCSSで作られています。上向きアーチと下向きアーチを組み合わせることで、文字列を円形に配置することもできる■文字列を円形に配置するためのHTMLソースHTMLソースは以下のようにシンプルなものです。「上側の弧内の文字列」を作るp要素と、「下側の弧内の文字列」を作るp要素の2つを記述しているだけです。id="arc-lower">製作サンプル!</p>■文字列を円形に配置するためのJavaScriptソースJavaScriptソースでは、先のp要素を「下向きのアーチ」にして、後のp要素を「上向きのアーチ」にしています。この2つを組み合わせることで、円形に見えるようになります。-1});</script>■文字列を円形に配置するためのCSSソース先のサンプルを表示させるためのCSSソースは、様々なプロパティを駆使して工夫したソースになっています。1つ1つ解説すると長くなるため、ここでの説明は割愛します。以下のサンプルページのHTMLソースにはコメントを書き加えて見やすくしてありますので、興味がおありならソースをご参照下さい。→文字列を円形に配置するサンプルなお、このサンプルページで利用しているソースは、Arctext.jsサイトで公開されているサンプルページのソースをほぼそのまま使ったものです。余分な記述を取り除いて、若干シンプルに読めるよう修正してあります。今回は、jQueryを使ったスクリプトArctext.jsを使用して、文字列をアーチ状(扇形)に配置する方法をご紹介いたしました。凝った見出しを作る際などに活用できるでしょう。【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。