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

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

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

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

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

"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

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

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

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

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

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

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

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

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

%FNP 14 .flex-container { display: flex; } <div class="flex-container"> <div>1</div>
<div>2</div> <div>3</div> </div> n EJTQMBZqFY ˞ϥούʔͱͳΔཁૉʹࢦఆ CSS HTML

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

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

࢖ΘΕ͍ͯΔྫ 17 qFYCPYద༻લ html5j(hFp://html5j.org/) a要素 display: flex;
flex-‐direction: column; img要素 order: -‐1; <section> <a> <h4></h4> <img> </a> <p></p> </section> qFYCPYద༻ޙ ϨΠΞ΢τͱߏ଄Λ෼཭Ͱ͖Δ

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

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

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

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

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

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

%FNP 24 n qPXJOUP qPXGSPN #source { -webkit-flow-into: sample; } .region
{ -webkit-flow-from: sample; 　} <div id="source"> <p>むかしむかし、あるところに…</p> 　 <p>おじいさんは山へしばかれに…</p> </div> <article> <p class="region"></p> <p class="region"></p> </article> ίϯςϯπͷத਎ͷఆٛ දࣔ͢ΔྖҬͷఆٛ ίϯςϯπͷத਎ͷఆٛɹ දࣔ͢ΔྖҬͷఆٛɹ ˞೚ҙͷ໊લ CSS HTML

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

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

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

4IBQFT ࢛֯ܗ͔Βͷ୤٫ʂ

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

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

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

%FNP 32 .circle { float: left; -webkit-shape-outside: circle(100px,100px,100px); -webkit-shape-margin: 10px;
} <div> <div class='circle'></div> <p>ここの文章をまあるく回りこませてください…</p> </div> n TIBQFPVUTJEF TIBQFNBSHJO CSS HTML

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

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

΋ͬͱৄ͘͠ 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

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

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

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

%FNP 39 .column { 　　　　column-count:2; } <div class="column"> <p>むかしむかし、あるところに…</p> 　
<p>おじいさんは山へしばかれに…</p> </div> n DPMVNODPVOU n DPMVNOXJEUI .column { column-width: 250px; column-gap: 50px; } <div class="column"> <p>むかしむかし、あるところに…</p> 　 <p>おじいさんは山へしばかれに…</p> </div> ஈͷ෯Λࢦఆ͢Δ ΧϥϜ਺Λࢦఆ͢Δ CSS HTML CSS HTML

΋ͬͱৄ͘͠ 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

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

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

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

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

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

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

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

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

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

More Decks by Hiromi Morikawa

Other Decks in Technology

Featured

Transcript