No video :(

Chrome DevToolsの使い方を徹底解説！Chrome Developer Toolsを使いこなすと開発効率が上がる！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

しまぶーのIT大学

Подписаться 118 тыс.

Просмотров 80 тыс.

50% 1

Видео Поделиться Скачать Добавить в

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@aaa-zu4nj 4 года назад

これが無料で見れるとは、、最高です！

@user-mm4we4pt2b 4 года назад

ショートカット（windows） // ctrl + shift + d 前回のポジションに戻す。 // ctrl + shift + m スマホモードに切り替え // ctrl + u ソースを表示

@kinaoshi338 6 дней назад

2年振りくらいに復習始めましたが、すっかり忘れてますね。ぼちぼちやっていきます。

@user-pd8jc7ko7u 4 года назад

これが有料じゃないのは控えめにいってヤバいと思う。ほんとに参考になりました、ありがとうございます！！

@shimabu_it 4 года назад

うわー嬉しすぎるコメント・・・！有料級のコンテンツをもっと出していきますよー💪

@elizaragan 4 года назад

Chrome Developer Toolsの解説本を有料で購入したことがありますが、そこに載っていないようなこともたくさんあって、今までRU-vidで動画にコメントしたことはなかったのですが、これだけのことを無料で教えていただけたお礼が言いたくてコメントさせていただきました。ありがとうございました。

@MONKEYDLUFFY0114 4 года назад

いつもありがとうございます。 40代の初心者ですが、とてもわかり易かったです。模写の方法とかの動画もみたいです。またよろしくおねがいします。

@shimabu_it 4 года назад

コメントありがとうございます！実は近々、外部サイトを真似して実際に作ってみるということを計画しています！もうしばらくお待ちいただけると幸いです！😊

@user-cq9jp9uk6b Год назад

なんで効かへんねん！ていうナゾや、Devtoolsを使っていてうまく動かない‥というのがスッキリしました✨✨✨あまりのわかりやすさに、しまぶーさんがツボ売りはじめたら即買ってしまいそうです 😂

@en-hy3yt 4 года назад

最近このチャンネルの動画にたどり着いて、どうやら現在も継続して更新を続けられている様子……。なんて私得なんだ！！

@bfg6996 3 года назад

デベロッパーツールについて、理解を深められました。ありがとうございました！

@ss5126acro 3 года назад

知らなかった機能を多く知ることができ、非常に勉強になりました。ありがとうございます。

@user-st6zq4ie8e 4 года назад

ディベロッパーツールの使い方がいまいちわかってなかったので、すごく助かります..!! いつもためになる動画をありがとうございます！これからも頑張ってください✨✨

@shimabu_it 4 года назад

ありがとうございます！私ももっと教えたいことがたくさんあるのでドンドン動画を作っていきます！🔥

@user-vy3yc9hb7w 3 года назад

毎日しまぶーさんの動画を見て勉強してます。分かりやすくて助かりますありがとうございます。

@rikutokato3587 2 года назад

私もです

@user-bk2yb7er3l 3 года назад

ためになりました！！これから頑張ります！！

@shibuyayusuke4709 4 года назад

プログラミング学習地中です！Dev too;を活用し、学習を進めていきます！　わかりやすい解説、すごく参考になりました！ありがとうございます！

@shimabu_it 4 года назад

Dev too;って何かな〜って一瞬迷いましたが脳内補完しました！笑 HTML, CSS, JavaScript講座もやっているので、そちらもぜひご覧ください！😊

@kengonamba1000 4 года назад

しまぶーさんのチャンネルに出会えて良かったです。昔、プログラミングに挫折しましたが、今なら続けていくことができると思います。エンジニアになるための道の霧が消え、今は光が見えます。とにかくこれからの人生にワクワクしてます。とりあえずドットインストールでJSを頑張っていこうと思います。一期一会となる動画をいつもありがとうございます。

@shimabu_it 4 года назад

なんていう嬉しすぎるコメント・・・ 😭私もそのようなコメントがいただけると動画を作っているかいがあります。プログラミングは難しいです。これだけは間違いない事実で、私は決して「プログラミングが簡単」とは言いません。ただし、説明の仕方や順番で、きっと挫折しないようにできると信じています。難しいからこそ、プログラミングができる人には価値があって良い待遇を享受できるのだと思います。私の動画を見てくださっている方が1人でも多くエンジニアになれるような講座を作っていきたいと考えています。今後も分かりやすくをモットーに学びになる動画を作ります。励みになるコメントをありがとうございます！ 🙇‍♂️

@void2extern189 4 года назад

tipsを出し惜しみなく動画にしていただいているのがGood.

@youtubefan1822 4 года назад

解説有難うございます、今後何回か見ることになると思います。無料でご教示いただき感謝致します。

@user-lg3sy8sw8k 4 года назад

今まで知らなかった機能がいくつもありました！作業効率アップしますね🎵 ありがとうございます😂

@shimabu_it 4 года назад

Chrome DevToolsを制するものはフロントエンドを制する！今私がつくった言葉ですが、本当に大事ではあります。もっと深いところも講座で出したい・・・！

@user-hf6ln1ok2j 4 года назад

この動画は流石に有益すぎます！！consoleやsource,networkあたりの解説も是非していただきたいです。ともあれ、勉強になりました、ありがとうございます！

@shimabu_it 4 года назад

コメントありがとうございます！そこらへんはJavaScriptでは必須のタブですね！もちろん近い将来やる予定ですので、そのときをお楽しみに！😙

@user-mm4we4pt2b 4 года назад

@@shimabu_it 楽しみにしてます！

@user-ro6ee5om9g 4 года назад

普段仕事やプライベートでコーディングする時にDev Toolを使っていましたがショートカットキーや機能について知らないことがたくさんあってとても勉強になりました！！

@rikaproductive 3 года назад

こういったピンポイントを、ピックアップしてご紹介してくださる動画が、あることに心から感謝です。本当にありがとうございます。個人的に『サーバー　アップロード時のエラー原因　まとめ』的な動画を探しています。ご提供いただけると大変ありがたいです。

@shingotakano8534 3 года назад

わかり易すぎます！！！いつもありがとうございます。今後も勉強させていただきます。

@user-xn1uw2ye9g 4 года назад

コピペのイントネーションが独特ですね

@user-ok3xd3lf6y 4 года назад

丁寧な解説で今回の動画もわかりやすくて勉強になりました😆 ありがとうございます。

@shimabu_it 4 года назад

もっと学びになる動画を出していきます🔥

@shogohirasawa3543 3 года назад

伝える技術がすごく高いと思いました！人に伝える時に、どのようなことを意識しているのか動画で出していただきたいです！

@user-on2ic8lc9u 3 года назад

ほんとに毎回勉強になります。次の公開が楽しみです。

@eng_w_eng 3 года назад

勉強になりました！ありがとうございました！！

@user-ln4qn2uo5y 3 года назад

とても分かりやすかったです。ありがとうございました。

@AntHouse1006 4 года назад

いつも勉強させてもらってます。ありがとうございます。

@user-vv1nm5yk1m 4 года назад

これは神動画！

@shimabu_it 4 года назад

これは神コメントです！👼

@YoshiyukiTonami 3 года назад

最高です、ありがとうございます！！！

@アキンコ 4 года назад

分かりやすいです！ありがとうございます。もう少し、深堀した解説も見てみたいです。

@shimabu_it 4 года назад

ありがとうございます！だんだんと難しい内容になっていくので期待（覚悟）していてくださいね😁笑

@user-mm4we4pt2b 4 года назад

@@shimabu_it 楽しみです！！

@junnishishi5579 4 года назад

18:03 CSS - 色・影に関する宣言を視覚的に追加で説明されている三点リーダが自分のchromeでは表示されないのですが、設定で表示・非表示を設定するのでしょうか。

@yuppi9175 3 года назад

同じく自分も表示されていません。。chrome側の最近の仕様変更とかでしょうか・・？

@user-oz4rr2lm8u 3 года назад

私も表示されません。。。

@user-rm2ws8yx3h 3 года назад

私もです。

@yuya5621 3 года назад

私も同じ状況だったので、いろいろいじってみました。その結果、「background-color: pink;」のうち、pink;の左にある正方形の色表示(🟪←このようなもの)をクリックすると、視覚的に確認することができました。「color」「box-shadow」「text-shadow」の場合も同じです。正方形の色アイコンや、shadowの場合は影を表すアイコンのようなものをクリックすること可能です。また、今回の場合のように、background-colorのみを当てている場合などは、自分で一旦、適当に「color」「box-shadow」などを当てて、そこから出てきたアイコンをクリックする方法が良さそうです。少し手間かもですが、慣れれば問題ないですね。もし、他により効率的な方法があれば、教えてもらえると嬉しいです！！

@naopsan 3 года назад

@@yuya5621 同様の状況だったのですが解決できました。教えてくださりありがとうございます

@Private-pg1fd 4 года назад

いつも有益な動画をありがとうございます！ディベロッパーツールの使い方、とても分かり易かったです😃簡単にサラッと話されている内容でも凄く濃いので、またこちらの動画も何度も見返して勉強させていただきたいと思っております！「あれどうやるんだっけな？」的な時にも、こちらで即座に検索できるように頭の中にインデックスしておきます^^

@shimabu_it 4 года назад

ありがとうございます！Chrome DevToolsはフロントエンドエンジニアだと一生使うことになるので細かい機能も知っておいて損は無いですね！使いこなしていきましょう〜😎

@bk8612 4 года назад

20年程前にスクールに行ってhtml CSSを少し学びましたが、全く異なるキャリアを積み、最近、趣味兼副業のために、再度勉強してみようかと思っていたら、しまぶーさんの動画を見つけました。ほぼ初心者の私にもロジカルに且つ分かりやすく、効率よく説明してくださりありがとうございます。おかげで楽しく学ばせて頂いております。質問があります。Chrome Developer Toolsで編集したコードをVisual Studio Codeに戻し、編集し続けることはできるのでしょうか。それとも、そういう使い方はしないのでしょうか。

@user-ln4qn2uo5y 2 года назад

大変分かりやすい解説をいただきありがとうございました。自分でコーディングをして学習したいのですが、 index.html の

@hiroyuki4599 3 года назад

18:25のところの右下の"︙"マークが見当たりません。アップデートで仕様が変わったのでしょうか？色は簡単に変えれますが、文字の陰影をつけたりができません。

@ta-suki-7066 3 года назад

Chrome　dev tools　でコード編集できるの目から鱗でした！その方が効率がいいんですかね?自分の書いたコードだけじゃなく既存のサイトもこれで編集できる！?

@shimabu_it 3 года назад

Chrome DevToolsでの編集は基本は開発用で、更新したら元に戻っちゃいます。あくまで確認用と思ってください！

@user-mm4we4pt2b 4 года назад

cssサンプルです。よかったらどうぞ(^^♪ .title{ background: pink; } .sub-title{ color: green; } a:hover{ color: coral; }

@user-shochan 2 года назад

ありがとう

@hiram5358 Год назад

お世話になります。CSSの中の「色・影を視覚的に追加」の中で、シャドウアイコン等４つほど３点メニューから出されていますが、３点メニューが出ません。どうしたら出るようになるのでしょうか？お手数おかけしますがよろしくお願いします。 windows11でChromeバージョン: 109.0.5414.120（Official Build）（64 ビット）です。