テーマ作成で困らないためのイマドキ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）

http://screensiz.es/phone

『横幅を柔軟にする』方法いろいろ

•色々あるけど・・・

•レスポンシブレイアウトはその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: ページネーション

http://codepen.io/wonders_y/pen/GLvxE

例2: 3カラムの高さ揃え

http://codepen.io/wonders_y/pen/vrcLthttp://codepen.io/wonders_y/pen/tpdhk （対応前）

例3: WYSIWYGエディタの出力HTML•シンプルなHTMLでないと

成り立たない部分（例：自由入力）

•CSS Selector を知ることでより適切なスタイルをあてる

http://codepen.io/wonders_y/pen/DxJfv

今が再学習のチャンス！

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