【CSS】横幅を画面幅いっぱいにするには

こんにちは。

横幅を画面幅いっぱいにする、字面だけ見ると意味がよくわからないのですが、ワードプレスを使用している方ならなんとなくピンとくるものがあるのではないかと思います。

最近流行り、というか既にスタンダードとなった感のあるシングルカラムレイアウトでサイトを制作する際に、背景に色をつけると真ん中部分だけ色がついて両端が真っ白になる現象、と言えばわかりやすいでしょうか。

ワードプレスでテンプレートを使用してサイト制作する場合によく起こるのですが、これは要素の幅があらかじめ固定されているために起こる現象です。
なので、その中の要素の幅をその固定幅からはみ出させるために、下記のように仲の要素のスタイルを成型してあげましょう

これで、画面幅いっぱいにdiv広がるので、背景に色を付けたときに帯のようにばっちり色が乗るようになるはずです。

あとは「text-align:center;」や「margin: 0 auto;」で中の要素を指定してあげれば、幅は画面いっぱいでコンテンツはきちんと中心に表示されるようになります。

他にも色々と方法があるようですが、少なくともワードプレスを使用するのであればこのやり方が一番簡便かつ確実かと思います。

最初のころ色々試してはレイアウトが崩れたり、うまくいったと思ってスマホで確認すると謎の空白が出てきたりとさんざん苦しめられたので、同じく苦しんでいる方がいたら是非一度お試しください。