2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！」での講演資料です。

1. 困った時のDevToolsの使い⽅方
2016/5/24
第14回 HTML5ビギナーズ
Toru Yoshikawa (@yoshikawa_̲t)

2. Who?
株式会社オープンウェブ・テクノロジー
CXO／Techfeed （techfeed.io）
html5j 代表、Google Developer Experts
(Chrome)、HTML5 Experts.jp 副編集⻑⾧長兼
エキスパート
html5j ビギナー部（副部⻑⾧長）／Web先端技
術味⾒見見部 (顧問)／⽇日本jQuery Mobileユー
ザー会 (管理理⼈人)／Sublime Text 2 Japan
Users Group (管理理⼈人)などなど
Blog: http://d.hatena.ne.jp/pikotea/
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t

3. エンジニア向け情報キュレーションサービス
「 TechFeed」を運営してます！
techfeed.io

4. Chrome DevTools
使ってますか？

5. 詳しいDevToolsの
使い⽅方はこちら
Chrome DevTools for beginners
http://www.slideshare.net/yoshikawa_̲t/
devtools-‐‑‒beginner
Chrome Developer Toolsを使いこなそう！
http://www.slideshare.net/yoshikawa_̲t/
chrome-‐‑‒developer-‐‑‒tools-‐‑‒17787728
公式 Chrome DevTools
https://developers.google.com/web/tools/
chrome-‐‑‒devtools/
DevToolsは開発が活発なので⾒見見た⽬目や機能ががらっ
と変わることがあるので頑張って読み替える必要が
あるかも？

6. この要素って
どうなってるの？
要素を⾒見見つけよう
ページから要素を選択する
タグから要素を選択して表⽰示する
コードから要素を表⽰示する

7. この要素って
どうなってるの？
スタイルを確認して調整する
ボックスモデル（Metrics）
最終的に適⽤用済みのスタイル（Computed）
⾊色指定（Color picker）
状態指定（Force Element state）
⼀一時的に要素を⾮非表⽰示（Hide Element）

8. ユースケースを考えて⾒見見る
この⽂文字サイズってどこで定義されてるの？
スタイル、効いてなくない？
なんかマージンの⼤大きさが合わないんだけど…
この要素どこいったの！？

9. 要素が隠れる要因になる
主なスタイル
display: none | block |
inline | inline-‐‑‒block | flex
☆☆☆
margin
padding
visibility: hidden ☆☆
float ☆☆☆
position ☆☆☆
z-‐‑‒index ☆☆
overflow ☆
opacity ☆
height
width
transform
zoom
text-‐‑‒indent

10. このアニメーションって
どうなってるの？
タイムラインを⾒見見てみよう
再⽣生／シーク
スピード調整
アニメーションをカスタマイズ

11. モバイルで⾒見見た⽬目は
どうなる？
デバイスモードを使おう
ユーザーエージェント指定
ネットワークスピードを選択
リモートデバッグ（chrome://inspect）
スクリーンキャスト

12. おまけ
最新の機能を試してみよう
最新の機能を試してみよう
chrome://flagsで「デベロッパー ツールの試験
運⽤用版機能」をオン
DevToolsの設定で「Experiments」が新たに出現
ex) Layers Panel

13. まとめ
DevToolsは⾼高機能なツールではありますが、あ
くまでツールでしかありません。
DevToolsを⾃自由⾃自在に使いこなすには、やはり
基本的な知識識が必要になります。
普段からDevToolsを使って、試⾏行行錯誤しながら
頑張って勉強していきましょう！

14. Q&A

15. console.log('%cThank you!!', 'color: pinkʼ’);
(@yoshikawa_̲t)