「要素を画面いっぱいにしたいけど、どうしても内側になってしまう…」
という場合の対処方法を説明します。
この記事を読んでできること
・要素を画面いっぱいにする方法を理解することができる
・コピペするだけで、要素を幅いっぱいに表示させることができる
横幅についての基本知識
今回、下記のように画面いっぱいに隙間なく要素を広げる為の手順をご説明します。
【横幅いっぱいにした サンプル】
画面いっぱいに幅を広げる場合、前提条件として
広げたい要素が「body直下かどうか」で条件が変わります。
div要素(赤で囲まれている)はbody直下ですね。
img要素(青で囲まれている)はbody直下ではない要素です。
まず、横幅を広げたい要素がどちらになるのかを確認した上で下記をお進みください。
body直下の要素を横幅いっぱいにしたい
この場合、3つの条件で実現することができます。
順に説明します。
body直下にはブロック要素を配置する
ブロック要素(div.headerなど)はwidthなどの幅や高さの指定をすることができます。
また、多数の要素を大きく囲うことができます。
幅の指定 + 分かりやすさ の為にdiv要素を配置しましょう。
marginとpaddingを0にする
具体的な指定内容の1つです。
bodyのmarginとpaddingを0にしましょう。
bodyはサイト全体を囲うhtmlタグです。
これを画面いっぱいにするために、外側の空白のmarginを0にします。
あわせて、内側の空白のpaddingも0にします。
上記はbodyにpaddingをいれてしまった場合です。
全体の内側に食い込むように余白ができてしまっています。
paddingは内側、marginは外側に余白を作ってしまいますので、
これを防ぐためにそれぞれ「0」を指定してあげましょう。
width:auto/「width:100%」+「box-sizing:border-box」について
上記2つを指定すると、通常は既に画面いっぱいになっています。
それはwidth（横幅）の初期値がautoであるためです。
ブロック要素に「width:auto」が指定されていると親の幅いっぱいに広がります。
また、「width:100%」を指定しても横幅いっぱいになりますが1点注意点があります。
borderやpaddingを指定すると余白分が右側にはみ出てしまいます。
「box-sizing:border-box」をすぐ下に追記してあげましょう。
これでbody直下要素を横幅いっぱいにすることができたと思います。
body直下「以外」の要素を横幅いっぱいにしたい
続いてbody直下「以外」の要素の場合です。
こちらも条件は3つです。
width:〇〇vwを指定する
こちらのwidth指定方法、ご存じでしょうか。
②width:〇〇vw
①はよく見かけますね。
②はvw(ViewPort)の略で
「今あなたが見ている画面の〇〇%分の長さにしますよ」という指定です。
つまり「width:50vw」は
「今あなたが見ている画面の50%分の長さにしますよ」となります。
画面幅をぐりぐり変更するとそれにあわせて要素の幅が変化します。
これを利用して「width:100vw」と指定してあげれば
「今あなたが見ている画面の100%分の長さにしますよ」の横幅にすることができます。
margin-left:calc(-50vw + 50%)で横位置を画面に合わせる
これは「width:100vw」とセットで覚えておくと便利な知識です。
実は「width:100vw」だけだと、「親のpadding/borderの指定」のせいで右側にはみでてしまうことがあります。
対処方法はもちろん存在しまして
margin-left:calc(-50vw + 50%)
の指定です。
ちなみにこの方法は要素が画面の中央にあることが前提となりますのでご注意ください。
margin-left:50% →「子要素の左端」が「親要素のちょうど真ん中にくる」
margin-left:-50vw →「見えてるブラウザ画面の半分だけ要素をずらします」
これを組み合わせると子要素の左端がちょうどよい位置にきてくれることになります。
別々にコピペして一度挙動を確認いただくと実感しやすいと思います。
「box-sizing:border-box」でpaddingを含めた指定にする
widthは感覚的に指定ができるよう、余白の発生する可能性のある
padding/borderを含みません。
しかし、width:100vwと指定した場合、余白を含んでしまいます。
width:100vw/padding:40pxで指定すると、横幅の合計は100vw+40pxとなります。
結果、40px分だけ画面幅をはみ出してしまいます。
これを防ぐために「box-sizing:border-box」を指定します。
「余白分も含めて100vwにしてね」と指定できますのではみ出しを防ぐことができます。
まとめ
横幅いっぱいにする方法についての疑問は解消できたでしょうか。
解消できない場合はコピペすれば、問題なく使うことができると思いますのでご活用ください。