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

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

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

ブロックレベルで縦横を中央に配置するやり方知りたかったのですごく参考になりました！わかりやすかったです！ありがとうございます！

丁度仕事でフレックスボックスで高さの異なるフレックスアイテムを中央揃えにに出来ず悩んでいた所だったのでとても参考になりました。。

なつさん。いつもためになる動画配信ありがとうございます。希望なのですが、できれば動画の中で使用した上手くまとまった一覧をPDFで置いてほしいです。以前flexboxの時は修正があったので、pdfをダウンロードできるようにしてくれてたのが、非常に役にたってるので。

ワンポイントの注意点などを説明してくれるので知識の整理となりました。チャンネル登録しました！

とても分かりやすい動画ありがとうございます。初めの方の動画から全て見させていただいて独学に活かしております。頭では理解できるのですが、手を動かさないと理解が追い付かないので『テキストエディター』の画面もチラッとで構いませんので映していただけると、動画の一時停止をつかって説明の内容を手元で実践できるようになり助かります！！これからも動画見させていただきます。本当に初心者にもわかりやすい解説ありがとうございます。

分かりやすい説明ですね！

いつも見てます。この動画でイメージ画像をいくつも縦並び、中央配置にするcssの書き方はどうしたら良いですか？何個かは中央配置になるのですが、その中の数個が左に寄ったままで動きません。全てを縦並び、中央配置にしたいのです。アドバイス宜しくお願いします。

メニュー要素の中身を揃えるCSSが検証ツールで見れないのが惜しいです。模写コーディング Sample Companyのヘッダーに挑戦してますが中々くせ者でimg要素の設定が上手くいかず行き詰まっているので基本の復習をしたかったのですが… 苦しんでる間に他の人が ISARA に進んでいる事に焦ってます💦

今回は真ん中寄せ「縦向き編」です！「横向き編」はこちらから ↓https://youtu.be/v4UbH2jqbgg※※※displayプロパティの理解が不十分な方は、先に下記の動画のご視聴をオススメします！※※※↓『プロパティ「display」10分攻略』はこちら ↓https://youtu.be/p5fFAWHj0v4↓『CSSをはじめてみよう』前編はこちら ↓https://youtu.be/iIDpkhgU3gM↓『CSSをはじめてみよう』後編はこちら ↓https://youtu.be/mFGmdHgT7DQ

質問です。margin:0 autoが真ん中揃えで、 margin: auto 0はなぜ効かないのでしょうか。ブロックは縦に余白がないからですか？margin: auto 0は使わないものとして認識していいのでしょうか

後半10分以降で、音が途切れてる部分があります

トランスフォームで-50%を指定するとどこに-50%が聞くのですか？

【未経験OK？】Webデザイナーの厳しい現実をぶっちゃけます。【どんなスキルが必要？】

(c) Webの神様　Webデザイナーというお仕事に興味を持っている方、今まさにWebデザイナーを目指して頑張っている方にこそ伝えたい、「Webデザイナーの …

Webデザイナーというお仕事に興味を持っている方、今まさにWebデザイナーを目指して頑張っている方にこそ伝えたい、「Webデザイナーの現実」について語ってみました。知り合いの体験談ぐらいのライトな気持ちで聞いて、参考にしてもらえると嬉しいです。↓↓↓この動画をご覧の方におすすめ↓↓↓【超入門】未経験からWebデザイナーを目指す方必見！現役採用担当者がポートフォリオで見ているポイントについて【Webデザイナー就活応援】https://youtu.be/3KSdN6q1_yk【Webデザイナー就職・転職】未経験でも本当に採用される？勉強がきつくて挫折しやすい？https://youtu.be/aANyDNEoYyc【Web・IT業界への就職・転職】新卒未経験→現役Webディレクターが、これまでの経緯について語ってみます【質問コーナー】https://youtu.be/qFxtdreGzcgこういう人がプログラミングスクールに通ったら後悔する【Webデザイン・プログラミング未経験の方へ】https://youtu.be/LaepvVXiSGk【Web制作】損害賠償、裁判？！フリーランスで案件獲得の前に、必ず知っておいてほしいことがあります【未経験・初心者の方へ】https://youtu.be/Ku4BbZOSJzo

私は一度Webデザイナーとして事業会社に就職したものの挫折しドロップアウトした人間ですが、やっぱり興味が捨てきれなくてまたWebデザイナーやりたくて勉強しています。ただ動画でも仰っているように会社によって業務内容がまったく違いすぎて、短期間の内に辞めていく方が多かったので私も就職するのが怖いなぁという気持ちがあります…。Web制作会社、Web広告代理店、事業会社の業務内容や働き方の傾向、ざっくりした違いなどまとめていただけたら嬉しいです。

私も勢いでサイト制作、管理をさせていただき15年、いろいろ経験させていただき納得させていただくご意見と思います、マーケティングにつては今後は必須条件と思います。付加価値を付ける意味でもマーケティングについてちゃんと意見を聞いてもらえるようにしておくべきと思います。まだまだ、プロダクトアウトの考え方が抜けておられない経営をしていらっしゃる方が多いです。

数ヶ月前から、開発者として働き始めました。HTMLとCSSがやっと使いこなせて来た気がします。まだまだですが…全ての動画が分かりやすくて助かります。私はプログラマーとして仕事をしていますが、やはりマーケティング目線のwebデザインを求められる事があります。全く分からず、他の似たようなサイトの真似をしているのですが少し悔しい気もしています。何をどこから勉強して良いか、よく分からないので今までの経験や、アドバイスを動画にして頂けますでしょうか。今後も楽しみにしています。

HTMLからCSS、そして現在はJavaScriptの習得に奮闘中です。いつも動画を参考にさせていただいております。全力で応援されている感、感じてます。

私はWEBデザイナーに憧れて、2004年にWEB制作会社に就職しましたが、Illustrator、Photoshop、Fireworksの操作を覚えるのが苦手でデザインもイマイチでした。ただ、HTML、CSS、PHP、Javascript、Perlを覚えるのは苦ではなかったので、次第にWEBプログラミングをメインに移行しました。今はWEB業界を離れ、Javaメインで仕事をしておりますが、WEB業界で培った経験があるからこそ今の仕事に就けたと思っております。デザインが苦手な方はPHPとJavascriptに特化すると良いかと思います。

今日の髪型めちゃくちゃお似合いで素敵です！話の内容もすごく聞きたい内容だったので、ありがたい限りでした！今後の動画も楽しみにしてますね！

見てよかったです。webデザインの勉強して1年くらい経ち今、少しずつ営業しています。以前コーディングを挫折しましたが、最近すこしはできないといけないと思いました。マーケティングも学ぼうとした3ヶ月前、デザインの勉強ができなく今は一旦放置しています。webデザイナーはデザイン以外の仕事が多く、勉強するのも仕事するのも大変ですよね😅

webの勉強を始めてどれくらいの量と時間なのかを知りたいですphp覚えるのに何時間かかったのかとかです

今絶賛勉強中のものです。WEBデザインに興味を持ち始め、やりたい仕事が見つかった為、今の会社を辞めてWEB制作会社に転職を考えてます。退勤後にしか勉強出来ないのでもっと頑張ります‼︎

いつも、動画を見させてもらってます！動画のリクエストです。最近のオシャレなWebサイトでよく見かけるCSSで三角や台形を作る方法、もしくは、key visual内でbackgroundの背景画像に、シュッとした台形のようなデザインの上にタイトルが表示されたようなデザインのコーディング動画を希望します。

学習中なので激励が嬉しい！

就職活動を始めて、納得いかず現在Webデザイナーを目指しています。未経験ながらポートフォリオを作成して、もうすぐ面接に取り組もうと思っています！良ければ面接に関する内容の動画を投稿していただけませんか？

激励タイムのガッツポーズ永遠に見ていたい

いつもありがとうございます。Linuxのシェルとかコマンドラインの実践とか企画したらいいと思います。英語では色々ありますね

今日のドリンクコーナー🥤いいっすね！

HTMLなどの勉強をどのようにしたかお伺いしたいです。

40代でWEBデザイナーに転職できるでしょうか？

こんな美人の下で働きたいと思っていざ入社したら実際はドS上司なつこ先輩だったりして🤣

Webデザイナーを目指すにあたって、一般的な社会人としてのスキルも役立ちそうですね！なつこさんの説明、すごく腑に落ちました！！ありがとうございます！

【超入門】「イライラリンク」になってない？aタグの正しい使い方【HTML・CSS コーディング】

(c) Webの神様　CSSをはじめたばかりの皆さん、ついつい「イライラリンク」を設定していませんか？「aタグ」の正しい使い方を知らないと、思わぬところで …

＜目次＞・オープニング 0:00・今回の概要 0:36　①<a>タグの性質を理解しよう 0:48　②うまく押せない！イライラリンク回避法 1:36　③リンクを別タブで開く 4:26・今回のまとめ 6:05↓『CSSをはじめてみよう』前編はこちら↓https://youtu.be/iIDpkhgU3gM↓『CSSをはじめてみよう』後編はこちら↓https://youtu.be/mFGmdHgT7DQ

なつこ先生は、アナウンサーレベルにお綺麗な方ですね✨もともと私が作っていた簡素すぎるグローバルナビwが、動画のようにaタグにpaddingを入れて、テキストの後ろに背景色を加えると押しやすくて見栄えもとても良くなりました！ありがとうございます😊

プロゲート一通りやったものですが、すごい！実務経験ないから分かんないけど、そこが知りたかったってところを的確に教えていただけている気がします！

分かりやすい動画をありがとうございました。　今後の動画も楽しみにしています。もしお手数でなければ、動画で使用されているファイルもダウンロードできるようにしていただけると、とても助かります。

分かりやすい・聞きやすい動画でいつも参考にさせていただいています。本動画内の3:35頃の内容についてですが、block 要素にしての理屈はとてもよく理解できました。以下、そこでのちょっとした疑問です。paddingの設定を子要素のaタグに移すと、aタグの領域が広がってリンクのクリックがしやすくなるのは分かるのですが、この場合の親要素liタグの範囲はどうなっているのですか？背景色が変わっていないという事は、aタグと同じ大きさなのでしょうが、何故paddingを削除したのに範囲が変わらないのでしょう？この点をもう少し詳しく教えていただけると幸いです。

為になる情報いつもありがとうございます。質問、いいでしょうか。インライン要素であるaタグの中にpタグを入れる事はできない様ですが、よくheader内ではaタグの中にhタグが入って記述されたサイトを見かけます。aタグの中にhタグを入れるのは大丈夫なのでしょうか？

リストタグのpaddingはそのままで、このように、<a href=”#”><li>HOME</li></a>aタグをliの外に持っていくという方法は有り得ますか？

paddingが必要とは知らなかったです！神様ありがとう😭

範囲を広げるテクニックのポイントは 2:56 から

最近こちらのチャンネル見つけて勉強させていただいています。質問なのですが.mainをdisplay: flex;に指定した場合もaタグの指定をdisplay: block;を指定するのでしょうかざっくりした質問ですみません💦なんだかごっちゃになってしまって｡｡｡よろしくお願いします。

ブロックレベル要素に指定したのにaタグが横一列に並んでいるのはなぜですか？

【初心者向け】jQueryで作るハンバーガーメニュー3種類！スライドメニュー、フェードインなどレスポンシブデザイン【HTML・CSS コーディング】

(c) Webの神様　jQueryではンバーガーメニューを実装する方法を、初心者向けのシンプルなもので3種類紹介します！初めての方も是非チャレンジしてみて …

↓↓↓jQueryの読み込み方・アコーディオンメニューの作り方の動画はこちら↓↓↓【超初心者向け】jQuery最新版の読み込み・使い方解説2021！初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】https://youtu.be/Vw7xzB78uGg↓↓↓今回の動画で扱った内容の見本サイト、ソースコードはこちら↓↓↓★見本サイトhttps://webgodweb.com/ex/hamburger_menu/★ソースコード、ファイル一式のダウンロードhttps://webgodweb.com/download.php?youtube=8BItmm-CQvc【超入門】初心者向けレスポンシブデザイン完全攻略！メディアクエリ等解説【HTML・CSS コーディング】https://youtu.be/Z_hzEcAzz6w【超入門】初心者必見！模写コーディングをやってみた実践編 Part3 レスポンシブデザイン編【HTML・CSS コーディング】https://youtu.be/oGV1dmomUP0

前回のアコーディオンメニュー作成の動画で用いた.on(“click”,と今回用いた.click(の違いについて知りたいです！よろしくお願いします！

上からスライドとフェードインを実装してハンバーガーメニューを押すと<nav id=global_nav style”display:block;”>になってから✖️印を押すと<nav id=global_nav style”display:none;”>となりPC画面にした時にリストが消えてしまうのですが何か防ぐ方法はありますでしょうか？

ハンバーガーメニューの実装方法、実践的でとてもわかりやすいです！たすかってます！動画を上げてくれてありがとうございます！

動画いつも楽しく拝見させていただいています。ほとんどなつこさんの動画で学習しています。一式ダウンロードのソースコードで、フェードインの設定に関して質問させてください。設定後、ウィンドウの画面を小さくするとハンバーガーメニューが表れます。それをクリックします。メニューが表れ、ハンバーガーメニューは×印になります。×印をクリックします。その後、画面を大きくするとメニューが消えてしまいます。ハンバーガーメニュー操作後に画面を大きくしてもメニューが表示されるようにするにはどうしたらいいでしょうか。

ハンバーガーメニューでも遷移画面が右から出てきて、文字が左から出てくるのは難しい。リクエストとしてトップにもどるボタンをお願い致します。

ハンバーガー大好きな僕にぴったりな神回ですね！

なつこさんはどうやってコーディングやプログラミングを習得しましたか？また、なつこさん自身はどのように学習したら最速で習得出来ると思いますか？

ばつ印を作る際、rotateを45度、-45度にしたのですが、きれいなバツになりません(線の中点同士で交わらない)。何が原因だと思いますか？

なつこさん、もうすぐ1万人ですね☺️これからも応援してます😌

なつこちゃんありがとう！！！！

神回

声すっきゃぁ

【超入門】何となく使ってない？ボックスモデル＆box-sizingプロパティ完全理解への道！【HTML・CSS コーディング】

(c) Webの神様　CSSのボックスモデル、「box-sizing: border-box;」など…ちゃんと理解できてますか？ 30分で、ボックスモデルのあれこれを完全解説しま …

CSSのボックスモデル、「box-sizing: border-box;」など…ちゃんと理解できてますか？30分で、ボックスモデルのあれこれを完全解説しました！※今回もハロウィン仕様ですが、ギリギリハロウィンに間に合わなくてすみません。。↓↓↓この動画で扱う内容は、CSSのdisplayプロパティを理解している方が断然分かりやすいと思います。↓↓↓displayプロパティがまだピンとこない、もしくは、まだまだ理解が甘いという方は、「displayプロパティ」の動画を先にご覧ください。【超入門】CSSプロパティ「display」が使いこなせない方へ！10分攻略【HTML・CSS コーディング】https://www.youtube.com/watch?v=p5fFAWHj0v4

全く理解できなかったcontent、padding、border、marginの関係が、完璧に理解できました😯さすが神様！border-boxも完璧！めっちゃ簡単に理解出来ました！神様凄い👍👍👍

超絶カワイイ✨🎃私は初心者ですが、なつこ先生が教えてくれるとモチベーションが上がります！ありがとうございます😊

「box-sizing: border-box;」の理屈がようやく理解できました。ずっと『モヤモヤ』していたので、“なるほど！“と言う感じでした。有難う御座いました。

説明だけでなく、活用の仕方、まとめを動画に構成してくださったお陰で今までピンとこなかった概念が鮮明になりました！本当にありがとうございます！

なつこせんせいの説明がとってもわかりやすいです！さすが教員免許持っているだけありますね！言葉のチョイスが秀逸で、スッと入ってきます。何度も視聴して身につけたいです！

とてもわかりやすいです！理解できました！ありがとうございます^^

めっちゃ分かり易いです！可愛いしありがとうございます😊

いつも、なつこさんの動画楽しみにしています。本当に分かりやすくて助かってます。画像のスライドについての動画がみたいです。slickとか…それ以外でもなんでもいいです。

講師とか先生とかやってみえるんですかね。分かりやすい。

box-sizingプロパティを、この動画ではっきり理解できました。ありがとうございます。

81歳、身障者（脳梗塞）の私でも理解できます。基本概念の説明に及んでいるからだと思います。丁寧な説明ありがとうございます。wordpressの企画も楽しみにしています。挑戦大好きな者です。３年前にも畑違いの、会社法関連での本人訴訟に挑戦、地裁への提訴で、訴状作成、法廷維持、そして勝訴判決もいただきました。今は、IT挑戦です。なつこ先生が、逸失利益の話をしていましたね。今は本職（中小企業診断士）の仕事をやめている私には、IT挑戦をやめることは、人的会計的には、機会損失となります。挑戦の機会を与えていただきありがとうございます。

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

わかりやすい！

めっちゃ聞き取りやすいです。

頭いい人マジ好きです！

超入門なのに何回見ても頭が理解してくれません泣

わかりやすいし、ほんとにこんな感じの嫁さん欲しいです😌

悪魔様🦹‍♀️ではなくて、ごっちん女神様です🗽

なつこさんのサブチャンネル希望