親要素を超えて画面いっぱいにラインを引く

ラインでもなんでもいいのだけど、親要素を超えて表示させたいなぁ～と思うことがあったので。

親要素は横幅が決まってて、でもズドンと突き抜けさせたい的な？
とりあえず＜hr＞を使ったラインでやってみた。

1 ラインのクラスを、footerborderに指定。

＜hr class=”footerborder” /＞

2 普通にＣＳＳを決める（お好きなように）

3 全体のＣＳＳに
html { overflow: auto; }

4 bodyのＣＳＳに
overflow-x: hidden;　　←画面いっぱいに広げたときに横のスクロールが広がるのを防ぐ
min-width: コンテンツの幅px;　　←ブラウザを細く小さくしても横スクロールで見れるようにする
（値はコンテンツの幅にする）
position: relative;

5 footerborderのＣＳＳに
margin: 0 -100%;　　←マージンのマイナスをパディングで相殺する（らしい）
padding: 0 100%;　　　100とかそれ以上にしたら横スクロールが広がるので、4のbody {overflow-x: hidden;}で防ぐ
width: 100%;

これでできました。

ただ、サイドメニューがあったときに干渉していたのでどうにかならないか考え中。

新たに「webのいろいろ」というカテを追加しました。