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

[@webgodweb]

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

[@中野智明-u2u]

なつこ先生、お世話になっております。 paddingやmarginなどのboxの定義について、今まで図では理解できてもイマイチ頭の中で整理が出来てなかったのが、とてもわかりやすく解説いただき、とても勉強になりました！ 今後も検証ツールを活用したり、実践につなげていきたいと思います！

[@keitant40]

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

[@webgodweb]

ご視聴ありがとうございます！ モヤモヤが解消できてよかったです✨学習応援しております！

[@凪あす大好き]

「box-sizing: border-box;」がさらっと聞いただけでは分からず困ってました。 一つずつ記述して見せてくれると本当に分かりやすいです。

[@webgodweb]

ご視聴ありがとうございます！お役に立てて嬉しい限りです！！

[@chrischris123]

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

[@webgodweb]

ご視聴ありがとうございます！ そう言っていただけると嬉しいです😂これからも一緒に学習頑張りましょう✨

[@g.m-trade9122]

勉強も捗るし、可愛いしで　幸せです。

[@芦山一寿]

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

[@webgodweb]

ご視聴ありがとうございます😊 お役に立てて何よりです！これからは自信を持って、box-sizing: border-box; を使いこなしてみてください✨

[@user_s1612]

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

[@webgodweb]

コメントありがとうございます😊お役に立てて良かったです🍀これからもよろしくお願いします✨

[@naohattori7996]

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

[@webgodweb]

ご視聴ありがとうございます！そう言っていただけると嬉しい限りです😂今後とも初学者の方に判りやすい内容になるよう努めます🙇‍♀️

[@野村拓也-p3r]

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

[@webgodweb]

こちらこそ、ご視聴ありがとうございます！✨

[@kozukaeleven9040]

頭いい人マジ好きです！

[@webgodweb]

😂😂 コメントありがとうございます！笑

[@トム-r8l4m]

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

[@webgodweb]

こちらこそ、ご視聴頂きありがとうございます！これからも挑戦のお手伝いができれば幸いです！WordPressについても、近いうちに動画テーマで取り上げる予定でおりますので、更新をお待ち頂ければ嬉しい限りです🙏

[@tatsuyanishikawa9982]

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

[@webgodweb]

ご視聴ありがとうございます😊嬉しいお言葉🍀

[@おおいしりか-r5k]

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

[@webgodweb]

こんばんは。視聴ありがとうございます😊リクエストありがとうございます。参考にさせていただき、取り入れていきたいと思います🍀

[@俺が先-x4p]

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

[@webgodweb]

コメントありがとうございます！ よかったです☺️

[@bf7046]

わかりやすい！

[@webgodweb]

コメントありがとうございます！嬉しいです☺️

[@remina442]

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

[@webgodweb]

嬉しいお言葉ありがとうございます😊励みになります🍀

[@seiichin2262]

かわいいー！

[@webgodweb]

いつもご視聴ありがとうございます！😊

[@yasaiitame872]

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

[@Thiarth]

HTML & CSS 初学者です。 ＊（全称セレクター）でborder-boxをつけています。とりあえず、paddingとborderを含めた方が感覚的にわかりやすいと感じるからです。なぜ、基本はcontent-boxなのか教えていただけませんでしょうか？宜しくお願い致します。

[@webgodweb]

コメントありがとうございます！ 下記のページ上部にも、border-boxをデフォルトにすると扱いやすいとの記述があります🙆‍♀️ developer.mozilla.org/ja/docs/Web/CSS/box-sizing 中にはふさわしくないケースもありますが、恐らく全体の少数派だとは思いますので、デフォルトをborder-boxにするのは良い対処かと思います。 ただ、下記の理由から、この動画では全称セレクタでの一括指定などは解説しておりません！参考になれば幸いです。 ・このプロパティ自体の初期値がcontent-boxであること ・挙動の変化を理解して適切に使い分けてほしいこと ・私自身が必要な時にだけborder-boxを指定する対処で慣れてしまっているので、急に移行すると予期せぬ不具合を生む可能性があること

[@hi-pz5vi]

「box-sizing: border-box の活用について」　のbox-sizingが初期値だった場合の例が画面幅の右側だけはみ出てますがwidthの値がcontent-boxにしか適用されないのであれば左側のパディング領域、ボーダー領域もはみ出ると思ったんですけどなぜ左側だけ画面幅に収まっているのでしょうか？ 教えていただけるとありがたいです。。

[@kozukaeleven9040]

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

[@webgodweb]

コメントありがとうございます🤗

[@kozukaeleven9040]

@@webgodweb pc macお使いな感じですがおすすめの機種ありますか？

[@webgodweb]

私はMacBook Proがメインとして使っていますが、Windowsも併用して使っています。Windowsは動画の書き出しや、Webの表示確認に使用しています。Windowsでの表示確認はマストで一番重要な為、一台のみパソコンを買われるのであれば、Windowsをおすすめします💡

[@kozukaeleven9040]

@@webgodweb 返信ありがとうございます！ MacBook画面綺麗で見やすいなと思ったので一台も持ってないのでいいかなと😌 Windows機はbto pc持ってますので、macbook proでどのくらいのスペックがある機種を選べばいいかと思いまして(*´꒳`*) メモリ16Gいるとか、cpuは何世代以降がおすすめととかです👍

[@大豊原]

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

[@webgodweb]

😂😂 いつもコメントありがとうございます！！

[@rem5751]

js.jqueryはやる予定ありますか？

[@webgodweb]

コメントありがとうございます！ はい、順を追ってJavaScriptやjQueryを取り入れたコーディングの動画などを計画しております🙏 画像スライダー、ハンバーガーメニューなど定番のものから扱っていこうと考えておりますので、更新をお待ちいただけると嬉しいです🙇‍♀️

[@rem5751]

@@webgodweb 流石神様です

[@kawa9462]

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

[@webgodweb]

心配しないでください！ 時間をかけて何度も反復しつつ、その間に他の項目を学んで初めて、すっと理解できることもあります💡まずは自分なりに学習計画を立てて、焦らず進めてみてください🙂

[@貧乏脱出したい]

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

[@webgodweb]

ご要望ありがとうございます😊将来的には開設も考えておりますが、今すぐきは、社内リソース的に難しいです(T . T)

[@tume1124]

なるほど、わからん(泣)