【初心者向け】Google Chromeの検証ツール（デベロッパーツール）使い方解説！【HTML・CSS コーディング】
Вставка
- Опубліковано 16 жов 2024
- コーディングやプログラミングには欠かせない便利ツール、検証ツールの機能や使い方を、学習初心者向けに解説しました！
なんかよくわからない、怖くてなかなか使おうとしなかった人もいるはずです。ぜひ、この機会に使い始めてみてください！
【Google Chrome】
www.google.com...
↓↓↓こちらの動画もオススメ↓↓↓
【作業効率UP！】Web制作にマストのGoogle Chrome拡張機能10選！現役Webディレクターも愛用【HTML・CSS コーディング】
• 【作業効率UP！】Web制作にマストのGoo...
【Windows編】ショートカットキーを使いこなして作業効率爆上がり！チートシート付き【Web・IT業界の常識】
• 【Windows編】ショートカットキーを使い...
【Mac編】ショートカットキーを使いこなして作業効率爆上がり！チートシート付き【Web・IT業界の常識】
• 【Mac編】ショートカットキーを使いこなして...
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ...
【プランの詳細・お申し込み（MENTA）】
menta.work/pla...
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#コーディング #プログラミング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-c...
![HTML - Полный Курс HTML Для Начинающих [3 ЧАСА]](/img/n.gif)
コーディングやプログラミングには欠かせない便利ツール、検証ツールの機能や使い方を、学習初心者向けに解説しました！
なんかよくわからない、怖くてなかなか使おうとしなかった人もいるはずです。ぜひ、この機会に使い始めてみてください！
【Google Chrome】
www.google.com/intl/ja_jp/chrome/
↓↓↓こちらの動画もオススメ↓↓↓
【作業効率UP！】Web制作にマストのGoogle Chrome拡張機能10選！現役Webディレクターも愛用【HTML・CSS コーディング】
ua-cam.com/video/mfc6iCcgMq0/v-deo.html
【Windows編】ショートカットキーを使いこなして作業効率爆上がり！チートシート付き【Web・IT業界の常識】
ua-cam.com/video/NSShbX8CGIo/v-deo.html
【Mac編】ショートカットキーを使いこなして作業効率爆上がり！チートシート付き【Web・IT業界の常識】
ua-cam.com/video/Z2xfnLbCeHI/v-deo.html
なつこ先生、お世話になっております。
検証ツールは、ホームページの編集で専門スキルのある方から単発で聞く機会は何度かありましたが、
なかなか身につけて実践する・・・までは至ってませんでした。
今回こちらの動画を何度か再生してガッツリ勉強させていただき、
HTML表示やCSSでの動きの変化がこんなにはっきりと可視化して修正が出来る事を痛感出来ました！
今後どんどん活用していきたいと思います！
僕、中二なんですけど学校のChromebookの検証をたまたま見つけて色々弄ってたんですけどとても参考になりました！
将来プログラマーなどのIT関連の仕事に就きたいと考えているのでとても有難いです。
検証を使ったツールで拡張機能をオフにしてブロックを解除しようと試したらやっぱり解除できました、でももうデベロッパーモードを剥奪されたぜ！
デベロッパーツール、使えるようになりたかったのでめっちゃわかりやすくて助かりました！
お役に立ててよかったです！🙆♀️
なつこさんやっぱわかりやすいです🤘
めっちゃ助かりました☺️
お役に立ててよかったです🙇♀️
すごくわかりやすいです。ありがとうございます😭
お役に立てて良かったです！！ご視聴ありがとうございます🙇♀️🙇♀️
有難うございます^ ^
こちらのネットワークの見方や他のセクションなどありますか？
なつこ。中毒性がある。
いつも勉強させてもらっています！
有意義な動画ありがとうございます😭
一つお聞きしたいのですが、Google検証ツールで見た場合と実際のデバイスで見た場合で画像の高さが違います。
(画面幅は同じにしています)
現象
ワードプレスのカラム機能を使い、
2カラムで左に画像の説明、右に画像という形です。
検証ツールで見ると、説明文のカラムと
画像カラムの高さぴったりですが、
実際のデバイスで見ると、画像の高さが低い？画像が少し小さいです。
コメントありがとうございます！
恐らく、検証ツールの情報が間違っているということではなく、何らかの条件（画像ファイルの配置のされ方やCSS指定など）が影響していて、PCで見るのとスマホ実機で見るのとはサイズが変わっているのではないかと思います。
（PC上で確認できる検証ツールのスマホ表示は、あくまで「PC環境でスマホの画面幅だけを再現したプレビュー状態」とお考えください。）
なぜそういう状況になっているかは、実際に詳しく調査してみないとわからない範疇のことで、明確にご回答できずすみません🙇♀️
なつこさま、いつも勉強させていただいております者です。1つご質問があります。動画内で解説してたらすみません。html編集した場合、編集したコードを全コピぺできる方法はありますか？
ご質問ありがとうございます！
「Elements（要素）」タブで、カーソルを各要素の上において右クリックすると、メニューの中に「コピー」という項目が出てきますので、その中の「outerHTMLをコピー」を選択していただくと、その要素のHTMLを丸ごとコピーできます。
検証ツール上で編集後のHTMLを丸ごとファイルに書き写したい、となった場合は、タグなどの最上位の要素をコピーして頂ければ良いかと思います！もちろん一部の要素のみでもコピー可能です。
（この方法は、あくまでHTMLを書き写す方法となります！CSSも書き写したい場合にはやり方が異なります。）
下記の記事も参考になるかもしれません。
freesim.tokyo/468/
@@webgodweb
試してみます！ご丁寧にありがとうございました！！
ソフトの見た目などを変えることってできますか？
ご視聴ありがとうございます。Google Chromeのデベロッパーツールの見た目でしょうか？見た目の変更方法は私の知る限りではおそらくないかと思います。
規制の解除など出来ますか？
コメントありがとうございます！
どういった規制？のお話しでしょうか？
右クリックして一番下にある検証が押せない
ショートカットキーも効かない....
コメントありがとうございます！
Google Chromeを最新版にアップデートする、では改善しないでしょうか？
また、シークレットブラウザで閲覧した場合も、同様の状態になりますでしょうか？
差し支えなければもう少し詳しく状況を伺えますと幸いです。
自信がなくなりました😅w
徐々に慣れていってみてください…！！私も最初はよくわからず使っておりました🙃
もうこれでいいやん（ ; ; ）