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

【超入門】もうCSSの真ん中寄せで悩まない！横向き編【HTML・CSS コーディング】

(c) Webの神様　CSSの真ん中寄せ、うまくいかなかった経験は誰にでもあるのでは？横向き、縦向き、それぞれの場合で真ん中寄せをマスターするための …

※※※displayプロパティの理解が不十分な方は、先に下記の動画のご視聴をオススメします！※※※↓『プロパティ「display」10分攻略』はこちら↓https://youtu.be/p5fFAWHj0v4＜目次＞・オープニング 0:00・今回の概要 0:42・①テキスト・画像の中央揃え 1:15・②インライン要素の場合 3:36・②インライン要素の場合【番外編】 5:38・③ブロックレベル要素の場合 6:21・まとめ「真ん中寄せチェックシート」 8:07・今回のまとめ 11:07↓『CSSをはじめてみよう』前編はこちら↓https://youtu.be/iIDpkhgU3gM↓『CSSをはじめてみよう』後編はこちら↓https://youtu.be/mFGmdHgT7DQ

「text-align:center」と「margin：０　auto」の使い分け、今までうまくできていなかったですが、今回の動画を拝見して、使い分けが明確にわかりました。いつも役に立つ動画をありがとうございます。

とても分かりやすく、完全に理解できました。ありがとうございます！(*^^*)お忙しい中大変恐縮ですが、position relative・absoluteも理解しづらい為、今後動画解説して頂けたら嬉しいです…！

めちゃくちゃ分かりやすかったです！動画作成感謝です！！

分かりやすすぎる。独学で勉強してるので助かります＾＾

とても分かりやすい解説です。ありがとうございます😊

いまいち、曖昧で、どっちかで動けばいい！とやってました(笑)　inline-block をheaderなどにかけることは、これから注意します。　囲んだpタグにmargin:0 auto; 　いい勉強になりました。

まさしくよくわからなかったとこだやっと理解できて、スッキリしました！本当にありがとうございます！

いつもわかりやすい動画をありがとうございます。こちらの動画で１つわからないところがあったので質問させていただきました。２：５０〜のところで、テキストはブロック要素であるにも関わらず、text-align: center;で中央寄せになるのは何故でしょうか？

「【超入門】初心者必見！模写コーディングをやってみた実践編」でnavメニュー中央化の部分が判りづらかったので視聴しました。疑問が氷解！中央化は自信がつきました！！

動画ありがとうございます😊いつも参考にしてます。Width100%のヘッダーで横並びのリストを作成します。縮めると、2段3段とレイアウトが崩れてしまうのはどうすればいいのでしょうか？

分かりやすいです！！完了しました！！

いつも拝見させていただいております。ありがとうございます。今回の動画はちょうど困っていた時にピンポイントで拝見することができ、困っていることがすべて解決しました。これからもよろしくお願い申し上げます。

ありがとうございます！完全に理解できました！今後もなつこさんの動画をみていきますね！

とてもわかりやすい動画をありがとうございます。細かいことなのですが質問させてください。序盤で「テキストや画像などのインライン要素」と解説されている点、また中央寄せしたいインライン要素ではなくその親要素に指定する、との解説で一点、納得ができず暫く悩んでしまいました。最初の例でpタグの中のテキストという文字を中央揃えにした際はpタグにtext-align: center;を指定する事で、横幅が画面いっぱいになっているpタグの範囲の中で左に寄ってしまっている「テキスト」という文字を、中央に移動しているのだと思います。ということは解説の通り「テキスト」という文字自体が、「インライン要素」なのでしょうか？そしてそれを囲むpタグが「テキスト」という文字の「親要素」なのでしょうか？要素というのはあくまでHTMLタグである事が前提のように捉えていましたので不思議に思いました。

例えばタグでテキストを囲んでいる場合、テキスト側から見るとタグは親であり、タグにtext-align: center;をかけるとテキストインラインなのでは中央揃えになるという事でしょうか？そうするとテキストは必ず子であり、それを囲んでいるタグは必ず親になるという考え方で良いのでしょうか？

模写コーディングでここに躓いていたのでほんとに勉強になりました　ありがとうございます！

margin 0 autoってその要素にwidthを指定しないと効かないんでしたっけ？

テキストそのものはインライン要素だったんですね。Pタグやh1タグなどで囲って使うことしかなかったので、ブロックレベル要素だと思い込んでましたσ(^_^;)

女性のIT系YouTuberって自己顕示欲の塊で見れないのが多いけど、この方の動画は控えめな振るまいと視聴者の理解についてを考えてくれてるのが見えるのでとても見やすい。し、とても分かりやすい。

【超入門】今さら聞けない？！positionプロパティ！相対位置・絶対位置って？初心者向け【HTML・CSS コーディング】

(c) Webの神様　細かい位置指定には欠かせない、positionプロパティ！初心者の方はもちろん、なんとなく使えているけど、たまに詰まることがある…

毎回説明がとても分かりやすくて助かります！あと、なつこさん見るとなんかほっこりする(⌒∇⌒)

ちょうどProgateでやってるところでした！なつこさんの説明のおかげでめちゃくちゃ理解が深まりました🙆🏻‍♂️ありがとです！

大変勉強になりました。動画の中でも仰っられていますが、positionとfloatの使い分け、その際の考え方が知りたいです。この場合はこっちを使うけどこっちはこうだから使わないみたいなのがあれば教えていだきたいです。

やはり、テキストや文字より動画のほうがわかりやすいですね、とても参考になりました。ありがとうございます！

いつも無料で動画を発信くださりありがとうございます。理解があいまいなところを学べてありがたいです。いま疑似要素(before after)に関してい自信が持てず、解説を聞きたいです。機会ありましたら何卒お願いいたします。

曖昧に覚えていたのでpositionプロパティに関して自身つきました！ありがとうございます！

いつも為になる情報ありがとうございます！

あるsectionのul liにmargin o autoを指定して中央寄せにしたんですが、その中でabsolute更にtransformでposition指定しているh3が検証で幅を大きくスクロールするとそのsectionのh3だけ連動して動いてしまいます。他のsectionでも同じような事をしているのですがh3は、動きません。困っています。

毎回のわかりやすい説明で大変助かります！ハロウィン仕様の髪型可愛いですね💕

relative が設定されている親要素に対して、absolute が機能するんですよね。なるほど!ありがとうございました!

positionプロパティがなんとなくで、いまいちな感じでした。この動画見て助かりました！ありがとうございます。

やはり、頭の猫ちゃんはハロウィン仕様でしたかw肌がきれいだと、どんな髪色でもすごくよく似合いますね👍なつこ先生のおかげで、なんとかHTML・CSSの勉強が続いています。いつもありがとうございます😊

コーディングど素人です。positionのFixedを使って要素の固定をしたいと思っておりますが、親要素を基準にして固定する場所を自由に決められないかと思っております。可能でしょうか。

にゃんこが頭に乗ってて可愛さが増してる。動画参考になりました。ありがとうございます。

fixed、使ってみます！

IE11はもうすぐサポートが終わるので改めて解説をお願いします🙏

ちょっと発展的な内容ですが、jQureyを使ったハンバーガーメニューでのpositionプロパティが理解できてません。

position: absolute を学びました。。

POPdeKwaiiくて分かりやすい。（そして、これは分かりにくいコメント）

いい

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

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

質問です。度々、すみません。なつこさん。カラーコードについて何ですが、16進数での書き方ですが、1～Fあって2文字セットというのは、分かるのですが、Fは、一番明るい、0は、く暗いと分かるのですが、その間の組み合わせが分かりにくいのですが、覚え方ありますか？よろしくお願いします。

すごく分かりやすいです。これからも、よろしくお願いします。

いつもありがとうございます。楽しく勉強させていただいております。CSSはセレクタの指定が幅広いのでどうしても間違いが起こりがちです。間違わないようにするためにはどのようにすればよろしいですか？

今回の動画は勉強になったのですが、最後に話されていたWEB上での検索で、初心者だからか使い方を把握できなくて…CSSが複製したHTMLコードに反映されてる箇所と反映されない箇所があり困ってます。コードのスペルなど確認してもミスは無いのです😓全てに反映されなければわかりやすいのですが、一部のHTMLコードのみ反映されないのでどうしたらよいか困ってます💦何かアドバイスがあれば宜しくお願いします。

説明スピードが丁度よかったです。

「マトリョーシカ」の例え、面白かったです（笑）

こんにちは、3点ご質問をさせて頂きます。① タグ名/class名/id名等の複数の条件を使って要素を指定する時は「繋げて」記述するとのことですが、動画を見る限り「 .ドット」を入れて区切っておりますが、繋げるのではなく、「ドットで区切って記述」でよろしいのでしょうか？② p.text.red の text 前部に Id を追加する際に「 text の前部の.ドットに変えて#を記述」しておりますが、その「 . 」はclassを表している為でしょうか。また、Redの前部の「 . 」は上述①の理由から書き込まれたままでよろしいのでしょうか？③「 p#text.red 」とのことですが「 p.#text.red 」となると全くの意味が異なるのでしょうか？

<div id =“sample“class=”sample red“>の使い方？使い道だけ何度見てもいまいち分かりません。教えて下さい。

何言ってるか全く理解できなかったのは私だけなのかな。。。初心者つまずき回避動画でつまずく私。。。

全く伝わってこないです。アトムを入れる、、と言うのがあった動画もどうやって入れるのか？英字だらけ。ダウンロード後の指示頂けたら幸いです。あっち行ったりこっち行ったり前後するしひよこのとこまで行くとわかるのかと思いきやそこでもわからず。一回のレッスンさえ？？？でした。よく出る「別動画、、」もどれか分からずなので日付か、タイトルか第何回など欲しいです。頑張りたいけどキツいです。一応昔の大卒です。

【超入門】未経験からWebデザイナーを目指す方必見！現役採用担当者がポートフォリオで見ているポイントについて【Webデザイナー就活応援】

(c) Webの神様　未経験・初心者からWebデザイナーを目指す方に向けて、現役採用担当者のWebディレクターが、ポートフォリオで見ているポイントについて …

未経験・初心者からWebデザイナーを目指す方に向けて、現役採用担当者のWebディレクターが、ポートフォリオで見ているポイントについてお話ししてみました。採用者の視点を参考に、自分をアピールしまくれるポートフォリオを作成してみてください！★以前リクエストいただいた内容です。皆さんいつもありがとうございます🙏

この動画を見るまで挫折してました(- -;)自分のスキル以上のものを作ろうとしていたので、未経験なりにポートフォリオを作ろうと思います！ありがとうございます！

ITリテラシーについて 3:07 からお話いただきありがとうございます。

動画にしていただいてありがとうございます！とても参考になりました！

いつも有益な動画ありがとうございます❗️35歳から未経験でWeb制作会社に転職しようと思ってますが、ポートフォリオで求められる内容に違いがあれば教えて頂けないでしょうか🥺❓

有益な情報ありがとうございます！現在、職業訓練でグループ制作しています。たくさん詰まずいていますが、様々な技術を習得できてやりがいを感じています。もうすぐ就職活動を始めます。その際、ポートフォリオサイトで詰まずいたら、またこちらの動画を参考にさせていただきます！！

実際の採用者側の観点を知ることができてとても参考になりました。現在自分で案件を設定した上でサイトを作っているところなのですが、ポートフォリオに掲載できたらと考えております。質問なのですがトップページのみ制作し、掲載するのはあまり意味がないでしょうか。ポートフォリオに掲載するサイトは下層ページもしっかり作られているべきでしょうか。

作品は最低何個あると印象がいいですか？

次回は、フリーランス編のポートフォリオ作成の仕方をお願いします。

面接時にどれくらいの期間勉強したのかやどれくらいの時間勉強したなどの情報は必要なのでしょうか？また、ポートフォリオはもう既にweb上に掲載してあるものだけに限りますか？

ITリテラシー…ないです。本当に無さ過ぎて情けなくなるのですが、プログラミングがんばります！

専門学校に通っているので参考になりました😊

学校での学習を終えて、転職に向けてちょうどポートフォリオ作成してます。　仕事をしながらの学習で、オリジナル作品もそんなに数を作れず、少ないからどうしよう、、、、と焦っていたところを本当に励ましてもらえました☺️ 多ければいいと言うことでもないんですね！それよりもブラッシュアップ丁寧なインデントに気を配って良質なものにしていこうと思えました☺️❤️

はじめましつ非常に役に立つ動画で助かります。質問なのですがポートフォリオサイトを掲載するのにフリーのサーバーとかで大丈夫なのでしょうか？あとは独自ドメインじゃないとダメなのでしょうか？宜しかったら教えていただけると助かります。

神様の会社に入社したいなと思いました！在宅勤務が可能なら、福島県に住んでいる自分にもチャンスはありますでしょうか？

サムネのグレーのストライプの入ったスーツのなつこ先生は仕事バリバリこなす感じが出てて素敵です、メガネかけてても分かる超絶美人な採用面接官ですね🌟私もなつこ先生に会えるなら、受けたいで〜す✨✨

すいません、質問がかなり多いです。①載せる作品のジャンルは、例えば何が良いでしょうか？これらのジャンルのサイトを載せとけば、ほぼ間違いないといったのがあれば、是非、教えてもらいたいです。②クラウドワークスやランサーズのコンペに出した作品を載せてもokですか？③最低何作品以上載せた方が良いとかありますか？④載せるwebサイトの作品とバナー作品の割合とかは、決まっていますか？

完了です

めちゃくちゃなイケメンだったら採用したくなるよね

【超入門】作業効率爆上がり！必ず覚えておきたい超絶便利ショートカット【HTML・CSS コーディング】

(c) Webの神様　Web学習、コーディング練習に励んでいるみなさん、ショートカットを活用してない、なんてことはありませんか？！コードを覚えるのはもちろん …

めっちゃ分かり易い！ありがとうございます。

知らないことばかりでしたので勉強になりました！！！すべてメモさせていただきました＾＾

使っているものもありましたが、知らないショートカットキーだらけでした(^^;覚えたらかなり時間短縮になりますね！ありがとうございます＾＾

昨日から独学でHTML・CSSの勉強を始め、第一歩としてこの動画にたどり着きました。活用させていただきます！

初めまして、少々質問なのですが、Ctrl＋Ｄですと複製ではなくゴミ箱へ入ってしまうのですが、、設定の問題でしょうか。

なつこ先生はじめまして。最近HTMLの勉強を始めました。ショートカットの中でも特にコーディングに特化したショートカットキーだったのでとても為になりました。知らないものや、知ってたけどコーディングでの使い方の説明や優先順位、MacとWindowsの違いの説明もあり、とても参考になりました。ありがとうございます。今はまだノロノロとコードを書いてますが、ショートカットを使いこなして無駄な時間なくスラスラコードが書けるよう練習します。

初めまして。テキストエディターをVSコードを使用しておりますが、もし可能でしたらこちらのショートカットキー特集をやって頂けたら、今模写コーディングの勉強も並行して行えるので宜しくお願いします。

こんにちは☀勉強になりました！カラフルクローバーのホームページ見させて頂きました！とても美しい。そしてあなたも😍

ネットで調べまくって、メモして覚えたやつがこんな分かりやすくまとまってたなんて、、笑質問1点失礼します。Macでデスクトップにファイルを作るとデスクトップ上から消す時はどのようにしたらいいでしょうか？ターミナルで非表示にしても、Finderで確認すると、実際はデスクトップに分類されたままになってしまいます。