おためし受講中

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

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


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

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

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

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

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

参考サイト/予習教材

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    05:20  (00:13 ~ )
    class,idの追加
    03:26  (05:33 ~ )
    追加したclassに対してcssを設定する
    04:16  (08:59 ~ )
    elements.style
    04:52  (13:15 ~ )
    cssの優先順位
    03:01  (18:07 ~ )
    idにもcssでbackgroundcolorを設定するとどうなるか?
    04:12  (21:08 ~ )
    hoverセレクタ
    04:42  (25:20 ~ )
    hoverセレクタのcssを設定する
    04:40  (30:02 ~ )
    作ったcssはどうする?
    04:11  (34:42 ~ )
    実際の制作においての使い方
    07:27  (38:53 ~ )
    FacebookのLikeboxカスタマイズ
    04:23  (46:20 ~ )
    動的に生成されたcssの確認方法
    04:12  (50:43 ~ )
    jQueryデバック
    02:03  (54:55 ~ )
    consoleでjqueryの動作を確認
    03:48  (56:58 ~ )
    jqueryのデバックでcssを確認する
    02:52  (1:00:46 ~ )
    ファイル読み込みスピード
    04:32  (1:03:38 ~ )
    その他のデベロッパーツールの紹介
    11:05  (1:08:10 ~ )
    【後半】質疑応答
    Q:先生の授業もっと受けたいです。jsや他の授業はやりませんか?
    00:52  (1:20:18 ~ )
    Q:これだけで開発できそうに思えますが、それでも一般的な開発ツールには敵わない部分はありますか?
    01:32  (1:21:10 ~ )
    Q:「作ったcssはどうする?」であるリンクをクリックして最終的なものをコピペしてたと思いますが、そのリンクが何だったのか見逃しました。
    02:33  (1:22:42 ~ )
    Q:Chromeのインスペクタで虫眼鏡が一番感動したのですが、先程のiPhone+Safariブラウザで同様の機能は有りますか?
    00:53  (1:25:15 ~ )
    Q:Facebookのボックスを改変する事で、何か使用規約的な事に抵触する事はないのでしょうか?
    03:17  (1:26:08 ~ )
    課題発表
      (1:29:25 ~ )