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を実行する

 

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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