テーマ作成進捗 (3)

Margin Collapsing(マージンの相殺)

昨日見出しのスタイルの挙動がちょっと変なことに気づきました。というのも隣接する2つの margin の範囲がかぶっているのがどうもおかしいと思ったんですね。

見出しのマージンとその上の段落のマージンが同じ大きさになってしまっています。
見出しの margin とその上の段落の margin が同じ大きさになってしまっています。

このボヤキを見ていた@sharuくんがなんと答えを教えてくれたのですが、これはいわゆる「マージンの相殺」というものが起こっているようです。

上のページより、

  • 垂直方向にそれぞれのボックスが margin-bottom, margin-top を持った状態で並んでいるとき、どちらかのボックスの margin が大きい方が優先されて、小さいほうのボックスの margin はそれに吸収されてしまう
  • これは双方のサイズが等しい場合でも起こる

ということらしいです。

この「マージンの相殺」については以上の要因以外でも発生するようで、今後このようなことが起こったらまず「マージンの相殺」を疑ってみようと思います。

どうもありがとう!

2021/02/13: 投稿ページのレイアウトを固定ページと統一

だって右側誰も見ない

2021/02/13: アフィブロっぽいやつ

ラインマーカーみたいな下線は簡単に仕組みが理解できたのでよかった

注意

なんだよオイオイオイ

ポイント

なんだよコレコレコレ

2021/02/12: ヘッダーを固定した

position プロパティーの練習。とてもいい感じにできたと思います。あとはJavaScriptで特定要素を通り過ぎたら透明になるとかやってみたいですね。まだ遠い未来の予感がするけれど…。

2021/02/12: トップへ戻るボタン

これはCSSだけで実装しました。簡単な仕組みになっているので良ければソースを覗いてみてください。しかしながら、scroll-behaviorという新しいプロパティーを使ったので、ブラウザ(Safariとか)によっては滑らかに動かないこともあるみたいです。これもJavaScriptかあ…。

box-shadowをborder代わりに使う

このボタンを作る途中で、border を使うとサイズが変わってしまうのがあまり好ましくないと感じたので、すこしインターネットを徘徊していたら「box-shadowをborder代わりに使う」という面白い手法を見つけたので、このボタンに使ってみました。