Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
これが無料で見れるとは、、最高です！
最近このチャンネルの動画にたどり着いて、どうやら現在も継続して更新を続けられている様子……。なんて私得なんだ！！
2年振りくらいに復習始めましたが、すっかり忘れてますね。ぼちぼちやっていきます。
ショートカット（windows）// ctrl + shift + d前回のポジションに戻す。// ctrl + shift + mスマホモードに切り替え// ctrl + uソースを表示
知らなかった機能を多く知ることができ、非常に勉強になりました。ありがとうございます。
デベロッパーツールについて、理解を深められました。ありがとうございました！
tipsを出し惜しみなく動画にしていただいているのがGood.
これが有料じゃないのは控えめにいってヤバいと思う。ほんとに参考になりました、ありがとうございます！！
うわー嬉しすぎるコメント・・・！有料級のコンテンツをもっと出していきますよー💪
Chrome Developer Toolsの解説本を有料で購入したことがありますが、そこに載っていないようなこともたくさんあって、今までRUclipsで動画にコメントしたことはなかったのですが、これだけのことを無料で教えていただけたお礼が言いたくてコメントさせていただきました。ありがとうございました。
解説有難うございます、今後何回か見ることになると思います。無料でご教示いただき感謝致します。
ためになりました！！これから頑張ります！！
普段仕事やプライベートでコーディングする時にDev Toolを使っていましたがショートカットキーや機能について知らないことがたくさんあってとても勉強になりました！！
プログラミング学習地中です！Dev too;を活用し、学習を進めていきます！ わかりやすい解説、すごく参考になりました！ありがとうございます！
Dev too;って何かな〜って一瞬迷いましたが脳内補完しました！笑HTML, CSS, JavaScript講座もやっているので、そちらもぜひご覧ください！😊
いつもありがとうございます。40代の初心者ですが、とてもわかり易かったです。模写の方法とかの動画もみたいです。またよろしくおねがいします。
コメントありがとうございます！実は近々、外部サイトを真似して実際に作ってみるということを計画しています！もうしばらくお待ちいただけると幸いです！😊
毎日しまぶーさんの動画を見て勉強してます。分かりやすくて助かりますありがとうございます。
私もです
しまぶーさんのチャンネルに出会えて良かったです。昔、プログラミングに挫折しましたが、今なら続けていくことができると思います。エンジニアになるための道の霧が消え、今は光が見えます。とにかくこれからの人生にワクワクしてます。とりあえずドットインストールでJSを頑張っていこうと思います。一期一会となる動画をいつもありがとうございます。
なんていう嬉しすぎるコメント・・・ 😭私もそのようなコメントがいただけると動画を作っているかいがあります。プログラミングは難しいです。これだけは間違いない事実で、私は決して「プログラミングが簡単」とは言いません。ただし、説明の仕方や順番で、きっと挫折しないようにできると信じています。難しいからこそ、プログラミングができる人には価値があって良い待遇を享受できるのだと思います。私の動画を見てくださっている方が1人でも多くエンジニアになれるような講座を作っていきたいと考えています。今後も分かりやすくをモットーに学びになる動画を作ります。励みになるコメントをありがとうございます！ 🙇♂️
なんで効かへんねん！ていうナゾや、Devtoolsを使っていてうまく動かない‥というのがスッキリしました✨✨✨あまりのわかりやすさに、しまぶーさんがツボ売りはじめたら即買ってしまいそうです 😂
こういったピンポイントを、ピックアップしてご紹介してくださる動画が、あることに心から感謝です。本当にありがとうございます。個人的に『サーバー アップロード時のエラー原因 まとめ』的な動画を探しています。ご提供いただけると大変ありがたいです。
わかり易すぎます！！！いつもありがとうございます。今後も勉強させていただきます。
コピペのイントネーションが独特ですね
今まで知らなかった機能がいくつもありました！作業効率アップしますね🎵ありがとうございます😂
Chrome DevToolsを制するものはフロントエンドを制する！今私がつくった言葉ですが、本当に大事ではあります。もっと深いところも講座で出したい・・・！
ディベロッパーツールの使い方がいまいちわかってなかったので、すごく助かります..!!いつもためになる動画をありがとうございます！これからも頑張ってください✨✨
ありがとうございます！私ももっと教えたいことがたくさんあるのでドンドン動画を作っていきます！🔥
この動画は流石に有益すぎます！！consoleやsource,networkあたりの解説も是非していただきたいです。ともあれ、勉強になりました、ありがとうございます！
コメントありがとうございます！そこらへんはJavaScriptでは必須のタブですね！もちろん近い将来やる予定ですので、そのときをお楽しみに！😙
@@shimabu_it 楽しみにしてます！
丁寧な解説で今回の動画もわかりやすくて勉強になりました😆ありがとうございます。
もっと学びになる動画を出していきます🔥
ほんとに毎回勉強になります。次の公開が楽しみです。
伝える技術がすごく高いと思いました！人に伝える時に、どのようなことを意識しているのか動画で出していただきたいです！
勉強になりました！ありがとうございました！！
とても分かりやすかったです。ありがとうございました。
いつも勉強させてもらってます。ありがとうございます。
これは神動画！
これは神コメントです！👼
最高です、ありがとうございます！！！
18:25のところの右下の"︙"マークが見当たりません。アップデートで仕様が変わったのでしょうか？色は簡単に変えれますが、文字の陰影をつけたりができません。
分かりやすいです！ありがとうございます。もう少し、深堀した解説も見てみたいです。
ありがとうございます！だんだんと難しい内容になっていくので期待（覚悟）していてくださいね😁笑
@@shimabu_it 楽しみです！！
18:03 CSS - 色・影に関する宣言を視覚的に追加で説明されている三点リーダが自分のchromeでは表示されないのですが、設定で表示・非表示を設定するのでしょうか。
同じく自分も表示されていません。。chrome側の最近の仕様変更とかでしょうか・・？
私も表示されません。。。
私もです。
私も同じ状況だったので、いろいろいじってみました。その結果、「background-color: pink;」のうち、pink;の左にある正方形の色表示(🟪←このようなもの)をクリックすると、視覚的に確認することができました。「color」「box-shadow」「text-shadow」の場合も同じです。正方形の色アイコンや、shadowの場合は影を表すアイコンのようなものをクリックすること可能です。また、今回の場合のように、background-colorのみを当てている場合などは、自分で一旦、適当に「color」「box-shadow」などを当てて、そこから出てきたアイコンをクリックする方法が良さそうです。少し手間かもですが、慣れれば問題ないですね。もし、他により効率的な方法があれば、教えてもらえると嬉しいです！！
@@yuya5621 同様の状況だったのですが解決できました。教えてくださりありがとうございます
20年程前にスクールに行ってhtml CSSを少し学びましたが、全く異なるキャリアを積み、最近、趣味兼副業のために、再度勉強してみようかと思っていたら、しまぶーさんの動画を見つけました。ほぼ初心者の私にもロジカルに且つ分かりやすく、効率よく説明してくださりありがとうございます。おかげで楽しく学ばせて頂いております。質問があります。Chrome Developer Toolsで編集したコードをVisual Studio Codeに戻し、編集し続けることはできるのでしょうか。それとも、そういう使い方はしないのでしょうか。
0:51 こちらを用意して下さいで挫折しました。その用意の仕方はどうやって分かるんですか。
大変分かりやすい解説をいただきありがとうございました。自分でコーディングをして学習したいのですが、index.html の
Chrome dev tools でコード編集できるの目から鱗でした！その方が効率がいいんですかね?自分の書いたコードだけじゃなく既存のサイトもこれで編集できる！?
Chrome DevToolsでの編集は基本は開発用で、更新したら元に戻っちゃいます。あくまで確認用と思ってください！
いつも有益な動画をありがとうございます！ディベロッパーツールの使い方、とても分かり易かったです😃簡単にサラッと話されている内容でも凄く濃いので、またこちらの動画も何度も見返して勉強させていただきたいと思っております！「あれどうやるんだっけな？」的な時にも、こちらで即座に検索できるように頭の中にインデックスしておきます^^
ありがとうございます！Chrome DevToolsはフロントエンドエンジニアだと一生使うことになるので細かい機能も知っておいて損は無いですね！使いこなしていきましょう〜😎
Windows版も出してほしいです
イケメン！！🙈
サルが目を隠すほど！！😂
cssサンプルです。よかったらどうぞ(^^♪.title{ background: pink;}.sub-title{ color: green;}a:hover{ color: coral;}
ありがとう
お世話になります。CSSの中の「色・影を視覚的に追加」の中で、シャドウアイコン等４つほど３点メニューから出されていますが、３点メニューが出ません。どうしたら出るようになるのでしょうか？お手数おかけしますがよろしくお願いします。windows11でChromeバージョン: 109.0.5414.120（Official Build）（64 ビット）です。
表示されている画像を別の画像に差し替えて検証することって可能ですか？
いつもお世話になっております！スマホモードの show device freme を表示してみたのですが、どれも表示されません… どこか違うところがあるのでしょうか？
今調べてみたら自分のでも表示されなくなっていますね。バグ、もしくはChrome DevToolsのアプデで機能的になくなる可能性がありますね。いずれにせよ待つしか無さそうです...😨
@@shimabu_it そうですか… 分かりました。ちょっと残念ですが、了解です！ お忙しい中返信頂き、ありがとうございました😊
とても勉強になりました。些細なことですが、読み間違いご指摘させていただきます。21:46 CSS - 新しく擬似クラスを追加 フォーカスステート(Focus state)ではなくフォースステート(Force state)ですね。
宣言を視覚的に追加ってのが表示されません！！
18:45の機能が見つかりません
color: pink のように記載した後、pinkの左に四角マーカー(色付き)があると思います。そこにホバーすれば色が自由に指定できます。
@@HelloWorld-echo ありがとうございます!
これが無料で見れるとは、、最高です！
最近このチャンネルの動画にたどり着いて、どうやら現在も継続して更新を続けられている様子……。
なんて私得なんだ！！
2年振りくらいに復習始めましたが、すっかり忘れてますね。ぼちぼちやっていきます。
ショートカット（windows）
// ctrl + shift + d
前回のポジションに戻す。
// ctrl + shift + m
スマホモードに切り替え
// ctrl + u
ソースを表示
知らなかった機能を多く知ることができ、非常に勉強になりました。ありがとうございます。
デベロッパーツールについて、理解を深められました。
ありがとうございました！
tipsを出し惜しみなく動画にしていただいているのがGood.
これが有料じゃないのは控えめにいってヤバいと思う。
ほんとに参考になりました、ありがとうございます！！
うわー嬉しすぎるコメント・・・！
有料級のコンテンツをもっと出していきますよー💪
Chrome Developer Toolsの解説本を有料で購入したことがありますが、そこに載っていないようなこともたくさんあって、今までRUclipsで動画にコメントしたことはなかったのですが、これだけのことを無料で教えていただけたお礼が言いたくてコメントさせていただきました。ありがとうございました。
解説有難うございます、今後何回か見ることになると思います。無料でご教示いただき感謝致します。
ためになりました！！これから頑張ります！！
普段仕事やプライベートでコーディングする時にDev Toolを使っていましたが
ショートカットキーや機能について知らないことがたくさんあってとても勉強になりました！！
プログラミング学習地中です！Dev too;を活用し、学習を進めていきます！
わかりやすい解説、すごく参考になりました！ありがとうございます！
Dev too;って何かな〜って一瞬迷いましたが脳内補完しました！笑
HTML, CSS, JavaScript講座もやっているので、そちらもぜひご覧ください！😊
いつもありがとうございます。
40代の初心者ですが、とてもわかり易かったです。
模写の方法とかの動画もみたいです。
またよろしくおねがいします。
コメントありがとうございます！
実は近々、外部サイトを真似して実際に作ってみるということを計画しています！もうしばらくお待ちいただけると幸いです！😊
毎日しまぶーさんの動画を見て勉強してます。
分かりやすくて助かります
ありがとうございます。
私もです
しまぶーさんのチャンネルに出会えて良かったです。
昔、プログラミングに挫折しましたが、今なら続けていくことができると思います。
エンジニアになるための道の霧が消え、今は光が見えます。とにかくこれからの人生にワクワクしてます。
とりあえずドットインストールでJSを頑張っていこうと思います。
一期一会となる動画をいつもありがとうございます。
なんていう嬉しすぎるコメント・・・ 😭私もそのようなコメントがいただけると動画を作っているかいがあります。
プログラミングは難しいです。これだけは間違いない事実で、私は決して「プログラミングが簡単」とは言いません。ただし、説明の仕方や順番で、きっと挫折しないようにできると信じています。難しいからこそ、プログラミングができる人には価値があって良い待遇を享受できるのだと思います。私の動画を見てくださっている方が1人でも多くエンジニアになれるような講座を作っていきたいと考えています。
今後も分かりやすくをモットーに学びになる動画を作ります。励みになるコメントをありがとうございます！ 🙇♂️
なんで効かへんねん！ていうナゾや、Devtoolsを使っていてうまく動かない‥というのがスッキリしました✨✨✨あまりのわかりやすさに、しまぶーさんがツボ売りはじめたら即買ってしまいそうです 😂
こういったピンポイントを、ピックアップしてご紹介してくださる動画が、あることに心から感謝です。本当にありがとうございます。個人的に『サーバー アップロード時のエラー原因 まとめ』的な動画を探しています。ご提供いただけると大変ありがたいです。
わかり易すぎます！！！
いつもありがとうございます。今後も勉強させていただきます。
コピペのイントネーションが独特ですね
今まで知らなかった機能がいくつもありました！
作業効率アップしますね🎵
ありがとうございます😂
Chrome DevToolsを制するものはフロントエンドを制する！
今私がつくった言葉ですが、本当に大事ではあります。
もっと深いところも講座で出したい・・・！
ディベロッパーツールの使い方がいまいちわかってなかったので、すごく助かります..!!
いつもためになる動画をありがとうございます！これからも頑張ってください✨✨
ありがとうございます！私ももっと教えたいことがたくさんあるのでドンドン動画を作っていきます！🔥
この動画は流石に有益すぎます！！consoleやsource,networkあたりの解説も是非していただきたいです。ともあれ、勉強になりました、ありがとうございます！
コメントありがとうございます！
そこらへんはJavaScriptでは必須のタブですね！
もちろん近い将来やる予定ですので、そのときをお楽しみに！😙
@@shimabu_it 楽しみにしてます！
丁寧な解説で今回の動画もわかりやすくて勉強になりました😆
ありがとうございます。
もっと学びになる動画を出していきます🔥
ほんとに毎回勉強になります。次の公開が楽しみです。
伝える技術がすごく高いと思いました！
人に伝える時に、どのようなことを意識しているのか動画で出していただきたいです！
勉強になりました！
ありがとうございました！！
とても分かりやすかったです。
ありがとうございました。
いつも勉強させてもらってます。ありがとうございます。
これは神動画！
これは神コメントです！👼
最高です、ありがとうございます！！！
18:25のところの右下の"︙"マークが見当たりません。
アップデートで仕様が変わったのでしょうか？
色は簡単に変えれますが、文字の陰影をつけたりができません。
分かりやすいです！ありがとうございます。
もう少し、深堀した解説も見てみたいです。
ありがとうございます！だんだんと難しい内容になっていくので期待（覚悟）していてくださいね😁笑
@@shimabu_it 楽しみです！！
18:03 CSS - 色・影に関する宣言を視覚的に追加
で説明されている三点リーダが自分のchromeでは表示されないのですが、設定で表示・非表示を設定するのでしょうか。
同じく自分も表示されていません。。chrome側の最近の仕様変更とかでしょうか・・？
私も表示されません。。。
私もです。
私も同じ状況だったので、いろいろいじってみました。
その結果、「background-color: pink;」のうち、pink;の左にある正方形の色表示(🟪←このようなもの)をクリックすると、視覚的に確認することができました。
「color」「box-shadow」「text-shadow」の場合も同じです。正方形の色アイコンや、shadowの場合は影を表すアイコンのようなものをクリックすること可能です。
また、今回の場合のように、background-colorのみを当てている場合などは、自分で一旦、適当に「color」「box-shadow」などを当てて、そこから出てきたアイコンをクリックする方法が良さそうです。
少し手間かもですが、慣れれば問題ないですね。
もし、他により効率的な方法があれば、教えてもらえると嬉しいです！！
@@yuya5621 同様の状況だったのですが解決できました。教えてくださりありがとうございます
20年程前にスクールに行ってhtml CSSを少し学びましたが、全く異なるキャリアを積み、最近、趣味兼副業のために、再度勉強してみようかと思っていたら、しまぶーさんの動画を見つけました。ほぼ初心者の私にもロジカルに且つ分かりやすく、効率よく説明してくださりありがとうございます。おかげで楽しく学ばせて頂いております。質問があります。Chrome Developer Toolsで編集したコードをVisual Studio Codeに戻し、編集し続けることはできるのでしょうか。それとも、そういう使い方はしないのでしょうか。
0:51 こちらを用意して下さいで挫折しました。その用意の仕方はどうやって分かるんですか。
大変分かりやすい解説をいただきありがとうございました。
自分でコーディングをして学習したいのですが、
index.html の
Chrome dev tools でコード編集できるの目から鱗でした！その方が効率がいいんですかね?自分の書いたコードだけじゃなく
既存のサイトもこれで編集できる！?
Chrome DevToolsでの編集は基本は開発用で、更新したら元に戻っちゃいます。あくまで確認用と思ってください！
いつも有益な動画をありがとうございます！ディベロッパーツールの使い方、とても分かり易かったです😃簡単にサラッと話されている内容でも凄く濃いので、またこちらの動画も何度も見返して勉強させていただきたいと思っております！「あれどうやるんだっけな？」的な時にも、こちらで即座に検索できるように頭の中にインデックスしておきます^^
ありがとうございます！Chrome DevToolsはフロントエンドエンジニアだと一生使うことになるので細かい機能も知っておいて損は無いですね！使いこなしていきましょう〜😎
Windows版も出してほしいです
イケメン！！🙈
サルが目を隠すほど！！😂
cssサンプルです。よかったらどうぞ(^^♪
.title{
background: pink;
}
.sub-title{
color: green;
}
a:hover{
color: coral;
}
ありがとう
お世話になります。CSSの中の「色・影を視覚的に追加」の中で、シャドウアイコン等４つほど３点メニューから出されていますが、３点メニューが出ません。どうしたら出るようになるのでしょうか？
お手数おかけしますがよろしくお願いします。
windows11でChromeバージョン: 109.0.5414.120（Official Build）（64 ビット）です。
表示されている画像を別の画像に差し替えて検証することって可能ですか？
いつもお世話になっております！
スマホモードの show device freme を表示してみたのですが、どれも表示されません…
どこか違うところがあるのでしょうか？
今調べてみたら自分のでも表示されなくなっていますね。バグ、もしくはChrome DevToolsのアプデで機能的になくなる可能性がありますね。いずれにせよ待つしか無さそうです...😨
@@shimabu_it
そうですか… 分かりました。ちょっと残念ですが、了解です！ お忙しい中返信頂き、ありがとうございました😊
とても勉強になりました。
些細なことですが、読み間違いご指摘させていただきます。
21:46 CSS - 新しく擬似クラスを追加
フォーカスステート(Focus state)ではなくフォースステート(Force state)ですね。
宣言を視覚的に追加ってのが表示されません！！
18:45の機能が見つかりません
color: pink のように記載した後、pinkの左に四角マーカー(色付き)があると思います。
そこにホバーすれば色が自由に指定できます。
@@HelloWorld-echo
ありがとうございます!