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

【超入門】初心者必見！模写コーディングをやってみた実践編 Part2【HTML・CSS コーディング】

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

＜目次＞・オープニング 0:00・オススメの手順のおさらい 1:32・模写コーディング実況　①サイト選び 1:48　②スクリーンショットを撮る 2:41　③テキストを抽出する 3:28　④画像を抽出する 4:18　⑤HTML編集 6:42　⑥CSS編集 17:11　⑦運命の答え合わせ 1:16:48・今回のまとめ 1:21:59【超入門】初心者向け模写コーディング！オススメのやり方とポイント【HTML・CSS コーディング】https://youtu.be/OH1X09Ilu9E↓ Part1↓【超入門】初心者必見！模写コーディングをやってみた実践編【HTML・CSS コーディング】https://youtu.be/RBLkXAG4QTM

この動画を見させていただいて初めての模写やり切りました！こういう、本当のプロはどのような流れで作っているのかが細かいところまで具体的に知りたかったので本当に助かりました！一人でやっていたら何倍も時間と労力かかっていたかと思います！ありがとうございます✨

現役フロントエンジニアです。いくつか動画拝見しましたが、いずれも初心者にとって非常に参考になるチャンネルだと思います。私自身まだまだ未熟なので、基本のおさらいとしてこれからも楽しみにしています。機会があればできるだけ本チャンネルを広めていきますので、引き続き頑張ってください。なつこさんかわいい。

すごく勉強になる…模写コーディングシリーズもっと見たいな

めちゃくちゃわかりやすいし前回よりかなり見やすくなっていて感謝です、、

前回の動画から改善されていてかなり見やすい！マークアップ中の様子もそのまま見ることができてとても助かってます！ありがとうございます😭

凄くいい動画だと思います！他の方も模写の動画やってますがなにより少ないので何個もレイアウトのパターンやcssのパターンがあるともっと良くなると思います！(例)グリッドパターンやFlexパターンフォントサイズだと%やrem等です！等です！

ものすごく分かりやすかったです。Part1に比べて、少し慣れてきました。ありがとうございます！！

大変参考にさせていただいております。今回は字幕がないため作業工程が大変見やすくなりました。ありがとうございます。歳行ってから海外でWEBデザインのコースを現地語で受けておりますが、しっくり来ていなかったところをこちらで補わせていただいております。今後の動画も楽しみにしております。

分かりやすくて、素晴らしい模写でした。ありがとうございます😊これからも頑張ってください！

すごくわかりやすいです！模写するサイト選びも悩みどこから手をつけていいかも悩みこの一週間落ち込んでいたので。この動画を見て明日はこのサイトを模写すると楽しみになりました！本当にありがとうございます。

質問失礼します。footerに対してtext-align: center;は反映するのですが、backgroundやfont-sizeなどはなぜか反映されません！何故か心当たりがあれば教えてほしいです。何度もコードを確認したので、間違いないような気はするのですが。

こんにちは。大変勉強になります！質問ですが、33:50あたりでh2とh3に上下にmargin15pxをかけているのに相殺される理由は何故ですか？上下に15pxのmarginをかけると30px空きそうですが・・・。

とても参考になりました。趣味ではじめたweb制作ですが、頭打ちになってました。しっかり勉強させてもらいます。ありがとうございます。

駆け出しエンジニアです。progateをやり終わって何をしようか迷っているときに、こちらの動画を見つけました。めちゃくちゃわかりやすくて、学習させてもらっています！これからも動画アップ楽しみにしています＾＾

模写コーディングの仕方がてんでわからなかったので勉強になりました！いつも見やすい動画ありがとうございます(*^-^*)参考にいたします

もっと早く出会いたかった。。。わかりやすい。

度々質問失礼します。　HTMLの構造のマークアップで　idタグとclassタグ　を使用されていますが、どのように使い分ければよいのか、わからず困っています。例えば、<div id=”container”>と<div class=”sidebar”> としても問題ないのでしょうか？

待ってました！！ありがとうございます🙇‍♂️参考にさせていただきます！

参考にさせていただいてます☻ありがとうございます！！質問です💡他の方からコメントもあったようにスクショ画面からピクセルで余白やフォントサイズを測る方法を詳しく教えて頂けないでしょうか？画面横に小さく出して測るとピクセルは正確に測れませんよね？( ꒪⌓꒪)単位は元からピクセルになっているかなど、、、

【超入門】Flexboxを30分で完全習得！初心者向け【HTML・CSS コーディング】

(c) Webの神様　内容訂正のご案内※※※ 動画内「align-items」解説時（10:44）のスライド画像と、「align-content」解説時（12:05）のスライド画像が編集時 …

flex-direction:column指定した後にjustify-contentやalign-itemsの主軸も逆になるなんて知りませんでした。これ知らなかったら今後の勉強でどツボにハマる所でした。とても有益な動画でした！ありがとうございます！

どの動画も本当にわかりやすくて、すごいです。CSS,カナリわかるようになりました！ありがとうございます！！！

今のところ自分に一番フィットする教材として活用させていただいています。ドットインストールとセットで使うと理解度めちゃくちゃ上がります！！WEBの神様にお願いです。XDデータ・フォトショップ・イラストレーターのデザインからのコーディングを最初から解説した分かりやすい動画がなくて地味に苦戦しています。模写コーディング実践編の様に詳細な解説動画あると助かります🙏

とても理解しやすい動画でした！コーディング初心者でこちらの動画に出会えた方は幸運ですね。

いつもわかりやすい動画ありがとうございます。質問です。<ul>の<li>をフレックスボックスで並べたい場合は親要素を<ul>にして書くべきでしょうか？classやid要素で囲って書くべきでしょうか？

分かりやすくて何度でも何度でも繰り返し視聴出来るのでありがたいです！

わかりやすい説明とても助かります！ありがとうございます！！例えばブログでモバイル画面時にヘッダー上部の”画像のみ”を縮小して全体を見えるようにすることは可能でしょうか？？ブログタイトルを画像自体に書いているため、画像ごと縮小する方法を模索中です…

話し方と図解がめちゃくちゃ分かりやすいです。すごい。勉強になります！

すごく勉強になります！

ヘッダーコーディングの学習の記事で.header{ margin-top: 20px; position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: #333; display: flex; flex-direction: column; align-items: center; }このように書かれていて　要素が中央にきていました。　これは主軸の方向が逆になっていたということだったんですね。justify-content は　text-align-center ; align-items:center　はvertical-align:center と覚えてしまっています。すっと軸の向きが変わるとすんなり頭にいれるのが難しそうです。

スライド画像をまとめたPDFがとてもわかりやすくてありがたいです！！

いつもすごく参考になります。主軸の話、勉強になりました。grid編も待ってます！

今週は土日も仕事確定なので、なつこさんの動画を見れないかもしれませんが更新楽しみにしています。毎週楽しみです！

※※※内容訂正のご案内※※※動画内「align-items」解説時（10:44）のスライド画像と、「align-content」解説時（12:05）のスライド画像が編集時のミスで逆のものになってしまっております。下記より、スライド画像をまとめたpdfファイルをご覧いただけますので、こちらも併せて動画をご視聴いただけますと幸いです。大変失礼いたしました！https://webgodweb.com/flexbox/flexbox.pdfレイアウト調整を簡単、簡潔にする超便利なFlexbox！なんとなく使っている、イマイチ使い方がわからない…そんな皆さんに向けて、Flexboxを完全解説しました！＜目次＞・オープニング 0:00・Flexboxとは？ 0:47・Flexboxはどういう時に使う？ 1:50・Flexboxの使い方 3:20・Flexboxのプロパティ 4:41・Flexboxのプロパティ（親要素に指定するもの）のまとめ 14:48・Flexboxのプロパティ（子要素に指定するもの）15:57・エンディング 28:16・今回のまとめ 28:36

いつもありがたく拝見させていただいております！😃操作画面とトーク画面の2画面で説明してもらえないでしょうか？

いつも学習の為に楽しく拝見しております🙇‍♂️1つ質問があります！ある講師の方にflexboxを制したらコーディングも6割近く制する事が出来るといわれました！そのコーディングにもよりますが模写などをする際に本当にある程度はflexboxでできるものでしょうか？もしそうならもっとflexboxを理解して苦手としているコーディングをよりスムーズに行けたらと思っております。よろしければアドバイス頂ければ幸いです🙇‍♂️

動画で使っているイラストはどのようなソフトで作成しているのでしょうか？どの動画もセンスが良いので参考にしたいです。

痒いところを確認できるので、ありがたいです！チャンネル登録しました！

よい説明でした！ありがとうございます！！

もしかしてalign-itemsとalign-contentの場面の順番が、間違っていません？

【超入門】知らなきゃマズイ！HTML・CSS 基本の「き」【HTML・CSS コーディング】

(c) Webの神様　2021/07/10 に、この動画のリニューアル版・2021年最新版を公開しました！↓】【超入門】HTML・CSSってなに？学習の始め方解説 2021 …

【↓2021/07/10 に、この動画のリニューアル版・2021年最新版を公開しました！↓】【超入門】HTML・CSSってなに？学習の始め方解説 2021年最新版【未経験・初心者向け】https://youtu.be/m4AOfxB6XR0こちらも是非ご覧ください！※紹介しているエディタなどは、最新版動画のものが現在のオススメになります。本動画は少し内容が古くなっておりますので、上記を参考にしていただければ幸いです。

こういう超が付く初心者向けの動画探してました！他の初心者向けという動画ですら分からなかったので本当に助かります！動画更新ぜひ頑張ってください！！笑

とても分かりやすいです。今後の動画を楽しみにしてます。

めっちゃ勉強なりました！ありがとうございます😆

某スクールでhtml・CSS講座を〇万円で受講してるんですが、こちらの動画の方が分かりやすいです…笑また、解説の仕方も、他の動画では、早口や抑揚のない口調が多く、テロップを目で追わなくてはいけなかったり、一時停止の回数が多かったりするのですが、こちらではそのようなこともないので、とても耳に入り易いです。初心者目線にたった構成、ありがとうございます！

本を読んだだけだとボヤッとしてしまっていたことが纏まりました！話し方も聴きやすくてとても良かったです。

とても丁寧な解説ありがとうございます。超超初心者ぬなので大変で助かります。これから順番に他の動画も視聴させて頂きます。やっと出会えた気がしてます。ちょっと質問なのですが、HTMLで書いたものをWebに上げるとは、他の人も誰でも見れる状態なのでしょうか？

とても丁寧で、分かり易く、助かってます。もう少し文字を拡大していただけると、ありがたいです。応援しています。よろしくお願いします。

プログラミングのド初心者です。とてもわかりやすかったです。

これからがんばろーって思える内容でした♪

最高の動画です！

質問です。HTML.CSSの始めたばかりの初心者ですが、新しく追加されたHTML..C　SSタグや廃止されたタグなどはどう調べたらいいのでしょうか？よろしくお願いします。

Atom使ったことありますが、あまり馴染めませんでした。Windowsにも対応したエディターを紹介して欲しいです！ナツコセンセイノショートヘアサイコウ！

Gracias trato de aprender Japones y a programar

２０２１年版より、こちらのほうが、頭に入ってきます。なぜでしょうか・・・・

ATOMが上手くインストールされません。英語表記でどうすればいいか分かりません

おはようございます。動画がなかなかアップされないので他の動画見返してました。この動画表情固いけど、なつこさんのショートヘアーの髪型一番好きです！YouTube辞めてないですよね？

パソコンを買い替えたいと思っておりますが、2016年は古すぎますか？

MacBook 2016 年は古すぎますか？

鼻水啜ってて草

【超入門】CSSプロパティ「display」が使いこなせない方へ！10分攻略【HTML・CSS コーディング】

(c) Webの神様　CSSをはじめたばかりの皆さん、プロパティ「display」は使いこなせていますか？配置が思い通りにならない！そんな時…これを知らないと …

↓『CSSをはじめてみよう』前編はこちら↓https://youtu.be/iIDpkhgU3gM↓『CSSをはじめてみよう』後編はこちら↓https://youtu.be/mFGmdHgT7DQ＜目次＞・オープニング 0:00・今回の概要 0:32・プロパティ「display」とは 0:48・設定できる値の種類 1:16・インライン要素とブロック要素 1:31・「inline」について 3:14・「block」について 4:04・「inline」と「block」の違い 4:43・「inline-block」とは何なのか？ 4:58・「inline」は不自由が多い 5:20・「block」にできないこと 5:48・「block」にできないことの例 5:59・「inline-block」にできること 7:20・「inline」「block」「inline-block」の使い分け 7:41・プロパティ「display」の初期設定値についてのまとめ 9:35・今回のまとめ 10:27

チャンネル登録させていただきました。プログラミング勉強始めて1ヶ月弱で、基礎学習中です。世の中の色んな学習ツールだと超初心者には「え？どういう事⁉︎」ってなる事をしっかり解説してくれてる動画です！！教え方めちゃくちゃ上手いです！！ありがとうございます！！

わかりやすい解説ありがとうございます！HTML5からはa要素で囲んでいる中にブロック要素を含めることができるのでそこだけ注意ですね！

はじめまして！プログラミング初心者のものです。[display:block]には余白が確保されているという意味を知って、凄いスッキリしました！CSSでかなり躓いているので、また詳しい動画解説を楽しみにしております！！

見てるだけでわかるので移動時間の勉強になり無駄な時間がなくなり助かります！

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

めっちゃ分かりやすい😭他のオンラインスクールで突然このinlineとbkockが出てきてサラッと流されてしまい困ってました..！ありがとうございます

いつもわかりやすい動画をありがとうございます。役に立っています。今まだ完全に理解できていないのが、GridとFlex-boxの違いです。動画を作成いただければ幸いです。今後ともよろしくお願いいたします。

めちゃくちゃ助かります🔥！ありがとうございます🙇🏻‍♂️

ものすごくわかりやすかったです！本当にありがとうございます😁

displayについてわかった気になっていましたが、改めて専門で学んで発見がいくつもありました。わかりやすい動画ありがとうございます。

わかりやすく教えて下さってありがとうございます！

喋りのスピードが適切で滑舌も良いので聞きやすく、とてもわかり易かったです。助かりました。ありがとうございます。

とてもわかりやすく助かりました！引き続き頑張ります！webの神様ありがとうございました！

わかりやすいです！！

いつも動画ありがとうございます！1点質問宜しいでしょうか？要素を縦に並べたい時以外は全てdisplay:inline-blockにしておけば良いのでは？と解釈しておりますがデメリットはございますでしょうか？お忙しいところ大変恐縮ではございますがご返答頂ければ幸いです！

tamabukuro kojiさんがこちらを紹介されてたので見ましたが、マジで女神様です。感謝しかないです。デジハリオンラインより実用的で使えます。これからもよろしくお願いします。

分かりやすい！😎

わっかりやすい！

はじめまして＾＾displayのこの3つがめちゃくちゃ苦手です😫分かりやすい動画ありがとうございます😌また参考にさせていただきます😧🙇‍♀️

【超入門】初心者向けレンタルサーバーを借りてみよう！FTP接続 / ドメイン【HTML・CSS コーディング】

(c) Webの神様　Web学習初心者の皆さんも、レンタルサーバーを借りてみましょう！ゆくゆくは避けて通れないサーバー操作…そんなに怖くないかも！

＜目次＞・オープニング 0:00・そもそもサーバーって何？　0:39　①レンタルサーバーとは　1:39　②ドメインのイロハ　3:03　③サーバーに関する知識まとめ　4:55・初心者がレンタルサーバーを借りるメリットと実際に借りるときの手順　5:24　→実際に借りる手順をエックスサーバーを用いて解説！　6:30・今回のまとめ　16:38

こんなに具体的に教えてくれるなんてほんと神様です勉強になりました

色々ググって調べても進まなかったのですが、この動画のおかげで解決しました、、！！喋りも聴き心地が良く最高でした。ありがとうございました！！

いつも動画を見て勉強させて頂いております。13:33　の部分でwebgodweb.xsrv.jp　にアクセスするとデフォルトでindex.htmlを読み込んでいるようですが、例えばこれをindex.htmlファイルではなくデフォルトでlogin.html（同じディレクトリ内にlogin.htmlファイルがあると仮定して）を読み込ませるような方法などありますか？ご教授頂けると助かります。

とても分りやすかったです。有難う御座います！

うおぉおぉ！めちゃくちゃ知りたかった情報でした！本当にいつも勉強になります！ありがとうございます🙇‍♂️

とてもわかりやすく、素晴らしい動画です。ありがとうございました(((o(*°∀°* )o)))

一番知りたかったところを動画でわかりやすく知ることができました！めちゃくちゃありがたかったです！

めちゃくちゃわかりやすいです！ありがとうございます😊

中身が濃く、説明もわかりやすかったです。とても勉強になりました！感謝いたします。

良質な動画ありがとうございます♪またひとつ勉強になりました！

いつも分かりやすい動画をありがとうございます！超初歩的で大変申し訳ないのですが、某学習サービスで「GitHubを使ってウェブサイトを公開しよう」というレッスンがあったのですが、今回のレンタルサーバーとGitHubはどういう違いがあるのでしょうか？

サーバー初心者の自分にはとてもわかりやすい動画で感動しました。ただ、動画の通りやったらhtmlは表示できたのですが、CSSやimgファイルがブラウザに反映されないのですが何か方法が有ればご教授ください🙇‍♀️

ドンピシャに知りたい情報だったのでありがとうございます！！【質問】・動画ではpublic.htmlにhtmlのみをアップしていましたが、cssやJavaScriptなども同じpublic.htmlにアップすればいいですか？・サイトを修正する場合は自分のpc上のhtmlやcssを修正してアップしなおす手順でよろしいでしょうか？よろしくおねがします！！

今まで自宅のNASをサーバーにしようとしてましたが、どうもモデム内でブロックされてしまうらしく、レンタルサーバーに切り替えました。でもアップロードの勝手が違うので、参考になりました。

非常にわかりやすくてためになりました。初期ドメイン取得してテストプレイしてみます。この動画拡散させていただきますね！

これからポートフォリオを作成に挑戦しようと思っていたのですが、公開方法をどうしようか迷っていたので、大変参考になりました。いつも有益な動画をありがとうございます！

いまいち流れがわからずにいたので、助かりました！

ためになる情報ありがとうございます。これからの自分にとってとても役に立つ動画でした。私の母親と同姓同名で驚きました。これからも頑張ってください。

レンタルサーバー以外に、VPSの利用の仕方も動画にしていただけると嬉しいです。おすすめのVPSサーバー到着ありますか？