9/21(Sat)

今日の生放送

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

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

第1回:2014年2月21日公開

90min

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

おためし受講する(5分)

コース概要

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


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

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

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

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

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

担当の先生

参加したい受講生 : 1215

カテゴリー

タグ

月額980円で、4,600本以上の授業が見放題

授業リスト

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

2014年2月21日公開

90min.

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


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

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

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

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

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

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

スライド資料

非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(応用編 知っておきたい機能と応用)

2014年3月3日公開

90min.

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


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

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

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

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

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

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ