Width、Height、Margin、Paddingの理解
width、height、margin、paddingが要素の寸法と間隔を定義する仕組みを学びます。
「Width、Height、Margin、Paddingの理解」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
ボックスモデルの概念
すべてのHTML要素は長方形のボックスとして描画されます。CSSのボックスモデルは、このボックスを内側から構成する4つのレイヤー、つまりコンテンツ → パディング → ボーダー → マージンを説明するものです。
widthとheight
widthとheightはコンテンツ領域のサイズを設定します。デフォルトでは、パディングとボーダーがこのサイズに追加されます。
<div class="box"></div>
padding
paddingはボーダーの内側にある透明な余白で、コンテンツとボーダーの端の間に位置します。要素のクリック可能な領域および背景が描画される領域の一部です。
<div class="card">Card content</div>
paddingのロングハンド
各辺を個別に設定できます。
<div class="element">Padded element</div>
margin
marginはボーダーの外側にある透明な余白です。他の要素を押しのけます。負のマージンを使うと、要素同士を近づけたり重ねたりできます。
<div class="section">Centered section with bottom margin</div>
マージンの相殺
隣接するブロック要素間では垂直方向のマージンが相殺されます。実際の間隔は2つのマージンの合計ではなく、大きい方の値になります。水平方向のマージンは相殺されません。
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
マージンの相殺を防ぐ
次の条件ではマージンの相殺が防止されます。
- 要素がflexまたはgridの子要素である
- 親要素に
overflow: hiddenが設定されている - 親要素と最初の子要素の間に親要素の
paddingがある - 兄弟要素の間にインライン要素がある
autoマージン
固定幅のブロック要素で水平方向のマージンをautoに設定すると、コンテナー内で中央揃えになります。これは定番の中央揃えのテクニックです。
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
最小値と最大値の範囲でサイズを制限し、さまざまな画面サイズで要素の読みやすさを保ちます。
<div class="content">Readable content column capped at 65 characters wide.</div>
要素の合計サイズを計算する
デフォルトのcontent-boxモデルでは、合計幅はwidth + padding-left + padding-right + border-left + border-rightです。この仕様は意外に感じられることがあり、そのためborder-boxが推奨されます。
論理的なマージンとパディングのプロパティ
最新のCSSには論理プロパティに相当するものとして、margin-block、margin-inline、padding-block-startなどがあります。これらは書字方向に合わせて自動的に適応します。
<div class="card">Logical padding-block/inline</div>
確認問題
デフォルトのボックスモデルで、ブロック要素の描画後の幅に含まれるレイヤーはどれですか？
まとめ
ボックスモデルのレイヤーは、コンテンツ、パディング、ボーダー、マージンです。パディングはボーダーの内側にあり、マージンは外側にあります。隣接する兄弟要素間では垂直方向のマージンが相殺されます。固定幅のブロック要素を中央揃えするには、margin: 0 autoを使用します。
よくある質問
「Width、Height、Margin、Paddingの理解」レッスンは無料ですか？
はい。「Width、Height、Margin、Paddingの理解」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Width、Height、Margin、Paddingの理解」で何を学びますか？
width、height、margin、paddingが要素の寸法と間隔を定義する仕組みを学びます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Width、Height、Margin、Paddingの理解」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Width、Height、Margin、Paddingの理解
- ボーダーのスタイル、幅、色
- Box-Sizing：Content-BoxとBorder-Box
- OutlineとBox-Shadow