レスポンシブデザイン。
PCやタブレット、スマートフォンなどの
様々な解像度の機器での表示に対応したWebデザイン、
HTMLとCSSをそのレスポンシブに対応した形で記述すれば
そのひとつのHTMLとCSSで自動的にレイアウトを最適化してくれる…
という、なんだか凄くて素晴らしいけど
実際どういう記述で実現しているのか理解が追いついていない
このレスポンシブデザインですが、
ちなみにレスポンシブデザイン、
Tipstourのテーマ『Great』でも実装されてます。
FROONT
FROONT – design responsive websites in the browser
上記サイトのStart nowから開始出来ます。
ユーザ登録が必須なようですが、まあ形式上必要になる程度みたいですね。
これがログイン後の画面。
「Blank Page」からデザイン作成を開始出来るみたいですが…
開いてみると確かにブランクページ、
まっさらな状態すぎて作り方がわからないという始末。
おとなしく「Demo Page」を選択します。
こんな感じでFront Pageのデモが。
それぞれのテキストや画像、カラムなどが
選択可能な状態で表示されています。
この画面から、レイアウトを変更可能なようです。
ウィジェットツリー。
ここにそれぞれのパーツ一覧が表示されます。
画面上部のView HTML/CSSを選択すると…
現在表示されているHTMLとCSSの記述が自動生成されます。
これがこのサービスのキモとなる部分ですね。
ちょっとしたデザインをGUIで作って、
ここでCSSやHTMLとして拾い上げることも可能そう。
レスポンシブ対応のウェブデザインというだけあって
タブレット・スマートフォン用のサイズの表示も出来ました。
画面上部のこのバーをクリックすると…
こんな風にスマホサイズに自動調整されたレイアウトが表示されます。
すげぇー、すげぇー。
総括
Web上で出来るレベルとしてはかなり画期的なこのツール、
使いこなせればかなり強力なモノであることは間違いないように感じます。
が、画面を見ただけだと操作方法がサッパリわからなんだ、
ちょっと使いこなすには基本から調べて色々試してみないと
おいそれとクールなレスポンシブデザインが作成出来るわけではなさそうですね…。
