デベロッパーツールの使い方基礎・応用

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

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

【前半】授業
  • 自己紹介&アジェンダ
  • 00:00:13〜(04:17)
  • デベロッパーツールとは何か
  • 00:04:30〜(01:15)
  • デベロッパーツールで何が出来るか
  • 00:05:45〜(04:30)
  • 効率の悪い従来の開発方法
  • 00:10:15〜(01:14)
  • デベロッパーツールのメリットとデメリット
  • 00:11:29〜(00:16)
  • ・メリット
  • 00:11:45〜(03:01)
  • ・デメリット
  • 00:14:46〜(03:49)
  • デベロッパーツールを使ってみよう
  • 00:18:35〜(01:26)
  • デベロッパーツールの使用方法
  • 00:20:01〜(03:58)
  • 虫眼鏡ツールでHTMLファイルを見る
  • 00:23:59〜(04:01)
  • 使われているテキストを見る
  • 00:28:00〜(02:45)
  • 使われている画像をみてみよう
  • 00:30:45〜(04:14)
  • 画像を差し替えてみる
  • 00:34:59〜(03:31)
  • CSSをみてみよう
  • 00:38:30〜(04:59)
  • 打ち消し線の意味
  • 00:43:29〜(04:49)
  • プロバティの追加
  • 00:48:18〜(03:16)
  • デベロッパーツールの予測変換
  • 00:51:34〜(02:16)
  • デベロッパーツールを使って少し遊んでみよう
  • 00:53:50〜(02:42)
  • 画像の並びをデベロッパーツールで変更してみる
  • 00:56:32〜(10:06)
Q:ここで編集したものを保存したりできるんでしょうか?
  • 【後半】質疑応答
  • 01:06:38〜(01:18)
  • Q:HTMLの中にPHPやJavascriptなどの言語が使われている場合も、ソースを見れるんでしょうか?
  • 01:07:56〜(01:58)
  • Q:デベロッパーツールに特化した書籍でお勧めはありますか?
  • 01:09:54〜(01:33)
  • Q:デベロッパーツールで変更後に「1つ前の設定に戻る」や「1箇所だけデフォルトの設定に戻す」といった事はできるのでしょうか。
  • 01:11:27〜(01:10)
  • Q:「Firefox」の場合のデベロッパーツールの出し方を教えて下さい。
  • 01:12:37〜(00:51)
  • Q:サーバーに上げていなくても、同様に操作できますか?
  • 01:13:28〜(00:24)
  • Q:編集した箇所をソースに反映する最適な方法はありますか?
  • 01:13:52〜(01:08)
  • Q:Safariでもソースコードが見れますが、GoogleChomeとSafariで何か違いはありますか?
  • 01:15:00〜(06:31)
  • Q:他サイトのソースで参考になったサイトってありますか?
  • 01:21:31〜(02:42)
  • Q:HTMLはPHPとかJavascriptが絡むと難しいですよね?
  • 01:24:13〜(05:47)
  • 課題発表
  • 01:30:00〜

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全2回 2014年2月21日公開
    非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能)

    Webサイトを効率良く構築&デバッグする上で役立つのがデベロッパーツールです。 これができるようになると、ブラウザ上でリアルタイムに修正を確認できたり、元のファイルをいじらずに一時的な変更を適用させたり、CSSを効率よく構築できたり、JavaScript(jQuery)のデバッグをしたりとウェブサイト制作に携わるコーダーやデザイナーはもちろん、非ウェブデザイナーのサイト修正や更新をするWeb担当者など、一度覚えれば便利で手放すことができなくなるツールが満載のデベロッパーツールの使い方を一から応用まで紹介します。


    この授業を受けると学べること:

    ・デベロッパーツールの使い方がわかる
    ・特定の場所のHTMLやCSSがどのように反映されているか即座に知ることができる
    ・今まで一つ一つなんとなく書いていたCSSがリアルタイムに反映され視覚的にわかりやすく構築できる
    ・ChromeやFirefoxでは問題ないのにInternetExplorerで起きていた不具合をすぐに見つけられる
    ・他のサイトで「この部分どうやって書いているんだろな」と思っていたところがわかるようになる(!)
    ・Facebookのいいねボタンなどの動的に出力されている箇所のCSS制御ができるようになる

    予定している環境:
    Chromeデベロッパーツール

    ※デベロッパーツールはSafariやFireBug(Firefoxプラグイン)、InternetExplorerにも同じような機能がありますが、授業でメインとして進めていくのはChromeを使用します

    対象者:
    ・HTML, CSSの基本を理解している
    ・ページ構築の時間を効率よくしたいと考えている
    ・デベロッパーツールは知っているが活用していない・できていない

    参考サイト/予習教材

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!