View
633
Download
2
Category
Preview:
DESCRIPTION
2014/08/30 WordFes Nagoya 2014
Citation preview
テーマ作成で困らないためのイマドキHTML 再入門
株式会社ワンダーズ 山田 悠矢
自己紹介
•株式会社ワンダーズ 取締役（たくさん居ます）
• http://wonders.jp
•フロントエンドエンジニア
•最近、請求書を送って実際にお金に変わるのが快感になりつつあります
という勉強会
本日こんなことをお話ししたいと思っています。
本日こんなことをお話ししたいと思っています。
テーマ作るときのHTML / CSS の知識が、5年10年前から変わってなくて、最近正直ついていけてない
本日こんなことをお話ししたいと思っています。
テーマ作るときのHTML / CSS の知識が、5年10年前から変わってなくて、最近正直ついていけてない
Sass ってなんだよー、使わないとこれからはダメなの？
本日こんなことをお話ししたいと思っています。
テーマ作るときのHTML / CSS の知識が、5年10年前から変わってなくて、最近正直ついていけてない
Sass ってなんだよー、使わないとこれからはダメなの？
レスポンシブレイアウトってなんだよー意味分かんないよー
本日こんなことをお話ししたいと思っています。
5年・10年前 今現在
本日こんなことをお話ししたいと思っています。
5年・10年前 今現在
なぜそうなった？ を押さえる！
というわけでここから本編です！
• 数年間のフロントエンドの変化3つ
• 3つの変化を乗りこなす！
• まとめ・アウトプットのススメ
目次
数年間のフロントエンドの変化3つ
数年間のフロントエンドの変化3つ
1. 『スクリーンサイズ』の変化
数年間のフロントエンドの変化3つ
1. 『スクリーンサイズ』の変化
2. 『制作工程』の変化
数年間のフロントエンドの変化3つ
1. 『スクリーンサイズ』の変化
2. 『制作工程』の変化
3. 『対応ブラウザ』の変化
『スクリーンサイズ』の変化
『スクリーンサイズ』の変化
•viewport ってそもそも何だ？
『スクリーンサイズ』の変化
•viewport ってそもそも何だ？
•→ 表示の比率をコントロールするもの
viewport 再入門
950px
当然これも 950px
こっちのが そのまま押しやすい
こっちのが そのまま押しやすい
こっちのが そのまま押しやすい
これは 320px？
viewport 再入門
viewport 再入門
•今まで横幅は固定で比率変えましょう
viewport 再入門
•今まで横幅は固定で比率変えましょう
•これから比率は一定で、横幅変えましょう
比率一定とは？
○
比率一定とは？×
比率一定で、横幅変えましょう
•スクリーンサイズ（特に横幅）の変化につながる
•横幅の変化に柔軟な作りが求められてきている
viewportもう一歩踏み込み
viewportもう一歩踏み込み
•width=device-width とは？
viewportもう一歩踏み込み
•width=device-width とは？
•ディスプレイの表示可能ピクセル数とは違うよ？
viewportもう一歩踏み込み
•width=device-width とは？
•ディスプレイの表示可能ピクセル数とは違うよ？
•http://screensiz.es/phone
viewportもう一歩踏み込み
•width=device-width とは？
•ディスプレイの表示可能ピクセル数とは違うよ？
•http://screensiz.es/phone
•アップデートでも変わりうる（例：Nexus7: 603px -> 600px）
『横幅を柔軟にする』方法いろいろ
•色々あるけど・・・
•レスポンシブレイアウトはその1つ
• レスポンシブレイアウトは難しい
•リキッドレイアウトだってその1つ
数年間のフロントエンドの変化
1. 『スクリーンサイズ』
2. 『制作工程』の変化
3. 『対応ブラウザ』
"効率化による"『制作工程』の変化
"効率化による"『制作工程』の変化
•書いたものがそのまま表示される（当たり前
"効率化による"『制作工程』の変化
•書いたものがそのまま表示される（当たり前
•そうではないものを扱う業界も当然ある
"効率化による"『制作工程』の変化
•書いたものがそのまま表示される（当たり前
•そうではないものを扱う業界も当然ある
•変換して実行できる形式にする→ ビルド
ビルド？
ビルド
ビルド
•例）ビルドツールとしてのDreamweaver
ビルド
•例）ビルドツールとしてのDreamweaver
•例）Retina 用の縦横2倍サイズの背景画像
ビルド工程の変換例変換前 変換後
Markdown HTML
HAML HTML
Sass (with compass, bourbon) CSS
LESS CSS
Stylus CSS
CoffeeScript JavaScript
TypeScript JavaScript
JSX JavaScript
もっと具体的な例
デメリットもあるよ
•学習コストup!
•属人化の闇・・・
数年間のフロントエンドの変化
1. 『スクリーンサイズ』
2. 『制作工程』
3. 『対応ブラウザ』の変化
『対応ブラウザ』の変化
『対応ブラウザ』の変化
IE11,Chrome
『対応ブラウザ』の変化
IE11,Chrome
IE8,9,10
サポートが減ることによるメリット1. 単純に確認する手間の軽減
2. Web 標準に沿ってない対応ブラウザが減ることによる効率化
例1: ページネーション
例2: 3カラムの高さ揃え
http://codepen.io/wonders_y/pen/vrcLthttp://codepen.io/wonders_y/pen/tpdhk （対応前）
例3: WYSIWYGエディタの出力HTML•シンプルなHTMLでないと
成り立たない部分（例：自由入力）
•CSS Selector を知ることでより適切なスタイルをあてる
今が再学習のチャンス！
5年10年前
ちょっと前
最近
出来るブラウザ出来ないブラウザ
3つの変化を乗りこなす！
1. 『スクリーンサイズ』の変化
2. 『制作工程』の変化
3. 『対応ブラウザ』の変化
『スクリーンサイズ』の変化を 乗りこなす！•問題となってくるのは、
"横幅" に依存した要素
•表
•画像 など
『制作工程』の変化を乗りこなす！
•携わる人同士でちゃんと相談しよう
•目安はGUIツールの有無？
•ぜひともローカルで動作する開発環境を！
•XAMPP, MAMP などのローカルでWebサーバが動作するもの
『対応ブラウザ』の変化を 乗りこなす！•対応ブラウザを検討するうえで、
シェアは大事な検討要素
•当たり前のことですが、対応ブラウザはしっかり決めましょう（当然スマートフォンのOS、ブラウザまでしっかりと）
まとめ
必要以上に焦る必要はない
必要かどうか判断する知識を最低限持つ
必要かどうか判断する知識を最低限持つ
•知らないと取捨選択すら出来ない
必要かどうか判断する知識を最低限持つ
•知らないと取捨選択すら出来ない
•アンテナは少し大きめに張っておこう
アウトプットのススメ
アウトプットのススメ
•実際にアウトプットしてみよう！
アウトプットのススメ
•実際にアウトプットしてみよう！
•聞くだけで済ませるのはもったいない
アウトプットのススメ
•実際にアウトプットしてみよう！
•聞くだけで済ませるのはもったいない
とかで喋ってみたらいいじゃないですかー （新人教育に最適！）
ご清聴ありがとうございました！
参考URL
• http://www.w3.org/TR/css-device-adapt/
• http://screensiz.es/phone
• http://ebisu.com/note/nexus7-density/
• http://kidachi.kazuhi.to/blog/archives/037734.html
• http://sass-lang.com/
• http://compass-style.org/
• http://gs.statcounter.com/#desktop-browser_version_partially_combined-JP-monthly-201307-201407
• http://www.w3.org/TR/css3-selectors/
• http://uupaa.hatenablog.com/entry/2012/03/06/204911
• http://blogs.msdn.com/b/ie/archive/2014/08/07/stay-up-to-date-with-internet-explorer.aspx
• http://www.pakutaso.com
Recommended