Suche senden
Hochladen
FLEXBOX-MEN: Apocalypse
•
0 gefällt mir
•
594 views
Fuminori Mori
Folgen
2016-06-11開催のHTML Party かごんま 2016で行ったセッション「FLEXBOX-MEN: Apocalypse」のスライド。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 71
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
concrete5 多言語サイト制作へのお誘い
concrete5 多言語サイト制作へのお誘い
Katz Ueno
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
Katz Ueno
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
Hishikawa Takuro
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
Katz Ueno
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
Katz Ueno
これからはじめるConcrete5
これからはじめるConcrete5
武彦 大山
concrete5って何?〜Web制作者対象〜2014年版
concrete5って何?〜Web制作者対象〜2014年版
Hishikawa Takuro
Concrete5を簡単・安心に使おう
Concrete5を簡単・安心に使おう
武彦 大山
Empfohlen
concrete5 多言語サイト制作へのお誘い
concrete5 多言語サイト制作へのお誘い
Katz Ueno
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
Katz Ueno
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
Hishikawa Takuro
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
Katz Ueno
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
Katz Ueno
これからはじめるConcrete5
これからはじめるConcrete5
武彦 大山
concrete5って何?〜Web制作者対象〜2014年版
concrete5って何?〜Web制作者対象〜2014年版
Hishikawa Takuro
Concrete5を簡単・安心に使おう
Concrete5を簡単・安心に使おう
武彦 大山
concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!
Katz Ueno
CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5
Katz Ueno
concrete5セミナー資料公開版
concrete5セミナー資料公開版
Hishikawa Takuro
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
de:code 2017
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Yoshito Tabuchi
マスコットアプリ─ キャラアプリ─ 開発 with Xamarin
マスコットアプリ─ キャラアプリ─ 開発 with Xamarin
jz5 MATSUE
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
Hishikawa Takuro
第3回concrete5初心者勉強会
第3回concrete5初心者勉強会
武彦 大山
concrete5で社内システムのお話し
concrete5で社内システムのお話し
Tao Sasaki
#VSUG LT #JXUG の紹介
#VSUG LT #JXUG の紹介
Yoshito Tabuchi
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
Yoshito Tabuchi
WordPressカスタム三兄弟、concrete5ならこう作る。
WordPressカスタム三兄弟、concrete5ならこう作る。
ねこみみ 隊長
PHPカンファレンス関西2014 「全てを結ぶ力」
PHPカンファレンス関西2014 「全てを結ぶ力」
Akihito Koriyama
concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成
Toshiaki Endo
10分でわかる無料になったXamarin
10分でわかる無料になったXamarin
Yoshito Tabuchi
JXUGC #9 Xamarin.Forms Mvvm Teachathon
JXUGC #9 Xamarin.Forms Mvvm Teachathon
Yoshito Tabuchi
concrete5 バージョン5.7のご紹介
concrete5 バージョン5.7のご紹介
Hishikawa Takuro
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Weitere ähnliche Inhalte
Was ist angesagt?
concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!
Katz Ueno
CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5
Katz Ueno
concrete5セミナー資料公開版
concrete5セミナー資料公開版
Hishikawa Takuro
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
de:code 2017
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Yoshito Tabuchi
マスコットアプリ─ キャラアプリ─ 開発 with Xamarin
マスコットアプリ─ キャラアプリ─ 開発 with Xamarin
jz5 MATSUE
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
Hishikawa Takuro
第3回concrete5初心者勉強会
第3回concrete5初心者勉強会
武彦 大山
concrete5で社内システムのお話し
concrete5で社内システムのお話し
Tao Sasaki
#VSUG LT #JXUG の紹介
#VSUG LT #JXUG の紹介
Yoshito Tabuchi
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
Yoshito Tabuchi
WordPressカスタム三兄弟、concrete5ならこう作る。
WordPressカスタム三兄弟、concrete5ならこう作る。
ねこみみ 隊長
PHPカンファレンス関西2014 「全てを結ぶ力」
PHPカンファレンス関西2014 「全てを結ぶ力」
Akihito Koriyama
concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成
Toshiaki Endo
10分でわかる無料になったXamarin
10分でわかる無料になったXamarin
Yoshito Tabuchi
JXUGC #9 Xamarin.Forms Mvvm Teachathon
JXUGC #9 Xamarin.Forms Mvvm Teachathon
Yoshito Tabuchi
concrete5 バージョン5.7のご紹介
concrete5 バージョン5.7のご紹介
Hishikawa Takuro
Was ist angesagt?
(17)
concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!
CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5
concrete5セミナー資料公開版
concrete5セミナー資料公開版
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
マスコットアプリ─ キャラアプリ─ 開発 with Xamarin
マスコットアプリ─ キャラアプリ─ 開発 with Xamarin
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
はじめての concrete5 でウェブサイト作成〜入門チュートリアルガイド
第3回concrete5初心者勉強会
第3回concrete5初心者勉強会
concrete5で社内システムのお話し
concrete5で社内システムのお話し
#VSUG LT #JXUG の紹介
#VSUG LT #JXUG の紹介
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
WordPressカスタム三兄弟、concrete5ならこう作る。
WordPressカスタム三兄弟、concrete5ならこう作る。
PHPカンファレンス関西2014 「全てを結ぶ力」
PHPカンファレンス関西2014 「全てを結ぶ力」
concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成
10分でわかる無料になったXamarin
10分でわかる無料になったXamarin
JXUGC #9 Xamarin.Forms Mvvm Teachathon
JXUGC #9 Xamarin.Forms Mvvm Teachathon
concrete5 バージョン5.7のご紹介
concrete5 バージョン5.7のご紹介
Kürzlich hochgeladen
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
Kürzlich hochgeladen
(8)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FLEXBOX-MEN: Apocalypse
1.
FLEXBOX-MEN: Apocalypse ∼display: flex で 柔軟にレイアウトしよう!∼ @HTML
Party かごんま 2016 コーディングデザイン 森 史憲 1 © Coding Design, 2016
2.
目次 • 自己紹介 • FLEXBOX-MEN:
Apocalypse • レイアウト方法の比較 • 便利ポイント • Flexbox • 地雷ポイント • フレームワーク • まとめ 2 © Coding Design, 2016
3.
自己紹介 3 © Coding
Design, 2016
4.
自己紹介(1/3) • 名前 森 史憲 (もり ふみのり) • 生年月日 昭和51年6月9日 •
出身・現住所 鹿児島県鹿児島市 • 容姿 丸メガネ 4 © Coding Design, 2016
5.
自己紹介(2/3) • Webサイト制作 • Web関連技術講師 •
Web関連書籍執筆 • イベント運営 5 © Coding Design, 2016
6.
自己紹介(3/3) • カレーLOVE!! ⭐カレー屋 匠 #匠盛 •
ビールLOVE!! ⭐城山観光ホテル #スタウトエール黒糖 • チョコレートLOVE!! ⭐パティスリーヤナギムラ # 摩チョコチップス 6 © Coding Design, 2016
7.
Webのレイアウトは 悩ましい 7 © Coding
Design, 2016
8.
怪獣のように 暴れまくる 8 © Coding
Design, 2016
9.
果たして攻略できる日 は来るのか… 9 © Coding
Design, 2016
10.
10 © Coding
Design, 2016
11.
FLEXBOX-MEN: Apocalypse 11 © Coding
Design, 2016
12.
FLEXBOX-MEN: Apocalypse Webのレイアウトはひと筋縄ではいかない! そう、あいつは大怪獣… Webzilla!! 12 ©
Coding Design, 2016
13.
FLEXBOX-MEN: Apocalypse レイアウト方法の比較 13 ©
Coding Design, 2016
14.
FLEXBOX-MEN: Apocalypse >
レイアウト方法の比較 Webzilla を攻略する 様々なレイアウト方法 が使われた! 14 © Coding Design, 2016
15.
FLEXBOX-MEN: Apocalypse >
レイアウト方法の比較 1. table 2. float 3. inline-block 4. position 15 © Coding Design, 2016
16.
FLEXBOX-MEN: Apocalypse >
レイアウト方法の比較 どれも帯に短したすき に長し… 16 © Coding Design, 2016
17.
うーむ、Webzillaは 手強い! 17 © Coding
Design, 2016
18.
助けて! FLEXBOX-MEN! 18 © Coding
Design, 2016
19.
19 © Coding
Design, 2016
20.
呼んだかい! 20 © Coding
Design, 2016
21.
Flexboxを使って 21 © Coding
Design, 2016
22.
一緒に攻略しよう 22 © Coding
Design, 2016
23.
ぜっ23 © Coding
Design, 2016
24.
FLEXBOX-MEN: Apocalypse 便利ポイント 24 ©
Coding Design, 2016
25.
FLEXBOX-MEN: Apocalypse >
便利ポイント Flexboxの便利ポイントと 実際の使い方を見ていこう! 25 © Coding Design, 2016
26.
FLEXBOX-MEN: Apocalypse >
便利ポイント • HTMLが荒れない • 上下真ん中寄せができる • 要素の並べ替えができる • 要素の改行時に 間ができない • スクロールバーが表示される 26 © Coding Design, 2016
27.
FLEXBOX-MEN: Apocalypse >
便利ポイント これまでの問題が一挙に解決! では使い方を見てみよう! 27 © Coding Design, 2016
28.
FLEXBOX-MEN: Apocalypse Flexbox 28 ©
Coding Design, 2016
29.
FLEXBOX-MEN: Apocalypse >
Flexbox Flexboxの基本 29 © Coding Design, 2016
30.
FLEXBOX-MEN: Apocalypse >
Flexbox Flexboxの基本 Flexboxは親要素と子要素が必要だ! <div class="container"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> </div> 30 © Coding Design, 2016
31.
FLEXBOX-MEN: Apocalypse >
Flexbox Flexboxの基本 display: flex; で親要素にFlexboxを設定する! .container { display: flex; } 31 © Coding Design, 2016
32.
FLEXBOX-MEN: Apocalypse >
Flexbox Flexboxの基本 flex-direction で子要素のレイアウトを制御できるぞ! 値は row, row-reverse, column, column-reverse だ! .container { display: flex; flex-direction: column-reverse; } 32 © Coding Design, 2016
33.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素の水平方向の え 33 © Coding Design, 2016
34.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素の水平方向の え justify-content で子要素の水平方向の えを制御できるわ! 値は flex-start, flex-end, center, space-between, space-around よ! .container { display: flex; justify-content: center; } 34 © Coding Design, 2016
35.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素の垂直方向の え 35 © Coding Design, 2016
36.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素の垂直方向の え align-items で子要素の垂直方向の えを制御できるっちよ! 値は flex-start, flex-end, center, baseline, stretch じゃっど! .container { display: flex; align-items: center; } 36 © Coding Design, 2016
37.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素の折返し 37 © Coding Design, 2016
38.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素の折返し flex-wrap で子要素の折り返しを制御できるぜ! 値は nowrap, wrap, wrap-reverse だべ! .container { display: flex; flex-wrap: wrap-reverse; } 38 © Coding Design, 2016
39.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素が縦に 複数並んだ時の え 39 © Coding Design, 2016
40.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素が縦に複数並んだ時の え align-content で子要素が縦に複数並んだ時の えを制御できる! 値は flex-start, flex-end, center, space-between, space-around を使い やんせ! .container { display: flex; align-content: flex-end; } 40 © Coding Design, 2016
41.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素ごとに指定 41 © Coding Design, 2016
42.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素ごとに指定 flex-basis で個別の子要素の最小幅を制御できったっど! 値は widthプロパティに指定するような値 やっでな! .item:nth-child(2) { flex-basis: 200px; } 42 © Coding Design, 2016
43.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素ごとに指定 align-self で個別の子要素の垂直方向の えを制御できっち! 値は flex-start, flex-end, center, baseline, stretch を入れもんそ! .item:nth-child(2) { align-self: flex-end; } 43 © Coding Design, 2016
44.
FLEXBOX-MEN: Apocalypse >
Flexbox 子要素ごとに指定 order で個別の子要素の順番を制御できるぞ!たまがっが! 値は 数値 じゃっど! .item:nth-child(2) { order: -1; } 44 © Coding Design, 2016
45.
FLEXBOX-MEN: Apocalypse 地雷ポイント 45 ©
Coding Design, 2016
46.
FLEXBOX-MEN: Apocalypse 地雷ポイント 実はまだ危ういところがあるFlexbox! 少しだけ抜粋してみた! 46 ©
Coding Design, 2016
47.
FLEXBOX-MEN: Apocalypse >
地雷ポイント ブラウザサポート • Can I use - Flexible Box Layout Module http://caniuse.com/#feat=flexbox 47 © Coding Design, 2016
48.
48 © Coding
Design, 2016
49.
FLEXBOX-MEN: Apocalypse >
地雷ポイント ブラウザサポート • IEは10以上サポート • 対策: IE9以下はfloatでレイアウトするか、 flexibility.js を使 うか、サポート外にするか • 森はflexibility.js未使用。おすすめはしません 49 © Coding Design, 2016
50.
FLEXBOX-MEN: Apocalypse >
地雷ポイント ブラウザサポート • Android4.3以前は古い仕様での実装 • 例)Android4.4以降 display: flex; → Android4.3以前 display: -webkit-box; • 対策: Sass flexbox mixin を使うか、サポート外にするか 50 © Coding Design, 2016
51.
FLEXBOX-MEN: Apocalypse >
地雷ポイント バグ • IE10, IE11 • 親要素にmin-heightを指定するとalign-itemsが効かない • 対策: 親要素のさらに親要素にdisplay: flex; flex-direction: column;を設定 51 © Coding Design, 2016
52.
FLEXBOX-MEN: Apocalypse >
地雷ポイント バグ • IE10, IE11 • 子要素にflex-basisを設定しないと長い文章を折り返さない • 対策: 幅に合わせて子要素にflex-basisとmax-widthを設定 • max-widthを指定するのはbox-sizing: border-box;に対応させる ため 52 © Coding Design, 2016
53.
FLEXBOX-MEN: Apocalypse >
地雷ポイント バグ • IE10, IE11 • 子要素にimg要素を入れると画像の縦横比が崩れる • 対策: 子要素はdiv要素などを入れ、その中にimg要素を入れ る 53 © Coding Design, 2016
54.
FLEXBOX-MEN: Apocalypse >
地雷ポイント バグ 詳しくは Flexbugs をチェック!主にIE10, 11が多い! バグ・解決策のデモがあるよ! • Flexbugs 54 © Coding Design, 2016
55.
FLEXBOX-MEN: Apocalypse >
地雷ポイント JavaScriptでの操作 • flex-directionやorderで順番を変えてもDOMの順番は変わってい ない • CSSで順番を変える前のHTMLがベースに念頭に置く。 55 © Coding Design, 2016
56.
flex-direction flex-wrap justify-content align-items flex-basis… 56 © Coding
Design, 2016
57.
ブラウザサポート バグ JavaScriptの対応… 57 © Coding
Design, 2016
58.
ああ、もう頭がいっぱ いだぁぁぁ!!!! 58 © Coding
Design, 2016
59.
ぴんぽーん 59 © Coding
Design, 2016
60.
そんなあなたに朗報。 60 © Coding
Design, 2016
61.
FLEXBOX-MEN: Apocalypse フレームワーク 61 ©
Coding Design, 2016
62.
FLEXBOX-MEN: Apocalypse フレームワーク こんにちは。長官です。 バグ対策もされてたりするので、フレームワークを使おうね! 62 ©
Coding Design, 2016
63.
FLEXBOX-MEN: Apocalypse >
フレームワーク • Flexboxの自由に使いたい人向け • Sass flexbox mixin • Autoprefixer • 既存のFlexboxグリッドを使いたい人向け(CSS) • Flexbox Grid • Flexboxグリッドをカスタマイズして使いたい人向け(Sass) • Flexbox Grid Sass 63 © Coding Design, 2016
64.
まとめ 64 © Coding
Design, 2016
65.
Flexboxは レイアウトするのに すごーく便利!65 © Coding
Design, 2016
66.
ただし、 対象ブラウザには注意! 66 © Coding
Design, 2016
67.
ブラウザごと(主にIE10,11)の バグにも注意! 67 © Coding
Design, 2016
68.
さあ最後の対決だ! Webzillaを動かして 洞窟に入れよう! 68 © Coding
Design, 2016
69.
ありがとう!君の活躍で 世界は救われたよ! 69 © Coding
Design, 2016
70.
これからもFlexboxを使 って世界を救ってね! 70 © Coding
Design, 2016
71.
ご清聴ありがとう ございましたッッ! 71 © Coding
Design, 2016
Jetzt herunterladen