ヘッダーやフッター部分、またボタン要素など、
横幅を画面いっぱいに広げたい時ってありますよね。
先日そんなのを作っていたら、思いのほかやり方が色々あったり、
レスポンシブを考えた時にCSSが崩れてしまったりと、
意外と大変だったので、やり方をまとめてみました。
最初に作ったもの
まず最初に作ったものはこんな感じです。
See the Pen oNvbmoX by masashi kurashima (@masashikurashima) on CodePen.0
これの「送信する」の部分の横幅を画面いっぱいに広げたいと思います。
方法１：「left: 50%;」と「transform: translateX(-50%);」
See the Pen KKPzYOW by masashi kurashima (@masashikurashima) on CodePen.0
submitクラスに追加したコード
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
説明
width: 100vw;
100%ではなく、100vwに変更。
vwは「viewport width」という単位で、ウィンドウの幅に対する割合です。
100vwにすると画面の幅いっぱいになります。
しかしこれだけだと、開始位置が親要素に依存してしまいます。
そこで以下のコードも追加。
position: relative;
left: 50%;
transform: translateX(-50%);
position: relative;
で相対位置への配置ができるようにし、
left: 50%;
で真ん中に配置
さらに
transform: translateX(-50%);
で左に50%分移動させる。
これで真ん中にそろいました！
問題点
この方法だとposition: relative;にしないといけないのですが、
この部分はもともと position: sticky;にしていて、
スクロール時に固定させるようにしていたのでした……
position: relative;が優先されて下に固定されたままになってしまったので却下！
方法2：calc()関数で幅を計算
See the Pen XWrdwRP by masashi kurashima (@masashikurashima) on CodePen.0
submitクラスに追加したコード
margin-left: calc( ( ( 100% – 100vw ) / 2 ) + 8px );
margin-right: calc( ( ( 100% – 100vw ) / 2 ) + 8px );
説明
これは面白いやり方でした。
calc()という関数でCSS内で計算式を書くことができます。
要素の幅（100%）から画面の幅（100vw）を引いて、割る2をすることで片方ずつのmarginを計算しています。
最後に+ 8pxをしているのはスクロールバーを加味してです。
……文字で説明しても良くわかんないですよね。
図にするとこんな感じです。
calc()は他にも色々な応用ができそうですね。
ただ、ここでも問題が…
問題点
画面の幅をちょっとずつ狭めた時に、ある一定の幅より狭くなるとCSSが崩れてしまうことが発覚！
これは、親要素の幅（100%）より画面の幅（100vw）の方が狭くなった時に、
calc()の計算結果が逆転してしまう為でした。
レスポンシブを無視すればこれで良かったけど、今回はダメですね。
うーん…惜しかったのになー
方法3：ネガティブマージンで幅を広げる
See the Pen jONqoQz by masashi kurashima (@masashikurashima) on CodePen.0
submitクラスに追加したコード
width: 100%;
margin: 0 -500%;
padding: 0 500%;
説明
marginにマイナスの値を設定する、「ネガティブマージン」というものを使います。
まずは
margin: 0 -500%;
を設定して、横幅をめいっぱい広げます。
ただ、これだけだと中身の幅が狭いままなので、画面から消えます…
そこで、
padding: 0 500%;
も設定します。
これで…
はい！ちゃんと表示されました！
しっかり中央にそろっていて、画面の幅を変えてもCSSが崩れません！
無事完成！！
まとめ
CSSで、親要素を無視して子要素の幅をいっぱいに広げる方法を3種類ご紹介しました。
いかがだったでしょうか？
今回私が作ったものは、最後に紹介したネガティブマージンを使う方法を採用しましたが、
実は、調べ始めた時に、この方法が一番最初に出てきて、簡単に実装できたのです。
けれど、なんとなく「500%っていう数字使うのヤダな～」って思って、他の方法を調べ始めて…
なんやかんや色々と遠回りをして、結果的に最初にやったやり方が一番良かったってオチです笑
まあ結果的に色々なやり方が分かって良かったです。
たまには遠回りするのもいいですね！勉強になりました！
使う場所によって、どのやり方も生かせると思うので、ぜひ参考にしてみてください。
ではまた！
