日記

「こんな形にテキスト配置してみたい!」を実現する、指定の形状にテキストを囲む事ができるスクリプト -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/

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


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

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

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

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


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

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

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


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

名村晋治

株式会社サービシンク

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

名村晋治

1996年よりWeb制作に携わり、キャリア25年目のWebディレクター

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からはWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。

詳しいプロフィール

もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、またNHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

俳優時代の経験を活かし、演劇の訓練メソッドを利用した「コミュニケーションスキル」向上を目指したセミナー・研修も実施しています。

最新の記事