14.5｜もう崩れない！ CSS必須のボックスモデル
⚠️ preproからのお願い
このチャンネルは「修行の場」です。「コピペは原則禁止」。
自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。
一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です！
〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜
ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ！
講師の東郷です。
今回の0.5回シリーズは、CSSのコーディング効率と正確性の基本となる「ボックスモデル」を解説します。
「paddingとmarginの適切な使い分けがわからない」、「要素の幅が計算通りにならない」といった問題は、すべてボックスモデルの理解で解決できます。
本動画では、要素を形作る4つのエリアの概念から、実務のコーディングで今や必須となっている box-sizing: border-box の設定理由まで、実例を交えてロジカルに解説します。
デザイン通りの美しいWebサイトを迷わず実装できる、一生モノの基礎知識をアップデートしましょう！
【この動画で学べること】
- ボックスモデルの概要
- marginとpaddingの違い
- marginの相殺
- widthとボックスの幅の関係
- box-sizingによるサイズのコントロール
【preproのカリキュラム方針】
preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。
本編： 15分でサクサク進むメイン講義
0.5回シリーズ： 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義
この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。