非ウェブデザイナーも知っておきたいデベロッパーツールの使い方（基本編使い方と便利な機能）先生：池田祐太郎

非ウェブデザイナーも知っておき
たいデベロッパーツールの使い方
（基本編使い方と便利な機能）

2014年2月21日

本日のアジェンダ
・プロフィール
・デベロッパーツールとは何か(10分)
・デベロッパーツールのメリットとデメリット(10分)
・デベロッパーツールを使ってみよう(60分)
・質疑応答(10分)

プロフィール
池田祐太郎
ウェブサイト構築とコンサルティング
!
!
!

http://highfivecreate.com/

デベロッパーツールを使った
ことが有りますか？
YES / NO

デベロッパーツールとは何か

何ができるようになるか

・特定の場所のHTMLやCSSがどのように反映されているか即
座に知ることができる

!

・今まで一つ一つなんとなく書いていたCSSがリアルタイムに
反映され視覚的にわかりやすく構築できる

!

!

・ChromeやFirefoxでは問題ないのにInternetExplorerで起き
ていた不具合をすぐに見つけられる

!

!

・ChromeやFirefoxでは問題ないのにInternetExplorerで起き
ていた不具合をすぐに見つけられる
!

・他のサイトで「この部分どうやって書いているんだろうな」
と思っていたところがわかるようになる（！）

・特定の場所のHTMLやCSSがどのように反映されているか即座に
知ることができる
!

・今まで一つ一つなんとなく書いていたCSSがリアルタイムに反映
され視覚的にわかりやすく構築できる
!

・ChromeやFirefoxでは問題ないのにInternetExplorerで起きて
いた不具合をすぐに見つけられる
!

・他のサイトで「この部分どうやって書いているんだろうな」と
思っていたところがわかるようになる（！）
!

・Facebookのいいねボタンなどの動的に出力されている箇所の
CSS制御ができるようになる

デベロッパーツールを使える
ようになるのは大変か

たまに更新でhtmlやcssをちょっと
いじるのであれば覚えて損はない

非常に効率の悪い
従来の制作方法

バグがどこで起きているかわかりづらかった

Chromeの
デベロッパーツール

ここではChromeのデベロッパーツールを使って進めていきま
す。
Chromeブラウザをお持ちでない場合、この機会にダウンロー
ドしてみてください。

デベロッパーツールの
メリットとデメリット

・HTML、CSSの打ちミスやどこでエラーが起きているかを早
く見つけられるようになる

!

・CSSをリアルタイムで確認しながら入力するので作業時間が
劇的に短くなる

!

!

・ブロック要素、インライン要素といった要素がよくわからな
かったものが理解できるようになる

!

!

!

・どのCSSスタイルが優先されてかかっているかわかる

!

!

!

!

・動的に生成されている要素に対してCSSを確認したりCSSを
かけることができるようになる

・HTML、CSSの打ちミスやどこでエラーが起きているかを早く見つけ
られるようになる
!

・CSSをリアルタイムで確認しながら入力するので作業時間が劇的に短
くなる
!

・ブロック要素、インライン要素といった要素がよくわからなかったも
のが理解できるようになる
!

!

・動的に生成されている要素に対してCSSを確認したりCSSをかけるこ
とができるようになる
!

・jQueryのデバッグができるようになる＆早く作業できるようになる

・HTML、CSSの打ちミスやどこでエラーが起きているかを早く見つけられるよ
うになる
!

・CSSをリアルタイムで確認しながら入力するので作業時間が劇的に短くなる
!

・ブロック要素、インライン要素といった要素がよくわからなかったものが理解
できるようになる
!

!

・動的に生成されている要素に対してCSSを確認したりCSSをかけることができ
るようになる
!

!

・ファイルの読込にどのくらい時間がかかっているのか、またエラーとなってい
るファイルを簡単に見つけられる

・HTML、CSSの打ちミスやどこでエラーが起きているかを早く見つけられるようになる
!
!
・ブロック要素、インライン要素といった要素がよくわからなかったものが理解できるよ
うになる
!
!
・動的に生成されている要素に対してCSSを確認したりCSSをかけることができるように
なる
!
!
・ファイルの読込にどのくらい時間がかかっているのか、またエラーとなっているファイ
ルを簡単に見つけられる
!
・html, cssに対して恐怖心が薄らいでいく

・HTML、CSSの打ちミスやどこでエラーが起きているかを早く見つけられるようになる

!

!
・ブロック要素、インライン要素といった要素がよくわからなかったものが理解できるように
なる

!

!
・動的に生成されている要素に対してCSSを確認したりCSSをかけることができるようになる

!

!
・ファイルの読込にどのくらい時間がかかっているのか、またエラーとなっているファイルを
簡単に見つけられる

!
・html, cssに対して恐怖心が薄らいでいく

!
・多少の崩れでは動じなくなる！

・最初に画面の見方など少しだけ新しいことを覚えないといけ
ない

ない
!

・html, cssの基本がわかっていないとちょっと厳しいので多少
は知識が必要

ない
!

・html, cssの基本がわかっていないとちょっと厳しいので多少
は知識が必要
!

・デベロッパーツールを全画面表示でみていると周りから驚か
れる

もしデベロッパーツールが
なかったら

なぜデベロッパーツールが必要なのか

デベロッパーツールを
使ってみよう

次回の授業
デベロッパーツール応用編：
知っておきたい機能と応用
もう少し踏み込んだCSSの機能、動的出力の要素の
操作、 jQueryのデバッグ、読み込みファイルとスピー
ド…etc

質疑応答

本日の授業内容について
デベロッパーツールについて
etc…

課題

デベロッパーツールを使って遊ぶ

ありがとうございました

またお会いしましょう

非ウェブデザイナーも知っておきたいデベロッパーツールの使い方（基本編 使い方と便利な機能） 先生：池田 祐太郎

More Related Content

What's hot

Viewers also liked

Similar to 非ウェブデザイナーも知っておきたいデベロッパーツールの使い方（基本編 使い方と便利な機能） 先生：池田 祐太郎

More from schoowebcampus

Recently uploaded