Experts.jp日本に、もっとエキスパートを。雑誌や新聞のような、自由でクリエイティブなWebデザインを実現できると注目されていますが、その実、何ができるのかは未知数です。Regions」を使ってできること、そして実際の記述方法について解説されました。Safari、そしてChrome。Regions」を有効にする必要があります。これまで、テキスト情報を流しこむときには、ボックスごとに、どのテキスト情報を流しこむか個別に指定する必要がありました。Regions」は、複数のボックスをまたいだリフローを可能にしました。左右にボックス要素がある場合、左のボックスに入りきらなかったテキスト情報を、自動的に右のボックスへリフローさせることができるようになったのです。Regions」によって、CSSに1~2行、記述を追加するだけで、DTPを使った雑誌のような表現ができるようになりました。Regions」を記述するときの基本的な考え方は、「コンテンツとレイアウトの分離」。一般的に、ボックスの中にコンテンツ(テキスト情報と画像)を記述したいときは、まずボックスを配置し、その中にテキスト情報や画像を記述していました。Regions」では、ボックスとコンテンツを別々に記述していきます。具体的なソースコードは以下になります。CSSで「flow-into」と「flow-from」を指定するだけでよく、JavaScriptによる複雑な記述はいりません。CSSメディアクエリとの組み合わせにも相性がよく、レスポンシブウェブデザインに適しています。パソコンでは3ボックスにまたがっているテキスト情報をスマートフォンで表示させる場合も、追加の記述は必要なく、上の図のような記述だけで1ボックスにリフローさせることができる。オーバーフローしたりレイアウトが崩れたりすることもありません。Regions」のサンプルコードは、「CODEPEN」の「Regions」のページに多数掲載されているので、ぜひ参考にしてください。Shapes」を使えば、四角形にしばられないレイアウトが可能になります。Shapes」は、ハート形やひし形、円形などさまざまな形の内側、あるいは周囲にテキストを流し込むことができる技術。具体的な記述方法は、以下の図を参照してください。Shapes」は考え方も記述方法もシンプルな分、大切なのは、この技術を何に応用するのか、アイデアのバックグラウンドを持つことです。Wonderland』などデモ版を開発。文章の最初の文字を絵のように表示させ、その周りをテキスト情報で取り囲んだり、テキストがキャラクターの吐き出すパイプの煙のように揺らいで見えたりします。CC(エッジリフロー)」がリリースされています。中でも、「エッジリフロー」は、CSSの知識があまりなくても、直感的な操作だけで、ブラウザで動作するレイアウトをデザインできるツール。現在は無料で提供されているので、ぜひ使ってみてください。おわりに企業ブランディングの提案の際も、複雑な形の商品写真の周りを文字で取り囲むなど、今までと違う提案ができるようになります。Shapes」が普及すれば、WebデザインがDTPデザインに比べて遅れている部分を、かなり取り戻せるでしょう。