おためし受講中

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

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


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

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

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

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

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

参考サイト/予習教材

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

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