コンテンツ幅再調整

幅広、全幅ブロックよりも画面サイズが小さくなった時に、縦スクロールバーがあると、左右のパディングがその半分だけ狭くなってしまうのを何とかしたい。

通常のコンテンツ幅

通常のコンテンツ幅であれば、画面が狭くなっても、左右に1remのパディングがあり、その中に収まる。

オレンジは、段落をグループで囲んだもの。

幅広でも、全幅でも背景色を指定すれば、上下に1.25em,左右に2.375emのパディングがセットされる。これを利用すれば良いのでは無いか。背景を白にしたり、透明にしたりすれば、応用が聞きそうな気もする。

幅広のコンテンツ幅

幅広コンテンツの場合でも、通常のコンテンツ幅と同じ状態にしたい。

背景を白色にした。編集画面では、段落はコンテンツ幅になるが、フロントでは広がる。

全幅のコンテンツ幅

全幅の場合は、背景は、常に全幅でも、その内側のコンテンツは、左右にパディングが効いた状態にしたい。

このブロックは、8桁のカラーで透明度を追加した。

掲載日時: 2023年8月17日(木) 17:39