次世代のプロパティ”CSS Shapes/Region”が凄い!in blog

 
date:2013.12.09   posted by:furusawa
 

こんにちは!
インターンの古沢です!

先日11月30日にHTML5 Conference 2013 に行ってきましたのでレポートします!

HTML5Conferenceとは?

HTML5 Conference 2013はhtml5jが主催するHTML5に特化した技術系のイベントです!
昨年のHTML5 Conference 2012に引き続き二回目の開催となりました。今年の規模はなんと2000人!
こんなにも多くのweb技術者がここに集まっていると考えるだけで凄く((o(´∀`)o))ワクワクしてしまいました!

HTMl5 Conferenceでは、一日30セッションあり、その中から見たいスピーカーのセッションを選んでいくスタイルです。
一日見て回ったのですが、その中でも特に面白いと感じた“ CSS Regionsを使った新しいCSSレイアウトを作る方法 “
セッションについて、お話したいと思います。

このセッションでは、CSS3の次世代プロパティ CSS Region と CSS Shapes についてのお話でした。

CSS Region とは、複数のボックス(コンテナ)への流し込みを可能にするプロパティです。
CSS Shapes とは、要素を従来の四角形の形だけでなく、◯や△などの様々な形に変形させることができます。そして、それに対して文字を流しこんだり、回りこませることができるプロパティです。

・・・

(´ε`;)ウーン…よく分からない!!!!

百聞は一見に如かず!サンプルコードを見てみましょう!

っと、その前に・・・

次世代のプロパティを体験するための準備

CSS Shapes/Regionは最新のGoogle Chromeでも正しく動作しません。そこで、Google Chrome Cananyというブラウザを使用します。Google Chrome Cananyとは開発用のGoogle Chrome のことで、まだ安定版には入れることが出来ない機能が色々と盛り込まれており、これを使うことでいち早く最新の機能を体験することができます。

それでは、準備していきましょう!

1. Google Chrome Cananyをダウンロードする

まずはGoogle Chrome Cananyをダウンロードしましょう!金色に輝くChrome!!チョーカックイイ!!

2. 試験運用版の機能をオンにする

Google Chrome Cananyをダウンロードしたら、検索バーに

chrome://flags/#enable-experimental-web-platform-features

と入力してください。
そうすると、試験運用版の機能についての設定画面が現れます。その中の、
“試験運用版のウェブ プラットフォームの機能を有効にする。”を有効にしましょう!

3. 再起動

Google Chrome Cananyを再起動してください。
これで、準備は完了です!
さぁ、それでは体験してみましょう!

CSS Shapes

CSS Shapesを利用したサンプルを作る。

http://www.thedesignium.com/furusawa/samples/shapes.html

divが四角形ではなく、楕円な形をしており、またそれに沿って文字が流れこんできているのが分かるかと思います!
(なってない人はブラウザの確認を!)

下の例では、四角形ではなく、三角形のdivが作られており、そしてそのエリアに文字列が収まるように入っています。
今までではなかなか実現することが難しかったこのようなレイアウトが簡単に実現することが出来ます!
外側に回りこませたい時は

float: left;

-webkit-shape-outside: rectangle(0, 0, 100%, ~~);

のように、shape-outsideを指定するとその要素を沿って回りこませることが出来ます。
ちなみに、図形の部分に画像を適用することもできます。アルファがかかってる部分に流れこんできます。
こんな感じになります。

しかし、現在Google Chrome Cananyでも対応していないので、体験できるのはまだ先になりそうです。
また、要素の内側に収めたい時は

float: left;

-webkit-shape-intside: rectangle(0, 0, 100%, ~~);

のように、shape-insideを指定するとその要素を沿って流し込むことが出来ます。

Shapesを利用すときはfloat:leftは必須です!shapesのプロパティは float areaを指定するものなので、そもそも、floatしなければ意味が無いです。

うーん!革新的ですね!!

続いて、CSS Regionのプロパティについてご紹介します。

CSS Region

CSS Regionを利用したコンテンツを作ってみました。

http://www.thedesignium.com/furusawa/samples/region.html

ブラウザが狭くなってくると、入りきらなくなったコンテンツが5つのボックスにどんどん流れ込んでくるのが分かるかと思います。RWDと組み合わせることでさらに幅広いデザインを実現することが出来そうですね!!
imgに関しても、はみ出た分だけ次のボックスに流れ込みます。こんなん見たことないで!!!!w

新たなwebデザインが求められる!?

今回新しいプロパティを2つご紹介しました。これらのプロパティは最新のブラウザでも使うことは出来ません。しかし、現在実装に向けてどんどんと開発が進んでいます。
新しいプロパティが追加されていくのに伴って、これらを利用した今までとはまったく違ったWebデザインが主流となってくるのかもしれないと感じました。テーブルレイアウト → フルCSSレイアウトと移り変わっていったように、“次世代CSS3レイアウト”なんて言葉が出てくるのかなと想像してしまったり・・・

これらの機能はいずれもCSS3に盛り込まれずに廃止になる可能性もあります。ですが、このような技術を今からサーチして、修得しておくことで、将来一歩先を行くコーダーになることができるのではないかと思います。
僕も、常に最新の技術を取り入れていき、CSSShapesのように四角形にとらわれず、CSSRegionのように柔軟にカッコヨク対応できるコーダーを目指していきたいと思います!

ここまで読んでいただきありがとうございました!
次回もよろしくお願いします!( ・`ω・´)ノ

—————-参考—————-

Flowing content with CSS Exclusions: Shape Inside

CSS Shapes デモと解説

jQSlickWrap

CSS Regionsを使った新しい CSSレイアウトを作る方法

 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none