各記事に対してコメントが投稿できます。お気軽にご参加ください。
2007年12月06日(Thu)
「こんな形にテキスト配置してみたい！」を実現する、指定の形状にテキストを囲む事ができるスクリプト -CSS Text Wrapper [日記]
CSS Text Wrapperのデモ
テキストで何かしら文章を作成した場合、たとえば画像とテキストで回りこみをするとかしないとかって指定は比較的簡単にやりやすいですよね。
でも横の画像の様に、テキストをインデント位置を斜めにしながらのエリアとか、ましてや円形とかってのは、いざやるといなると、「う〜〜〜ん」って考えてしまいます。
もちろん、その形が紙ではなくてWebという形式で「読みやすいのか？」って議論はあると思いますが、Flashなんかを使わずに、テキスト部分に動きとか遊びを与えるには表現としてはありだと思っています。
ただ、既存のレイアウト方法では、やっぱり紙とかでやるようには簡単に行きません。
それを解決してくれる便利ツールです！
CSS Text Wrapper[beta]
CSS Text Wrapper設定画面
http://www.csstextwrap.com/
ここのサイトでは、表示したいテキストを入力して（初期にはダミーテキストが入っています）、レンダリング結果表示画面の左右にある「●」をマウスで移動させると、それに付随して、丸と丸を結んでいるラインが移動して、斜めとかにすることができます。
自分のページへの設定方法画面
角の数を多くしたい時にはラインの上でクリックをすると、●が追加されるので、多角形を作ることもできます。
なので、円形にを作り出したい時は、角を多くして、細かくすれば円のようになっていくわけです。
（最初多角形の作り方が分からなかった・・・(笑)）
するとリアルタイムに上でレンダリング結果が反映されるので、自分で納得できた形になったら、ページ下部にある、設定方法部分を参考に自分のページに張り付ければ、ユニークな形で画像を張り付けることができます。
ここでは初期設定で画像を読み込ませることもできる（ただし、背景に繰り返し指定しか設定できないみたい）ので、背景を上手くつくれば、円形に配置されたテキストの周りに画像がある、といったいわゆる「紙とか雑誌的な」レイアウトも比較的簡単に作ることができそうです。
画面的にはかなり動きが出ると思うので、ケースバイケースでは使ってみるのもありかと思います！
Posted
by 名村晋治
at 2007年12月06日13時12分
トラックバック
http://web-directions.com/director/tb.php?ID=368
ページのトップへ
