2025/4/3 「HTML/CSS基礎⑥」の記録です。
講師：⼤浜 信彦先生
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
MarginとPaddingの違いとは？
ウェブデザインやCSSで要素の間隔を調整する際に、marginとpaddingは欠かせないプロパティです。
Marginは自由度が高い反面、設計上注意が必要なプロパティです。
1. Marginの特徴
- 要素の外側にスペースを作る。
- 隣接する要素との間隔を調整する。
- 癖があるポイント：
- マージンの相殺: 隣り合う要素のmarginが重なり、実際のスペースが小さくなる場合があります。
- 他の要素や親コンテナに影響を与えやすい。
- レスポンシブデザイン時に予期しない余白を生むことがある。
2. Paddingの特徴
- 要素の内側にスペースを作る。
- コンテンツと要素の枠の間隔を調整する。
- 比較的直感的で予測しやすい挙動を持ち、設計が安定する。
MarginとPaddingの使い分け
- Marginは要素同士の間隔を調整したい場合に使用。
- Paddingは要素の内部スペースを確保したい場合に使用。
CSSコード例
/* Marginを使った例 */
.container {
margin: 20px; /* 外側にスペースを作る */
}
/* Paddingを使った例 */
.box {
padding: 20px; /* 内側にスペースを作る */
}
float/clear プロパティ（回り込み／回り込み解除）
float: 回り込みの方向;
要素を左右に寄せるために使用されます。
画像やテキストを並べる際によく使われてきたプロパティですが、現在はフレックスボックスやグリッドが登場して使用頻度が減っています。
clear: 解除の方向;
回り込み（floatされた要素）を防ぐために使用されます。
例えば、要素が次の行から表示されるようにする場合に便利です。
overflow: hidden;
要素の内容がその親要素（ボックス）のサイズを超えた場合に、超えた部分を非表示にするためのCSSプロパティです。
このプロパティを使うことで、要素のコンテンツがはみ出さないように制御できます。
