• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
新しいCSSの仕様を色々調べてみた
 

新しいCSSの仕様を色々調べてみた

on

  • 23,675 views

第3回HTML5ビギナーズ!(http://atnd.org/events/44530)の「新しいCSSの仕様を色々調べてみた」の資料です。 ...

第3回HTML5ビギナーズ!(http://atnd.org/events/44530)の「新しいCSSの仕様を色々調べてみた」の資料です。

『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』

以下のCSS3の新しい機能の初心者向け資料です。
 ・Flexbox
 ・Regions
 ・Shapes
 ・Multi-column Layout
 ・Grid Layout
 ・Exclusions

Statistics

Views

Total Views
23,675
Views on SlideShare
21,779
Embed Views
1,896

Actions

Likes
139
Downloads
140
Comments
0

41 Embeds 1,896

http://sadah.hatenablog.com 638
http://mitsulog.hatenablog.com 577
https://twitter.com 471
http://dev.gcserver.jp 73
https://www.facebook.com 61
http://tweetedtimes.com 15
http://localhost 11
http://nuevospowerpoints.blogspot.mx 6
http://cloud.feedly.com 6
http://nuevospowerpoints.blogspot.com 4
https://www.chatwork.com 3
http://b.hatena.ne.jp 2
https://m.facebook.com&_=1382631311284 HTTP 1
https://m.facebook.com&_=1382648298878 HTTP 1
https://m.facebook.com&_=1382654952567 HTTP 1
https://m.facebook.com&_=1382648292206 HTTP 1
https://m.facebook.com&_=1382659224154 HTTP 1
https://m.facebook.com&_=1382658674687 HTTP 1
https://m.facebook.com&_=1382761854051 HTTP 1
https://m.facebook.com&_=1382658543843 HTTP 1
https://m.facebook.com&_=1383492944574 HTTP 1
https://m.facebook.com&_=1383664843034 HTTP 1
http://webcache.googleusercontent.com 1
https://m.facebook.com&_=1382590028437 HTTP 1
http://nuevospowerpoints.blogspot.com.ar 1
https://m.facebook.com&_=1382620636905 HTTP 1
https://m.facebook.com&_=1382578898241 HTTP 1
https://m.facebook.com&_=1382579417610 HTTP 1
https://m.facebook.com&_=1382581781393 HTTP 1
https://m.facebook.com&_=1382584111228 HTTP 1
https://m.facebook.com&_=1382584127108 HTTP 1
https://m.facebook.com&_=1382585446477 HTTP 1
https://m.facebook.com&_=1382585861342 HTTP 1
https://m.facebook.com&_=1382587930253 HTTP 1
https://m.facebook.com&_=1382589756992 HTTP 1
https://m.facebook.com&_=1382589700370 HTTP 1
https://m.facebook.com&_=1382592342832 HTTP 1
https://m.facebook.com&_=1382599164221 HTTP 1
https://m.facebook.com&_=1382599141972 HTTP 1
https://m.facebook.com&_=1382605237302 HTTP 1
https://m.facebook.com&_=1382578793574 HTTP 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

新しいCSSの仕様を色々調べてみた 新しいCSSの仕様を色々調べてみた Presentation Transcript

  • 新しいCSSの仕様を 色々調べてみた 第3回HTML5ビギナーズ!   2013/10/23 @hiromitsuuuuu 1
  • Who am I? @  hiromitsuuuuu   Hiromi  Morikawa   n  html5j スタッフ n  うどん県 → 福岡 → 東京なう n  Web Developper n  HTML5, CSS, JS, UI, Javaも少々 n  フロントエンド中心のR&Dチーム でWeb標準系技術担当やってます n  blog : RIAxDNP, Mitsu.log(); 2
  • みんなはじめはビギナー 調べてみることにしました \(^o^)/ 3
  • 新しいCSSの仕様 CSS3でできるようになったこと n  グラデーション n  ドロップシャドウ n  アニメーション n  角丸 n  不透明度 n  Webフォント            ・・・etc そのなかでも、レイアウト系の仕様のお話をします 4
  • Agenda n Flexbox 15min n Regions 5min n Shapes 5min n Multi-column 5min n Grid Layout 2min n Exclusions 2min n まとめ 【引用】  CSS  Regions  Module  Level1  ,  除外 (Internet  Explorer)   5
  • お話しすること n 何ができるの? n 使えたら便利になること、これまでと変わること n 基本的な考え方と使い方 n 簡単なデモ n 詳しく知りたい場合に参考になるURLなど 6
  • Attention n ほとんどが策定中の仕様の先行実装のため、   ベンダープレフィックスが必要です •  -webkit , -moz, -ms とか n 本日おはなししないこと •  プロパティや実装方法の詳細 •  ブラウザ間の実装差など さっそく しようを みてみよう 7
  • まえおきが長くなりましたが…ひとつめの仕様 Flexbox
  • Flexbox ができること コンテナ上で要素を縦横柔軟に配置できる!
  • 便利になること ∼要素の回り込み∼ Befor e float:  left;    float:  left;   ユニクロオンラインストア   clear:  both; clear:  both;   After display:  flex;    display:  flex;    floatの解除を気にしなくていい ヽ(○´∀`)ノ
  • 便利になること ∼可変幅∼ Yahoo!  JAPAN   Befor e 11 width:  33.33%; After flex:  1;    widthの面倒な計算もしなくていいヽ(○´∀`)ノ 11
  • 便利になること n 対象の要素以外に影響しない n 固定幅と可変幅の切り替えが簡単にできる n 並びの順番を簡単に変更できる 12
  • 基本になる考え方 Flexコンテナ Flexアイテム Flexアイテム Flexアイテム 13
  • Demo n display : flex; ※ラッパーとなる要素に指定 <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> .flex-container { display: flex; } CSS HTML 14
  • 基本になる考え方 Flexコンテナ Flexアイテム Flexアイテム Flexアイテム Flexコンテナ直下の子要素は 自動的にFlexアイテムになる Flexコンテナ用、Flexアイテム用のプロパティがある 15
  • プロパティ一覧 n 並びの方向を変える flex-direction n 折り返す順を決める flex-wrap n 並び順を変更する order n 可変幅に対応する flex n 横方向の寄せを指定する justify-content n 縦方向の寄せを指定する align-items etc… デモで かくにん してみよう。 16
  • 使われている例 flexbox適用前 flexbox適用後 html5j(hFp://html5j.org/)   <section> <a> <h4></h4> <img> </a> <p></p> </section> img要素   order:  -­‐1; a要素   display:  flex;   flex-­‐direction:  column; レイアウトと構造を分離できる 17
  • もっと詳しく 草案 最終草案 勧告候補 勧告案 W3C勧告 n CSS  Flexible  Box  Layout  Module n 過去の仕様に注意 •  box, flexbox, flex •  IE10だけflexbox仕様… •  flexboxの旧仕様、改定仕様、現行仕様の一覧   n  ベンダープレフィックス無しで動作する環境も n  CSS  Flexbox  Please!   18
  • 電子書籍とか雑誌レイアウトに使えそう Regions
  • Regions ができること 複数の要素にまたがって コンテンツを流し込むことができる 【引用】  CSS  Regions  Module  Level1  
  • 便利になること Flipboard   代官山DAIKANYAMA  T-­‐SITE   21
  • 便利になること Befor e できなかった!! でごりごり書かないといけな かった… まじやりたくない( `д´) After •  元となるコンテンツと表示エリアを 用意する •  CSSを指定する JSでの処理をしなくてもいいヽ(○´∀`)ノ   22
  • 基本になる考え方 abc…--------------------------------------------------------------------------------------------------------------------------- コンテンツの中身 <div> + <div> <div> コンテンツを表示 させたい領域 abc…--------------------------------- = ------------------------------------------------------------------流し込まれる! 23
  • Demo n flow-into, flow-from <!-- コンテンツの中身の定義 --> /* コンテンツの中身の定義 */ #source { -webkit-flow-into: sample; } ※任意の名前 <div id="source"> <p>むかしむかし、あるところに…</p>   <p>おじいさんは山へしばかれに…</p> </div> <!-- 表示する領域の定義 --> /* 表示する領域の定義 */ <article> <p class="region"></p> <p class="region"></p> </article> .region { -webkit-flow-from: sample;  } CSS HTML 24
  • 基本になる考え方 abc…--------------------------------------------------------------------------------------------------------------------------- コンテンツの中身 <div> + <div> <div> コンテンツを表示 させたい領域 abc…--------------------------------- = ------------------------------------------------------------------流し込まれる! レイアウトとコンテンツを切り離して考える 25
  • Demo n  はみ出し部分の表示方法 region-fragment •  overflowプロパティと同じような動作 n  特定の領域にスタイルを適用する 擬似要素regions n  Regions - a collection by Adobe Web Platform ‒ CodePen デモで かくにん してみよう。 26
  • もっと詳しく 作業草稿 Working Draft, WD 最終草案 Last Call WorkingDraft 勧告候補 勧告案 W3C勧告 Proposed W3C Recommendation, Candidate Recommendation, CR Recommendation, PR REC n CSS Regions Module Level1 n  Chrome, IE10+, iOS7 MobileSafari で動く n  Chromeブラウザのchrome://flags で 「試験運用版の ウェブプラットフォームの機能を有効にする」をONにする n  領域 |  レイアウト |  Adobe  &  HTML n  iOS 7 が対応した CSS Regions + Shapes による文字 レイアウトのサンプル 27
  • 四角形からの脱却! Shapes
  • Shapes ができること シェイプの内側、外側へテキストの流し込みができる Magazin  Layout  by  Ronel  van  Heerden 29
  • 便利になること Cooking  with  Shapes   画像・四角形からの脱却 ヽ(○´∀`)ノ   30
  • 基本の考え方 float + = abc…-------------------------------------------------------------------------------------------- 回り込みエリアの形状を定義する 31
  • Demo n shape-outside, shape-margin .circle { float: left; -webkit-shape-outside: circle(100px,100px,100px); -webkit-shape-margin: 10px; } <div> <div class='circle'></div> <p>ここの文章をまあるく回りこませてください…</p> </div> CSS HTML 32
  • 基本の考え方 ここ。 回り込みエリアの形状を定義する 33
  • Demo n  さまざまな形状のプロパティ n  複雑な形状も定義できる n  Polygon Dawn n  Nevermore n  Exclusions and Shapes - a collection by Adobe Web Platform - CodePen デモで かくにん してみよう。 34
  • もっと詳しく 作業草稿 Working Draft, WD 最終草案 Last Call WorkingDraft 勧告候補 勧告案 W3C勧告 Proposed W3C Recommendation, Candidate Recommendation, CR Recommendation, PR REC n  【仕様】 CSS Shapes Module Level 1 n  Chrome, iOS7 MobileSafari で動く n  Chromeブラウザはchrome://flags で 「試験運用版のウェブプ ラットフォームの機能を有効にする」をONにする n  シェイプの中への流し込みの仕様は  CSS Shapes Module Level 2 に延期された n  シェイプ ¦ レイアウト ¦ Adobe & HTML n  CSS Shapes the future of the web 35
  • 雑誌のようなレイアウトがWEBでできる! Multi-column Layout
  • Multi-column Layout ができること 段組みレイアウトが可能になる
  • 便利になること n Regionsと同じ流し込みの問題 + nicoスライム 2012  autumn  and  winter   雑誌のような   レイアウトができる   ヽ(○´∀`)ノ   CSS  3  の段組みとその使いどころ 38
  • Demo n column-count .column {     column-count:2; } n column-width .column { column-width: 250px; column-gap: 50px; } カラム数を指定する CSS <div class="column"> <p>むかしむかし、あるところに…</p>   <p>おじいさんは山へしばかれに…</p> </div> HTML 段の幅を指定する CSS <div class="column"> <p>むかしむかし、あるところに…</p>   <p>おじいさんは山へしばかれに…</p> HTML </div> 39
  • もっと詳しく 作業草稿 Working Draft, WD 最終草案 Last Call WorkingDraft 勧告候補 勧告案 W3C勧告 Proposed W3C Recommendation, Candidate Recommendation, CR Recommendation, PR REC n  【仕様】 CSS Multi-column Layout Module n  【対応状況】Can I use CSS3 Multiple column layout? n  MDN  :  CSS  マルチカラムレイアウトの利用   n  CSS3  MULTI  COLUMN   •  カラム数などを入力して確認することができるデモサイト   40
  • ほかにもこんなのがあります Grid Layout Exclusions &
  • Grid Layout 要素をグリッド状に 配置できる仕様 CSS Grid Layout Module Level 1 .myGrid {     display: grid; } 【引用】CSS  グリッドを使ってアダプティブ レイアウトを作成する方法   n  プロパティを使って列と行を設定する n  まさにテーブルレイアウト! n  IE10+ のみ (Can I use CSS Grid Layout?) •  [参考]グリッド レイアウト(Internet Explorer) 42
  • Exclusions 要素を囲むように テキストを折り返す仕様 CSS Exclusions Module Level 1 .myExclusions {     wrap-flow: both; } 【引用】除外 (Internet  Explorer)   n  要素の反対側にもフローさせることができる n  情報も少なく、変更も多いまだまだの仕様 •  HTMLとCSS3でリッチなページレイアウトを実現する (Adobe) •  除外 (Internet Explorer) •  Adobe&HTML:除外領域とシェイプ 43
  • 似たようなのがたくさん出てきてややこしくなってきましたが… まとめ
  • 新しいCSSの仕様 n Flexbox Floatのような要素の回り込み や、可変幅なボックスに n Multi-column 雑誌のような段組レイアウト をしたいときに n Regions 複数の要素にまたがってコン テンツを流し込みたいときに n Grid Layout 要素をグリッド上に配置し たいときに n Shapes シェイプの内外にテキストを 流し込みたいときに n Exclusions 要素を囲むようにテキス トを折り返すときに 【引用】  CSS  Regions  Module  Level1  ,  除外 (Internet  Explorer)   45
  • まとめ n  これまでのレイアウトがより簡単に! n  複雑なレイアウトがCSSでできる! n  でも実用にはもうすこしかかりそうなものも n  調べる際に注意したいこと •  Working Draftは仕様がころころ変わるので注意 •  新旧どちらのプロパティが実装されてるか •  なるべく日付の新しい記事を読む かんたんになると ビギナーにもうれしい !! わたしもできるかも ! 46
  • 新しいCSSの仕様を 色々調べてみた 第3回HTML5ビギナーズ!   2013/10/23 Thank you so much :) @hiromitsuuuuu Special thanks @ChisaMi