Webの神様（おすすめch紹介）

【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（前編）【HTML・CSS コーディング】

(c) Webの神様　これからCSSの勉強をはじめるみなさん、この動画でCSS学習のスタートダッシュはバッチリです！ 後から大きくハマってつまづく前に、基本 …

動画教材で言われるままに.と# 入れてる流れだったけどさっぱり使い方も分からず特別説明なかったので.と# の使い方が良く分からなかったんですが意味がわかりましたありがとうございますチャンネル登録させて頂きました

CSSってつまずきがちなんですが、基本をしっかり覚えれば難しくないかもしれませんね。今は模写コーディングをしながら復習として拝見しています。いつもありがとうございます。

かなり分かりやすいです！動画ありがとうございます。

はじめまして。つい最近からですが模写動画等参考にさせていただいております。非常にわかりやすく楽しく拝見させていただいております。いきなりで恐縮ですが一点質問させてください。リセットcssと自分で作成しているcssファイルを別々で管理、編集していく場合、リセットcssで定められているプロパティと値が優先されるのでしょうか。（例えば リセットcssでheaderに対してdisplay:block;が指定されていた場合、自分で編集しているcssファイルでdisplayプロパティの値を変更したとしても上書きはされないのでしょうか）文面だとわかりづらくまた、初歩的な質問で申し訳ございませんが、お手すきの時にお返事いただけるとありがたいです。。

動画を見て勉強中です。仕事上HTMLにCSSを直書きする必要があるので、そちらの方法も教えてもらえると嬉しいです😭

いつもわかりやすい説明ありがとうございます。css超初心者です。リセットcssについて質問です。動画内でリセットcssはエディタを開いてコピペしていましたが、リセットcssファイルをエディタを開かずに、そのまま作業用フォルダ内に移動させるだけでも同じことになりますか？

はじめまして。自分で自分のWebサイトを一から作りたいと思い、色々調べていたところ、こちらのチャンネルに出会いました。丁寧な説明でとても分かりやすく、有益な情報をたくさん教えてくださり本当にありがとうございます。超初心者で大変恐縮なのですが、本動画で使用されているエディタは何か教えていただけないでしょうか？上部に使用中のファイル等のアイコンであったり、タブ（？）表示やプレビューボタンもあり、便利な機能が備わっているようにみえて同じものを使ってみたいと思いました。もしよろしければ、ご回答よろしくお願いいたします。

なんのリセットcssを使っているか教えてほしいです。参考にさせて頂きます。

時々、笑わされてるw

おすすめがありすぎてどのリセットcssが良いのかわかりません。

可愛いので神

WEB神崇めても良いか?

【超入門】初心者必見！模写コーディングをやってみた 実践編 Part3 レスポンシブデザイン編【HTML・CSS コーディング】

(c) Webの神様　HTML/CSSの学習で定番の学習方法、「模写コーディング」のやり方、練習するときのポイントをまとめました下記の動画をもとに、実際に …

最近このチャンネルのおかげで模写コーディングのやる気が半端なく上がってる！今度フォルダ、ファイルの整理の仕方についての動画をみたいです！

実践的な部分をノーカットで見れて助かります^ ^編集や説明も分かりやすくて大変参考になりました！！

凄く分かりやすいです！いつもありがとうございます！また、できれば初級編だけでなく、サイトに動きをつけたり、中級編、上級編と続編を出して頂けると嬉しいです！

完成しました！かなり分かりやすいです😊次回も楽しみです！

長時間お疲れ様でした🙇‍♀️あとでゆっくり一時停止ながらみたいと思います😌ライブコーディングが1番好きです👩‍💻🤍今度はphotoshopのデザインカンプからのコーディングや、cssでできるアニメーションなども観てみたいです！

試行錯誤して　何処をどう動かせば、どうなるかを丁寧に説明してくれていたので、わかりやすかったです！勉強になりました。

０から作るよりも、レスポンシブ考える方が、頭使いますね。詳細度の説明を聞いていたおかげで、なんとかハマらずできました。ありがとうございます。

複数ページの作り方も詳しく教えて欲しいです。よろしくお願いします。

模写コーディングのとっかかりとして大変勉強になっています。Bootstrapを使用したコーディングも見てみたいです。

二時間も内容盛りだくさんな動画をアップしていただきありがとうございます🙇‍♂️参考にさせていただきます✨

度々質問すみません！h1やh2を同じようにコーディングしていくと、どうしてもあり得ないほど小さくなってしまいます。動画と同じ要領でやるために、pxやwidthの設定を大幅に変えて無理やり合わせています。お手本のソースを見ても、同じコードを書いているはずなのに上手くいきません私のパソコン環境設定が何か違うのでしょうか？？お忙しい中申し訳ありませんが教えていただきたいです💦

模写に疲れた時は、なつこさんのNG集に癒されてます！

私が初めてHTMLを習った時、Bootstrapを使ったより簡潔な方法を教わりました。ーーが、どうも基礎からしっかり理解が出来ていないなと。そう感じていたときにWeb神様の動画を拝見しました。いやもう、感動です。わかりやすい。基礎からしっかり理解して進めていくって大事ですね、テヘペロです。

とても参考になりました！この動画がなければレスポンシブルデザインまでたどり着けなかったと思います質問なのですが、headerの上に謎の余白ができてしまいます。marginやpadding、font-size,line-hight,displayなど確認してみましたが解決しませんでした。原因として何が考えられるでしょうか？（追記）フォルダーからもう一度htmlファイルを開きなおしたらなぜか謎の余白が消えました。苦労していたのはなんだったんでしょう笑

模写動画すごく勉強になります！質問なんですが、CSSを書いてる時に、順番無しでいろいろな箇所を書いていますが細かいところを書き忘れたりしませんか？忘れないような方法や考え方があれば教えてください！

大変参考になる動画配信ありがとうございます！動画内で、色の拝借(?)とサイズを測定する際に使用している拡張機能は何て言う名称ですか？教えていただけたら幸いです。

初コメです。いつも為になる動画をありがとうございます😊なつこさんの様にコーディングが出来る様になりたくてこの題材の模写コーディングを実際に行ってみました❗️プログラミング初学者の自分が仕事の合間をぬって作成すると全体の完成まで一週間以上程時間が掛かってしまいました…。プロの方(なつこさん)が作成すると2時間程で出来るのに…力不足を感じてます。もう一度振り返って今度は半分位の時間で作成出来る様に頑張ってみます❗️

今回も参考になりました。ありがとうございます。Reset.cssとnormarise.cssの使い分けはどのようにお考えでしょうか？

とても参考になります！jqueryなども実装したもう少しレベルの高い動画も見てみたいです！これからも応援しています。

非常に参考になります。ありがとうございました。一つお聞きしたいのですが、最初のスクリーンキャプチャのサイズ調整はwindowsでも可能ですか？

【超入門】初心者向け レスポンシブデザイン完全攻略！メディアクエリ等解説【HTML・CSS コーディング】

(c) Webの神様　レスポンシブデザインとは？具体的にどうやるの？など初心者向けに徹底解説しました！ メディアクエリの使い方を覚えて、レスポンシブ …

かなり参考にさせていただいています！教え方上手すぎです！！！！環境構築について、分かりやすく解説した動画欲しいです！他の動画やブログなどを見ても、「環境構築は最初苦労します」とか「ここで挫折する事も珍しくない」とか「環境構築が一番大変でしたとか」言っていても、詳しく教えてくれていないので初心者の私はただいたずらにビビるという状態です。もしくは、なつこさんのお勧めのサイトや動画あれば教えてください🙏🙏🙏

分かりやす過ぎて大好き!!!!!

こんにちは、時々動画を参考にさせて頂いております♪分かりやすい説明で助かります😉DTPからWEBデザイナーに転職しました。まだまだ分からない事が多いですが勉強中です。次回の動画も楽しみにしております！引き続き宜しくお願い致します。🤗

今回もすごく分かりやすかったです！また、動画の更新お待ちしております。

なつこさんのWEB知識が会社に入って実戦から深くなって行ったのでしょうか？すごいなぁと尊敬します。50からの手習いでDTPデザインの仕事の傍ら、勉強して2年たちますが、知れば知るほどまだまだスタートラインにもつけていないと感じます。モバイルファーストの模写コーディング動画も見たいです！そしてWordpressとJSも見たいです！なつこさんの動画はちゃんとした基礎と概念がしっかりしてて本質がわかるので、全部見ようと思ってます。WEBを始めた人にも動画の存在を教えようと思います！新着動画楽しみにしています！

内容盛りだくさんでしたね！まだわからないことたくさんあったので何回もみて覚えます！毎日暑い中お疲れ様です☀️

レスポンシブで、htmlでフォントサイズを変えるのは、とても勉強になりました。これは、かなり手間が省ける。素晴らしい動画をありがとうございます。😊

分かりやすくて参考になりました😊

いつもとても勉強になる分かりやすい配信を楽しく拝見させて頂いております。　何かどこかでHTML、CSS、ページレスポンシブコーディングのご講義やアドバイスをオンラインなどで受けられる様な機会や相談箱みたいなものはあったりしますでしょうか。。。

なつこさんはじめまして！コーディングはじめたばかりの初心者でYouTubeで色々調べていた時に偶然なつこさんの動画を見つけました！いくつも見させて頂きましたがほんとためになりチャンネル登録させて頂きました🙏これからも色々な動画楽しみにしています😊

こういう動画探してました。ありがとうございます！

クールビズ良いですね！次の動画はいつ頃アップされますでしょうか？楽しみにしています。仕事帰りでは勉強する気力がおきないので、土日しかコーディングの勉強はしていません。

いつも動画ありがとうございます。CSSで分からない所はなつこちゃんの動画見て勉強してます😄

ためになる動画ありがとうございます、リセットCSSでオススメがあれば教えて下さい、プロのかたはそれぞれ違うリセットCSSを使っているのでしょうか？

Its so cute🥰

50代でプログラミング学習を始めてしまった、おバカさんの吉野ともうします。 よろしくお願いいたします。 師匠と呼ばせてください(笑) すみません(-_-;) 質問させてください。 レスポンシブデザインをする時にも関わりのあるmetaタグについてですが、 「X-UA-Compatible」の部分を書いて 開発者ツールを見ると必ず問題が指摘されてしまいます。 色々な意見が出ている様ですがこの部分は実際のところ必要なのでしょうか？お忙しいところ大変恐縮ですが何卒ご教示をお願い致します。

こんばんは、なつこさん。ボクはデブなんですけど、レスポンシブなカラダになりたいと思ってます。レスポンシブデブ男って、なつこさん好きですか？！？

なつこさんこんばんわ！✨

かわいいなつこさん

【超初心者向け】jQuery最新版の読み込み・使い方解説2021！初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】

(c) Webの神様　この動画1本で、jQuery最新版の読み込み方と、アコーディオンメニューの作り方はバッチリです！初めてjQueryに触れる…JavaScript全然 …

jQueryこれから勉強していく予定で、色々な動画みてましたがチャンネル名通り神レベルで分かりやすかったです！40分で眠くならない勉強動画は本当にすごいと感じます。いつも、分かりやすい動画あげていただき感謝しております😄

どの動画も本当に説明が分かりやすくて、すごく助かっています😆

jquery解説参考になります！ただ説明を聞いてるだけじゃなくて一緒に進めていくハンズオン形式の方が良いと思います。

アコーディオンメニューの解説ありがとうございました。とても勉強になりました！おかげさまでiSARA模写を疑問点なく完結させることができました！メインビジュアルのスライダーやハンバガーメニューの作り方なども、結局どのように作るのが良いのか知りたいです。

jQueryシリーズもめっちゃ良いですね！他にも頻繁に出てくる動きの解説楽しみにしています！！

動画を観ながら動作の確認ができました！とても分かりやすかったです。jQueryの始め方が分からなくて困っていましたが、これから始められそうです。とても感謝しております。

説明のしかたは易しくて、留学生でもわかりやすいですよありがとうございます

やばい位わかりやすく有難かったです🙏jQuery、web制作で丁度つまずいていたのでよかったです！web制作でよく使うjQueryシリーズでみたいです！ご検討よろしくお願い致します🙇‍♂️🙇‍♂️

いつも楽しく拝見してます！基本的なアコーディオンメニュー、ローディング、スクロールアニメーション、モーダルウィンド、ハンバーガーメニュー、タブをJavaScript で実装できるんですが、web制作会社に勤めるためにはJqueryで実装できるように学ぶべきですか？Jqueryは全くわかりません、、

ハンバーガーメニューの解説もお願いします。3本を押すと横から出てきて、半透明になっているものもあります。

jQueryのthisの意味がよく分かりました。初めは意味不明でした。やはり動画は分かりやすい。ありがとうございます！

すごく分かりやすい説明ですね。すっきり頭に入りました。即チャンネル登録！私のチャンネル運営にも参考になります。

isaraで解説してくれるのはありがたいです! 勉強になりました!

まじでサイコーです。最近Web系の会社に転職したものです。ちょうどコピペでアコーディオンやハンバーガーメニューなどを作っていましたが、意味がわかってないため、汎用性がきかないところでした。

先日頂いたご依頼で、htmlとcssだけでページを作りました。jQueryをイチオシにしていた私にとって衝撃でした。速さ、見やすさ、シンプルを求めるとそうなるのかもしれませんね。

いつも参考にさせていただいています。ありがとうございます！１つ質問があるのですが、僕はこれまでhtmlとは別にjQuery用のファイルを作成し、それをhtmlで読み込んでいました。jQueryを書いていくファイルはhtmlファイル内に書くのが一般的なのでしょうか？ご回答いただければ幸いです。よろしくお願いいたします。

初めてこのチャンネルを見ました！検証ツールの見方と、そもそもの出し方がわからないのですが、その解説動画も上がってますでしょうか…あれば見てみたいです。

こんにちは。初心者にはとてもお役になっております。jQueryの動画拝見致しました♡

jQueryのプロゲート終わってつかみで最初にやるのにバッチリでした！がんばれます！

jQueryの説明ありがとうございます！iSARA模写の動画を知らずこちらの動画を見たので、自分なりに近い形でコーディングしたのですが、矢印が切り替わりません。もし宜しければどこに問題があるのか教えてもらえると嬉しいです…💦※HTMLにかいたjsの記述 <script> $(function(){ $(“.textbox dt”).on(“click”, function(){ $(this).next().slideToggle(); $(this).toggleClass(“open”); }); }); </script>※CSS.textbox dt::after{ content: url(/images/icon_top.png); float: right;}/* jQueryで.openのクラスをついたときに切り替わる */.textbox dt .open::after{ content: url(/images/icon_ander.png);}.textbox dd{ text-align: left; display: none;}検証ツールで見るとdtをクリックすると.openのクラスは付与されており、display:none;で消したddの文章もクリックするとスライドで表示され、アイコンだけ切り替わらない状態です。お手すきの際で良いので解答もらえるととても助かります。よろしくお願いします。

【作業効率UP！】Web制作にマストのGoogle Chrome拡張機能10選！現役Webディレクターも愛用【HTML・CSS コーディング】

(c) Webの神様　現役Webディレクターも現場で愛用！作業効率が格段にアップする、おすすめのGoogle Chrome拡張機能10選の紹介です！ 全て無料で …

====== 動画内で紹介している拡張機能一覧 ======① Picture-in-Picture Extensionhttps://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg② Pastyhttps://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf/related?hl=ja③ Linkclumphttps://chrome.google.com/webstore/detail/linkclump/lfpjkncokllnfokkgpkobnkbkmelfefj/related?hl=ja④ OneTabhttps://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall/related?hl=ja⑤ Wappalyzerhttps://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg/related?hl=ja⑥ WPSNIFFERhttps://chrome.google.com/webstore/detail/wpsniffer-wordpress-theme/kihhefcbenhkjgjhchanjfhhflaojldn/related⑦ WhatFonthttps://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja⑧ ColorZillahttps://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja⑨ 簡単！タイトル表示＋https://chrome.google.com/webstore/detail/easy-show-title-plus/gdpfgejmikpgbnbhbhjegjfglhodfloa/related?hl=ja⑩ Tag Assistant Legacyhttps://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ja====================================

神動画です….！こうゆうのあったらいいなって思ってたのが実際にあったんですね….！！！作業効率上がるわこれ！！

知らなかったものたくさんありました！ありがとうございます😊

知らないものばかりでした！ありがとうございます！！

いつも参考にさせてもらっています！

Exit WhatFont が表示されないページがあるのですが原因はなんでしょうか？もちろん文字情報も出ません！

Page Monitorは便利でした。

シンプルに顔がタイプじゃ、ビジネス系やけど普通にTikTokとかでも伸びる