Web

【動画解説】デベロッパーツールでHTML、CSS、JavaScriptを操作する【超基本操作】

どうも、つよぽん(@tsuyopon_xyz)です!

HTML、CSSの修正をWebページ上で出来たら便利なのになー
もっと効率的にWeb開発する方法無いかなー
ちょっとしたJavaScriptコードの動作を確認したいなー

といったことを考えたことは無いでしょうか?

そのような悩みを解決する手段として「デベロッパーツール」というものがあります。

デベロッパーツールはWebブラウザに最初から付いているものなので、新たにソフトをインストールすることなく、すぐに使い始めることができます。

 

もし、

  • デベロッパーツールを知らない
  • デベロッパーツールは聞いたことあるけど、使い方を知らない
  • デベロッパーツールを使わなくても、Webページの実装が出来るから、新たに使い方を学ぶ必要はないと考えている

といった場合は、「開発効率」という観点から大きな損をしています。

今回解説するデベロッパーツールの基本的な操作を覚えるだけでも、開発効率が大幅の上がるので、

ぜひ覚えていただけたらと思います^^

 

今回の記事では

  • デベロッパーツールの開き方
  • デベロッパーツールを使った、HTMLの編集方法
  • デベロッパーツールを使った、CSSの編集方法
  • デベロッパーツールを使った、JavaScriptの実行方法と、console.logの確認方法

を動画で解説していきます。

 

動画の目次
  • 00:00 イントロダクション
  • 01:12 デベロッパーツールの起動方法
  • 02:13 デベロッパーツールでHTMLを操作する
  • 04:10 デベロッパーツールでCSSを操作する
  • 10:41 デベロッパーツールでJavaScriptを実行する

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です