2013.2.16

Adobe、レスポンシブなWEBサイトを視覚的にデザインすることが出来る「Adobe Edge Reflow」のプレビュー版を公開 無償で利用可能

EdgeReflowProject*_-_Edge_Reflow

AdobeがレスポンシブなWEBサイトを簡単にデザイン出来るようにするツール、Adobe Edge Reflow」のプレビュー版を公開しました。Adobe Creative Cloud会員(無料会員でもOK)なら無償でダウンロードし使用することをが可能です。

レスポンシブデザインはこのブログでも採用していますが、ブラウザの幅によってデザインが変化するデザインです。これを一からCSSで書いていくのはなかなか骨が折れる作業なのですが、このEdge Reflowを使うとある程度視覚にデザインしていくことが可能です。

EdgeReflowProject*_-_Edge_Reflow-2

上記のスクリーンキャプチャはこのブログのデザインを元にして、試しに書いて見たものです。上にあるバー(480とか768とか書いてある部分)が基点となる横幅になります。このブログだとフルサイズの横幅は900pxでデザインしていますが、ブラウザがそれ以下の幅しかない場合、768px〜900pxの間は768px、480px〜768pxの間は480px、480px以下なら100%指定としています。

これをCSSで書いてアップロードしてブラウザで表示、実際にブラウザの横幅を変更して確認……ということをすると手間がかかってしかたがないんのですが、Edge Reflowなら右端のバーをずらして横幅を変えることで、表示確認を行うことが可能です。

EdgeReflowProject_preview.html

また、Chrome限定のようですが、実際にブラウザでの表示確認も行えます。

残念ながらプレビュー版ということでHTMLやCSSのソースの書き出しなどを行うことが出来ず、単にデザインの確認に使えるだけなのですが、Chromeで表示させたあと、Developper toolでCSSファイルを抜き出すことも可能なのでかなりの手間を省くことが出来そうです。

(source Adobe)

タグ: , ,
News >モバイル

1万円台の格安スマホ ZTE BLADE E02販売開始、スナドラ210にRAM2GB、au VoLTE対応

アプリはあまり使わずYouTubeが見れればいいくらいの感じなら良さそう。

雑記

入っていて良かった! Fire(第5世代)の画面が割れたので保証を使い良品交換

転ばぬ先の杖。保護シート買うのと変わらない感覚です。

iPhone 8/8 Plusの画像フォーマット HEIF、HEVC/H.265はiPhone 7でも利用可能

とりあえず、「高効率」に設定しておいても問題はなさそう

back to top