新しいCSSの仕様を色々調べてみた / css3 new spec

Slide 1

Slide 1 text

৽͍͠CSSͷ࢓༷Λ ৭ʑௐ΂ͯΈͨ 1 第3回HTML5ビギナーズ！ 2013/10/23 @hiromitsuuuuu

Slide 2

Slide 2 text

8IPBN* n  IUNMKελοϑ n  ͏ͲΜݝˠ෱Ԭˠ౦ژͳ͏ n  8FC%FWFMPQQFS n  )5.- $44 +4 6* +BWB΋গʑ n  ϑϩϯτΤϯυத৺ͷR&DνʔϜ ͰWebඪ४ܥٕज़୲౰΍ͬͯ·͢ n  CMPH3*"Y%/1 .JUTVMPH Hiromi Morikawa @ hiromitsuuuuu 2

Slide 3

Slide 3 text

ΈΜͳ͸͡Ί͸ϏΪφʔ 3 ௐ΂ͯΈΔ͜ͱʹ͠·ͨ͠ʘ ?P? ʗ

Slide 4

Slide 4 text

৽͍͠$44ͷ࢓༷ 4 CSS3でできるようになったこと n  グラデーション n  ドロップシャドウ n  アニメーション n  角丸 n  不透明度 n  Webフォント　　　　　　　　　　　・・・etc ͦͷͳ͔Ͱ΋ɺϨΠΞ΢τܥͷ࢓༷ͷ͓࿩Λ͠·͢

Slide 5

Slide 5 text

"HFOEB 5 n &YDMVTJPOT n 4IBQFT n 'MFYCPY n 3FHJPOT n .VMUJDPMVNO n (SJE-BZPVU 【引用】 CSS Regions Module Level1 , 除外 (Internet Explorer) n ·ͱΊ NJO NJO NJO NJO NJO NJO

Slide 6

Slide 6 text

͓࿩͢͠Δ͜ͱ n Կ͕Ͱ͖Δͷʁ n ࢖͑ͨΒศརʹͳΔ͜ͱɺ͜Ε·ͰͱมΘΔ͜ͱ n جຊతͳߟ͑ํͱ࢖͍ํ n ؆୯ͳσϞ n ৄ͘͠஌Γ͍ͨ৔߹ʹࢀߟʹͳΔ63-ͳͲ 6

Slide 7

Slide 7 text

"UUFOUJPO 7 n ΄ͱΜͲ͕ࡦఆதͷ࢓༷ͷઌߦ࣮૷ͷͨΊɺ ɹϕϯμʔϓϨϑΟοΫε͕ඞཁͰ͢ •  XFCLJU NP[ NTͱ͔ n ຊ೔͓͸ͳ͠͠ͳ͍͜ͱ •  ϓϩύςΟ΍࣮૷ํ๏ͷৄࡉ •  ϒϥ΢βؒͷ࣮૷ࠩͳͲ ͬͦ͘͞ ͠Α͏Λ ΈͯΈΑ͏

Slide 8

Slide 8 text

'MFYCPY ·͓͖͕͑௕͘ͳΓ·͕ͨ͠ʜͻͱͭΊͷ࢓༷

Slide 9

Slide 9 text

l'MFYCPYz͕Ͱ͖Δ͜ͱ ίϯςφ্ͰཁૉΛॎԣॊೈʹ഑ஔͰ͖Δʂ

Slide 10

Slide 10 text

ศརʹͳΔ͜ͱɹʙཁૉͷճΓࠐΈʙ ユニクロオンラインストア float: left;　 clear: both; float: left; clear: both; display: flex;　 display: flex;　 qPBUͷղআΛؾʹ͠ͳ͍͍ͯ͘ヽ(○´∀｀)ﾉ "GUFS #FGPS F

Slide 11

Slide 11 text

ศརʹͳΔ͜ͱɹʙՄม෯ʙ 11 "GUFS flex: 1;　 11 width: 33.33%; #FGPS F XJEUIͷ໘౗ͳܭࢉ΋͠ͳ͍͍ͯ͘ヽ(○´∀｀)ﾉ Yahoo! JAPAN

Slide 12

Slide 12 text

ศརʹͳΔ͜ͱ n ର৅ͷཁૉҎ֎ʹӨڹ͠ͳ͍ n ݻఆ෯ͱՄม෯ͷ੾Γସ͕͑؆୯ʹͰ͖Δ n ฒͼͷॱ൪Λ؆୯ʹมߋͰ͖Δ 12

Slide 13

Slide 13 text

جຊʹͳΔߟ͑ํ 13 'MFYίϯςφ 'MFYΞΠςϜ 'MFYΞΠςϜ 'MFYΞΠςϜ

Slide 14

Slide 14 text

%FNP 14 .flex-container { display: flex; }

n EJTQMBZqFY ˞ϥούʔͱͳΔཁૉʹࢦఆ CSS HTML

Slide 15

Slide 15 text

جຊʹͳΔߟ͑ํ 15 'MFYίϯςφ 'MFYΞΠςϜ 'MFYΞΠςϜ 'MFYΞΠςϜ 'MFYίϯςφ௚Լͷࢠཁૉ͸ ࣗಈతʹ'MFYΞΠςϜʹͳΔ 'MFYίϯςφ༻ɺ'MFYΞΠςϜ༻ͷϓϩύςΟ͕͋Δ

Slide 16

Slide 16 text

ϓϩύςΟҰཡ n ฒͼͷํ޲Λม͑ΔqFYEJSFDUJPO n ંΓฦ͢ॱΛܾΊΔqFYXSBQ n ฒͼॱΛมߋ͢ΔPSEFS n Մม෯ʹରԠ͢ΔqFY n ԣํ޲ͷدͤΛࢦఆ͢ΔKVTUJGZDPOUFOU n ॎํ޲ͷدͤΛࢦఆ͢ΔBMJHOJUFNT FUDʜ 16 σϞͰ ͔͘ʹΜ ͯ͠ΈΑ͏ɻ

Slide 17

Slide 17 text

࢖ΘΕ͍ͯΔྫ 17 qFYCPYద༻લ html5j(hFp://html5j.org/) a要素 display: flex; flex-‐direction: column; img要素 order: -‐1;

qFYCPYద༻ޙ ϨΠΞ΢τͱߏ଄Λ෼཭Ͱ͖Δ

Slide 18

Slide 18 text

΋ͬͱৄ͘͠ 18 ૲Ҋ ࠷ऴ૲Ҋ קࠂީิ קࠂҊ 8$קࠂ n CSS Flexible Box Layout Module n 過去の仕様に注意 •  CPY qFYCPY qFY •  *&だけqFYCPY仕様ʜ •  ﬂexboxの旧仕様、改定仕様、現行仕様の一覧 n  ベンダープレフィックス無しで動作する環境も n  CSS Flexbox Please!

Slide 19

Slide 19 text

3FHJPOT ిࢠॻ੶ͱ͔ࡶࢽϨΠΞ΢τʹ࢖͑ͦ͏

Slide 20

Slide 20 text

l3FHJPOTz͕Ͱ͖Δ͜ͱ ෳ਺ͷཁૉʹ·͕ͨͬͯ ίϯςϯπΛྲྀ͠ࠐΉ͜ͱ͕Ͱ͖Δ 【引用】 CSS Regions Module Level1

Slide 21

Slide 21 text

ศརʹͳΔ͜ͱ 21 Flipboard 代官山DAIKANYAMA T-‐SITE

Slide 22

Slide 22 text

ศརʹͳΔ͜ͱ 22 "GUFS #FGPS F JSでの処理をしなくてもいいヽ(○´∀｀)ﾉ Ͱ͝Γ͝Γॻ͔ͳ͍ͱ͍͚ͳ ͔ͬͨʜ·͡΍Γͨ͘ͳ͍ʢʆшʅʣ Ͱ͖ͳ͔ͬͨʂʂ •  ݩͱͳΔίϯςϯπͱදࣔΤϦΞΛ ༻ҙ͢Δ •  $44Λࢦఆ͢Δ

Slide 23

Slide 23 text

جຊʹͳΔߟ͑ํ 23 BCDʜ EJW EJW EJW + = ίϯςϯπͷத਎ ίϯςϯπΛදࣔ ͍ͤͨ͞ྖҬ BCDʜ ྲྀ͠ࠐ·ΕΔʂ

Slide 24

Slide 24 text

%FNP 24 n qPXJOUP qPXGSPN #source { -webkit-flow-into: sample; } .region { -webkit-flow-from: sample; 　}

むかしむかし、あるところに…

おじいさんは山へしばかれに…

ίϯςϯπͷத਎ͷఆٛ දࣔ͢ΔྖҬͷఆٛ ίϯςϯπͷத਎ͷఆٛɹ දࣔ͢ΔྖҬͷఆٛɹ ˞೚ҙͷ໊લ CSS HTML

Slide 25

Slide 25 text

جຊʹͳΔߟ͑ํ 25 BCDʜ EJW ϨΠΞ΢τͱίϯςϯπΛ੾Γ཭ͯ͠ߟ͑Δ EJW EJW + = ίϯςϯπͷத਎ ίϯςϯπΛදࣔ ͍ͤͨ͞ྖҬ BCDʜ ྲྀ͠ࠐ·ΕΔʂ

Slide 26

Slide 26 text

%FNP n  ͸Έग़͠෦෼ͷදࣔํ๏SFHJPOGSBHNFOU •  PWFSqPXϓϩύςΟͱಉ͡Α͏ͳಈ࡞ n  ಛఆͷྖҬʹελΠϧΛద༻͢ΔٖࣅཁૉSFHJPOT n  3FHJPOTBDPMMFDUJPOCZ"EPCF8FC1MBUGPSNr $PEF1FO 26 σϞͰ ͔͘ʹΜ ͯ͠ΈΑ͏ɻ

Slide 27

Slide 27 text

΋ͬͱৄ͘͠ 27 ࡞ۀ૲ߘ ࠷ऴ૲Ҋ קࠂީิ קࠂҊ 8$קࠂ n $443FHJPOT.PEVMF-FWFM n  $ISPNF *& J04.PCJMF4BGBSJで動く n  $ISPNFブラウザのDISPNFqBHTで「試験運用版のウェブプラットフォームの機能を有効にする」を0/にする n  領域 | レイアウト | Adobe & HTML n  J04が対応した $443FHJPOT4IBQFTによる文字レイアウトのサンプル Working Draft, WD Last Call WorkingDraft Candidate Recommendation, CR Proposed Recommendation, PR W3C Recommendation, REC

Slide 28

Slide 28 text

4IBQFT ࢛֯ܗ͔Βͷ୤٫ʂ

Slide 29

Slide 29 text

l4IBQFTz͕Ͱ͖Δ͜ͱ 29 γΣΠϓͷ಺ଆɺ֎ଆ΁ςΩετͷྲྀ͠ࠐΈ͕Ͱ͖Δ Magazin Layout by Ronel van Heerden

Slide 30

Slide 30 text

ศརʹͳΔ͜ͱ 30 画像・四角形からの脱却ヽ(○´∀｀)ﾉ Cooking with Shapes

Slide 31

Slide 31 text

جຊͷߟ͑ํ 31 BCDʜ + = float ճΓࠐΈΤϦΞͷܗঢ়Λఆٛ͢Δ

Slide 32

Slide 32 text

%FNP 32 .circle { float: left; -webkit-shape-outside: circle(100px,100px,100px); -webkit-shape-margin: 10px; }

ここの文章をまあるく回りこませてください…

n TIBQFPVUTJEF TIBQFNBSHJO CSS HTML

Slide 33

Slide 33 text

جຊͷߟ͑ํ 33 ճΓࠐΈΤϦΞͷܗঢ়Λఆٛ͢Δ ͜͜ɻ

Slide 34

Slide 34 text

%FNP n  ͞·͟·ͳܗঢ়ͷϓϩύςΟ n  ෳࡶͳܗঢ়΋ఆٛͰ͖Δ n  1PMZHPO%BXO n  /FWFSNPSF n  &YDMVTJPOTBOE4IBQFTBDPMMFDUJPOCZ"EPCF 8FC1MBUGPSN$PEF1FO 34 σϞͰ ͔͘ʹΜ ͯ͠ΈΑ͏ɻ

Slide 35

Slide 35 text

΋ͬͱৄ͘͠ 35 ࡞ۀ૲ߘ ࠷ऴ૲Ҋ קࠂީิ קࠂҊ 8$קࠂ Working Draft, WD Last Call WorkingDraft Candidate Recommendation, CR Proposed Recommendation, PR W3C Recommendation, REC n  ʲ仕様ʳ$444IBQFT.PEVMF-FWFM n  $ISPNF J04.PCJMF4BGBSJで動く n  $ISPNFブラウザはDISPNFqBHTで「試験運用版のウェブプラットフォームの機能を有効にする」を0/にする n  シェイプの中への流し込みの仕様は　 $444IBQFT.PEVMF-FWFM　に延期された n  シェイプ cレイアウト c"EPCF)5.- n  $444IBQFTUIFGVUVSFPGUIFXFC

Slide 36

Slide 36 text

.VMUJDPMVNO-BZPVU ࡶࢽͷΑ͏ͳϨΠΞ΢τ͕8ͰͰ͖Δʂ

Slide 37

Slide 37 text

l.VMUJDPMVNO-BZPVUz͕Ͱ͖Δ͜ͱ ஈ૊ΈϨΠΞ΢τ͕ՄೳʹͳΔ

Slide 38

Slide 38 text

ศརʹͳΔ͜ͱ 38 n 3FHJPOTͱಉ͡ྲྀ͠ࠐΈͷ໰୊ʴ 雑誌のようなレイアウトができるヽ(○´∀｀)ﾉ nicoスライム 2012 autumn and winter CSS 3 の段組みとその使いどころ

Slide 39

Slide 39 text

%FNP 39 .column { 　　　　column-count:2; }

むかしむかし、あるところに…

おじいさんは山へしばかれに…

n DPMVNODPVOU n DPMVNOXJEUI .column { column-width: 250px; column-gap: 50px; }

むかしむかし、あるところに…

おじいさんは山へしばかれに…

ஈͷ෯Λࢦఆ͢Δ ΧϥϜ਺Λࢦఆ͢Δ CSS HTML CSS HTML

Slide 40

Slide 40 text

΋ͬͱৄ͘͠ 40 ࡞ۀ૲ߘ ࠷ऴ૲Ҋ קࠂީิ קࠂҊ 8$קࠂ n  ʲ仕様ʳ$44.VMUJDPMVNO-BZPVU.PEVMF n  ʲ対応状況ʳ$BO*VTF$44.VMUJQMFDPMVNOMBZPVU n  MDN : CSS マルチカラムレイアウトの利用 n  CSS3 MULTI COLUMN •  カラム数などを入力して確認することができるデモサイト Working Draft, WD Last Call WorkingDraft Candidate Recommendation, CR Proposed Recommendation, PR W3C Recommendation, REC

Slide 41

Slide 41 text

(SJE-BZPVUˍ &YDMVTJPOT ΄͔ʹ΋͜Μͳͷ͕͋Γ·͢

Slide 42

Slide 42 text

(SJE-BZPVU 42 ཁૉΛάϦουঢ়ʹ ഑ஔͰ͖Δ࢓༷ 【引用】CSS グリッドを使ってアダプティブレイアウトを作成する方法 $44(SJE-BZPVU.PEVMF -FWFM n  ϓϩύςΟΛ࢖ͬͯྻͱߦΛઃఆ͢Δ n  ·͞ʹςʔϒϧϨΠΞ΢τʂ n  *&ͷΈ $BO*VTF$44(SJE-BZPVU •  <ࢀߟ>άϦουϨΠΞ΢τ *OUFSOFU&YQMPSFS .myGrid { 　　　　display: grid; }

Slide 43

Slide 43 text

n  ཁૉͷ൓ରଆʹ΋ϑϩʔͤ͞Δ͜ͱ͕Ͱ͖Δ n  ৘ใ΋গͳ͘ɺมߋ΋ଟ͍·ͩ·ͩͷ࢓༷ •  )5.-ͱ$44ͰϦονͳϖʔδϨΠΞ΢τΛ࣮ݱ͢Δ "EPCF •  আ֎ *OUFSOFU&YQMPSFS •  "EPCF)5.-ɿআ֎ྖҬͱγΣΠϓ $44&YDMVTJPOT.PEVMF -FWFM &YDMVTJPOT 43 ཁૉΛғΉΑ͏ʹ ςΩετΛંΓฦ͢࢓༷ 【引用】除外 (Internet Explorer) .myExclusions { 　　　　wrap-flow: both; }

Slide 44

Slide 44 text

·ͱΊ ࣅͨΑ͏ͳͷ͕ͨ͘͞Μग़͖ͯͯ΍΍͘͜͠ͳ͖ͬͯ·͕ͨ͠ʜ

Slide 45

Slide 45 text

৽͍͠$44ͷ࢓༷ 45 n &YDMVTJPOT n 4IBQFT n 'MFYCPY n 3FHJPOT n .VMUJDPMVNO n (SJE-BZPVU 'MPBUͷΑ͏ͳཁૉͷճΓࠐΈ ΍ɺՄม෯ͳϘοΫεʹ ෳ਺ͷཁૉʹ·͕ͨͬͯίϯ ςϯπΛྲྀ͠ࠐΈ͍ͨͱ͖ʹ γΣΠϓͷ಺֎ʹςΩετΛ ྲྀ͠ࠐΈ͍ͨͱ͖ʹ ࡶࢽͷΑ͏ͳஈ૊ϨΠΞ΢τ Λ͍ͨ͠ͱ͖ʹ ཁૉΛάϦου্ʹ഑ஔ͠ ͍ͨͱ͖ʹ ཁૉΛғΉΑ͏ʹςΩε τΛંΓฦ͢ͱ͖ʹ 【引用】 CSS Regions Module Level1 , 除外 (Internet Explorer)

Slide 46

Slide 46 text

·ͱΊ n  ͜Ε·ͰͷϨΠΞ΢τ͕ΑΓ؆୯ʹʂ n  ෳࡶͳϨΠΞ΢τ͕$44ͰͰ͖Δʂ n  Ͱ΋࣮༻ʹ͸΋͏͔͔͢͜͠Γͦ͏ͳ΋ͷ΋ n  ௐ΂Δࡍʹ஫ҙ͍ͨ͜͠ͱ •  8PSLJOH%SBGU͸࢓༷͕͜Ζ͜ΖมΘΔͷͰ஫ҙ •  ৽چͲͪΒͷϓϩύςΟ͕࣮૷͞ΕͯΔ͔ •  ͳΔ΂͘೔෇ͷ৽͍͠هࣄΛಡΉ 46 ͔ΜͨΜʹͳΔͱ ϏΪφʔʹ΋͏Ε͍͠ !! Θͨ͠΋Ͱ͖Δ͔΋ !

Slide 47

Slide 47 text

Thank you so much :) Special thanksɹ@ChisaMi ৽͍͠CSSͷ࢓༷Λ ৭ʑௐ΂ͯΈͨ 第3回HTML5ビギナーズ！ 2013/10/23 @hiromitsuuuuu