日記

「こんな形にテキスト配置してみたい!」を実現する、指定の形状にテキストを囲む事ができるスクリプト -CSS Text Wrapper

CSS Text Wrapperのデモ

CSS Text Wrapperのデモ

テキストで何かしら文章を作成した場合、たとえば画像とテキストで回りこみをするとかしないとかって指定は比較的簡単にやりやすいですよね。

でも横の画像の様に、テキストをインデント位置を斜めにしながらのエリアとか、ましてや円形とかってのは、いざやるといなると、「う〜〜〜ん」って考えてしまいます。

もちろん、その形が紙ではなくてWebという形式で「読みやすいのか?」って議論はあると思いますが、Flashなんかを使わずに、テキスト部分に動きとか遊びを与えるには表現としてはありだと思っています。

ただ、既存のレイアウト方法では、やっぱり紙とかでやるようには簡単に行きません。

それを解決してくれる便利ツールです!


CSS Text Wrapper[beta]


CSS Text Wrapper設定画面

CSS Text Wrapper設定画面

http://www.csstextwrap.com/

ここのサイトでは、表示したいテキストを入力して(初期にはダミーテキストが入っています)、レンダリング結果表示画面の左右にある「●」をマウスで移動させると、それに付随して、丸と丸を結んでいるラインが移動して、斜めとかにすることができます。


自分のページへの設定方法画面

自分のページへの設定方法画面

角の数を多くしたい時にはラインの上でクリックをすると、●が追加されるので、多角形を作ることもできます。

なので、円形にを作り出したい時は、角を多くして、細かくすれば円のようになっていくわけです。
(最初多角形の作り方が分からなかった・・・(笑))


するとリアルタイムに上でレンダリング結果が反映されるので、自分で納得できた形になったら、ページ下部にある、設定方法部分を参考に自分のページに張り付ければ、ユニークな形で画像を張り付けることができます。

ここでは初期設定で画像を読み込ませることもできる(ただし、背景に繰り返し指定しか設定できないみたい)ので、背景を上手くつくれば、円形に配置されたテキストの周りに画像がある、といったいわゆる「紙とか雑誌的な」レイアウトも比較的簡単に作ることができそうです。

画面的にはかなり動きが出ると思うので、ケースバイケースでは使ってみるのもありかと思います!


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

不動産業界に特化したWebサイト制作・システム開発をおこなうサービシンクでプロデュース、ディレクションからテクニカル・ディレクターまでを担当。
元プロの声優であり、Webディレクターとして22年のキャリアを持つ。
(詳細は下の「詳しいプロフィール」をクリックしてみてください。

Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

詳しいプロフィール

大学二年生の96年からWebの制作集団ネイムヴィレッジを主催。
大学卒業の99年までの間に100社ほどのサイト制作の企画、ディレクション、デザイン、Perlでの開発、マークアップに携わる。
大学卒業と同時に俳優になるために上京し俳優修業開始。
2000年からは俳優修業の傍ら不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
俳優としては、舞台演劇、プロの声優としても活動したが最終的30歳を目前に足を洗う。

2005年に株式会社LIFULLが自社媒体に注力するためSips業から撤退する事をきっかけとして、代表の井上とシェイクハンドをして退社。

2005年から株式会社ソナーに合流し取締役なども歴任し不動産業界のサイト制作のディレクションからフロント実装を担当。

2010年1月12日から株式会社サービシンクを立ち上げ、代表取締役に就任。
不動産業界に特化したサイト制作のアートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。
基軸としてはクライアントの商売に寄り添うために、徹底的に思考を巡らせるためのディレクションを行う。
Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

最新の記事