【超入門】何となく使ってない？ボックスモデル＆box-sizingプロパティ完全理解への道！【HTML・CSS コーディング】
Тәжірибелік нұсқаулар және стиль
CSSのボックスモデル、「box-sizing: border-box;」など…ちゃんと理解できてますか？
30分で、ボックスモデルのあれこれを完全解説しました！
※今回もハロウィン仕様ですが、ギリギリハロウィンに間に合わなくてすみません。。
↓↓↓この動画で扱う内容は、CSSのdisplayプロパティを理解している方が断然分かりやすいと思います。↓↓↓
displayプロパティがまだピンとこない、もしくは、まだまだ理解が甘いという方は、「displayプロパティ」の動画を先にご覧ください。
【超入門】CSSプロパティ「display」が使いこなせない方へ！10分攻略【HTML・CSS コーディング】
• 【超入門】CSSプロパティ「display」...
＜目次＞
・オープニング 0:00
・はじめに 0:46
・ボックスって何？ 1:04
・ブロックボックスとインラインボックスの違いは？displayプロパティの役割って？ 1:25
・ボックスモデルとは？ 5:19
・box-sizingプロパティとは？ 14:39
box-sizing: content;について 15:56
box-sizing: border-box;について 17:18
・box-sizing: border-box; の活用について 20:41
・まとめ 25:29
-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#コーディング #プログラミング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-clover.co.jp/
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ... プレビュー
【プランの詳細・お申し込み（MENTA）】
menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
Пікірлер: 49
CSSのボックスモデル、「box-sizing: border-box;」など…ちゃんと理解できてますか？ 30分で、ボックスモデルのあれこれを完全解説しました！ ※今回もハロウィン仕様ですが、ギリギリハロウィンに間に合わなくてすみません。。 ↓↓↓この動画で扱う内容は、CSSのdisplayプロパティを理解している方が断然分かりやすいと思います。↓↓↓ displayプロパティがまだピンとこない、もしくは、まだまだ理解が甘いという方は、「displayプロパティ」の動画を先にご覧ください。 【超入門】CSSプロパティ「display」が使いこなせない方へ！10分攻略【HTML・CSS コーディング】 kzread.info/dash/bejne/ommaqKOQeM2Wppc.html
勉強も捗るし、可愛いしで 幸せです。
説明だけでなく、活用の仕方、まとめを動画に構成してくださったお陰で今までピンとこなかった概念が鮮明になりました！ 本当にありがとうございます！
@webgodweb
3 жыл бұрын
コメントありがとうございます😊お役に立てて良かったです🍀これからもよろしくお願いします✨
「box-sizing: border-box;」の理屈がようやく理解できました。ずっと『モヤモヤ』していたので、“なるほど！“と言う感じでした。有難う御座いました。
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます！ モヤモヤが解消できてよかったです✨学習応援しております！
めっちゃ分かり易いです！ 可愛いしありがとうございます😊
@webgodweb
3 жыл бұрын
こちらこそ、ご視聴ありがとうございます！✨
超絶カワイイ✨🎃 私は初心者ですが、なつこ先生が教えてくれるとモチベーションが上がります！ ありがとうございます😊
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます！ そう言っていただけると嬉しいです😂これからも一緒に学習頑張りましょう✨
わかりやすかったです。ありがとうございました。
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます😊嬉しいお言葉🍀
全く理解できなかったcontent、padding、border、marginの関係が、 完璧に理解できました😯 さすが神様！ border-boxも完璧！ めっちゃ簡単に理解出来ました！ 神様凄い👍👍👍
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます😊 お役に立てて何よりです！これからは自信を持って、box-sizing: border-box; を使いこなしてみてください✨
とてもわかりやすいです！理解できました！ありがとうございます^^
@webgodweb
3 жыл бұрын
嬉しいお言葉ありがとうございます😊励みになります🍀
めっちゃ聞き取りやすいです。
@webgodweb
3 жыл бұрын
コメントありがとうございます！ よかったです☺️
わかりやすい！
@webgodweb
3 жыл бұрын
コメントありがとうございます！嬉しいです☺️
なつこせんせいの説明がとってもわかりやすいです！さすが教員免許持っているだけありますね！言葉のチョイスが秀逸で、スッと入ってきます。何度も視聴して身につけたいです！
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます！そう言っていただけると嬉しい限りです😂今後とも初学者の方に判りやすい内容になるよう努めます🙇♀️
いつも、なつこさんの動画楽しみにしています。本当に分かりやすくて助かってます。 画像のスライドについての動画がみたいです。slickとか…それ以外でもなんでもいいです。
@webgodweb
3 жыл бұрын
こんばんは。視聴ありがとうございます😊リクエストありがとうございます。参考にさせていただき、取り入れていきたいと思います🍀
かわいいー！
@webgodweb
3 жыл бұрын
いつもご視聴ありがとうございます！😊
頭いい人マジ好きです！
@webgodweb
2 жыл бұрын
😂😂 コメントありがとうございます！笑
講師とか先生とかやってみえるんですかね。分かりやすい。
81歳、身障者（脳梗塞）の私でも理解できます。基本概念の説明に及んでいるからだと思います。丁寧な説明ありがとうございます。wordpressの企画も楽しみにしています。挑戦大好きな者です。３年前にも畑違いの、会社法関連での本人訴訟に挑戦、地裁への提訴で、訴状作成、法廷維持、そして勝訴判決もいただきました。今は、IT挑戦です。なつこ先生が、逸失利益の話をしていましたね。今は本職（中小企業診断士）の仕事をやめている私には、IT挑戦をやめることは、人的会計的には、機会損失となります。挑戦の機会を与えていただきありがとうございます。
@webgodweb
3 жыл бұрын
こちらこそ、ご視聴頂きありがとうございます！これからも挑戦のお手伝いができれば幸いです！WordPressについても、近いうちに動画テーマで取り上げる予定でおりますので、更新をお待ち頂ければ嬉しい限りです🙏
「box-sizing: border-box の活用について」 のbox-sizingが初期値だった場合の例が画面幅の右側だけはみ出てますがwidthの値がcontent-boxにしか適用されないのであれば左側のパディング領域、ボーダー領域もはみ出ると思ったんですけどなぜ左側だけ画面幅に収まっているのでしょうか？ 教えていただけるとありがたいです。。
HTML & CSS 初学者です。 ＊（全称セレクター）でborder-boxをつけています。とりあえず、paddingとborderを含めた方が感覚的にわかりやすいと感じるからです。なぜ、基本はcontent-boxなのか教えていただけませんでしょうか？宜しくお願い致します。
@webgodweb
10 ай бұрын
コメントありがとうございます！ 下記のページ上部にも、border-boxをデフォルトにすると扱いやすいとの記述があります🙆♀️ developer.mozilla.org/ja/docs/Web/CSS/box-sizing 中にはふさわしくないケースもありますが、恐らく全体の少数派だとは思いますので、デフォルトをborder-boxにするのは良い対処かと思います。 ただ、下記の理由から、この動画では全称セレクタでの一括指定などは解説しておりません！参考になれば幸いです。 ・このプロパティ自体の初期値がcontent-boxであること ・挙動の変化を理解して適切に使い分けてほしいこと ・私自身が必要な時にだけborder-boxを指定する対処で慣れてしまっているので、急に移行すると予期せぬ不具合を生む可能性があること
js.jqueryはやる予定ありますか？
@webgodweb
3 жыл бұрын
コメントありがとうございます！ はい、順を追ってJavaScriptやjQueryを取り入れたコーディングの動画などを計画しております🙏 画像スライダー、ハンバーガーメニューなど定番のものから扱っていこうと考えておりますので、更新をお待ちいただけると嬉しいです🙇♀️
@rem5751
3 жыл бұрын
@@webgodweb 流石神様です
悪魔様🦹♀️ではなくて、ごっちん女神様です🗽
@webgodweb
2 жыл бұрын
😂😂 いつもコメントありがとうございます！！
わかりやすいし、ほんとにこんな感じの嫁さん欲しいです😌
@webgodweb
2 жыл бұрын
コメントありがとうございます🤗
@kozukaeleven9040
2 жыл бұрын
@@webgodweb pc macお使いな感じですがおすすめの機種ありますか？
@webgodweb
2 жыл бұрын
私はMacBook Proがメインとして使っていますが、Windowsも併用して使っています。Windowsは動画の書き出しや、Webの表示確認に使用しています。Windowsでの表示確認はマストで一番重要な為、一台のみパソコンを買われるのであれば、Windowsをおすすめします💡
@kozukaeleven9040
2 жыл бұрын
@@webgodweb 返信ありがとうございます！ MacBook画面綺麗で見やすいなと思ったので一台も持ってないのでいいかなと😌 Windows機はbto pc持ってますので、macbook proでどのくらいのスペックがある機種を選べばいいかと思いまして(*´꒳`*) メモリ16Gいるとか、cpuは何世代以降がおすすめととかです👍
なつこさんのサブチャンネル希望
@webgodweb
3 жыл бұрын
ご要望ありがとうございます😊将来的には開設も考えておりますが、今すぐきは、社内リソース的に難しいです(T . T)
なるほど、わからん(泣)
超入門なのに何回見ても頭が理解してくれません泣
@webgodweb
3 жыл бұрын
心配しないでください！ 時間をかけて何度も反復しつつ、その間に他の項目を学んで初めて、すっと理解できることもあります💡まずは自分なりに学習計画を立てて、焦らず進めてみてください🙂