【html/CSS】横幅(width)を画面いっぱいにする方法
「要素を画面いっぱいにしたいのにちょっと内側になってる！」
「body直下じゃない要素の幅を画面いっぱいにしたい！」
横幅(width)を画面いっぱいにする方法を解説します。
高さ(height)を画面いっぱいにする場合はこちら
目次
body直下の要素
body直下の要素の横幅を画面いっぱいにするポイントは以下の3点です。
- bodyのmarginとpaddingを0にする
- body直下の要素はdivなどのブロック要素
- width:auto（または未指定）か
width:100%（box-sizing:border-boxも追記）
bodyのmarginとpaddingを0にする
まずbodyのmarginとpaddingを0にしましょう。
※bodyのpaddingはもともと0ですが、marginとどっちかで迷うよりは両方0にしておきましょう。
bodyはサイト全体を囲うhtmlタグです。まずこれを画面いっぱいにするためにmargin（外側の空白）を0にします。
paddingは内側の空白です。これが0でないと子要素の横幅をいっぱいにしてもpaddingの分内側に引っ込んでしまいます。
直下の要素はdivなどのブロック要素
画面いっぱいにする要素はdivなどのブロック要素にしましょう。
aタグなどのインライン要素はwidthが効かないためです。
厳密に言えば「display:block」を指定することで効きますが、bodyの直下の要素はサイトの構成を担う要素であるため、divやheaderなどの大きく囲う要素がふさわしいです。
ちなみに「main」タグはIEでなぜかインライン要素になっているので「display:block」を指定してあげましょう。
width:auto（または未指定）かwidth:100%（box-sizing:border-boxも追記）
さてこの段階でdivの横幅は画面いっぱいになっています。
それはwidth（横幅）の初期値がautoであるためです。
ブロック要素に「width:auto」が指定されていると親の幅いっぱいに広がります。
親（body）の幅を画面いっぱいにしておいたため、その子要素であるdivの横幅もいっぱいになったというわけです。
<style>
body{
margin: 0;
padding: 0;
}
body>div{
width: auto;/*初期値であるため指定不要*/
}
</style>
<body>
<div></div>
</body>「width:100%」を指定しても横幅いっぱいになります。その場合、borderやpaddingを指定すると右側にはみ出てしまうため「box-sizing:border-box」も追記しましょう。
<style>
body{
margin: 0;
padding: 0;
}
body>div{
width: 100%;
box-sizing:border-box;
}
</style>
<body>
<div></div>
</body>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
body直下以外
width:100%やautoでは画面いっぱいにならない要素を画面いっぱいにするポイントは以下の3点です。
- width:100vwで画面幅いっぱいにする
- box-sizing:border-boxでpaddingを含める
- margin-left:calc(-50vw + 50%)で横位置を画面に合わせる
width:100vwで画面幅いっぱいにする
vwはブラウザ幅を基準とした長さの単位です。
100vwでブラウザ幅と同じ長さになります。
box-sizing:border-boxでpaddingを含める
widthは本来paddingとborderを含みません。
width:100vwとpadding:20pxを指定していると、横幅の合計は100vw+40pxとなり、画面幅をはみ出してしまいます。
「box-sizing:border-box」を指定するとwidthにpaddingとborderが含まれ、はみ出さなくなります。
margin-left:calc(-50vw + 50%)で横位置を画面に合わせる
「width:100vw」を指定をすると、要素の右側は画面からはみ出るでしょう。
はみでる理由は親のpaddingとborderに押されているせいです。
この押された分をマイナスmarginで相殺してもいいですが親に大きな影響を受けます。
margin-left:calc(-50vw + 50%)を指定すると横位置を画面に合わせることができます。
※このやり方は要素が画面の中央にあることが前提となります。
calcは単位の違う数値の足し算引き算や、かけ算割り算ができるものです。
「margin-left:50%」とは子要素の左端が親要素のど真ん中に来ている状態です。
そしてこの状態の子要素の左端はブラウザ画面のど真ん中でもあります。
あとはブラウザ画面の半分つまり50vw左にずらしてあげれば、画面の左端にくっつくというわけです。
.example{
width: 200px;
/*親要素は中央寄せ*/margin: auto;
border: 1px solid #333;
padding: 20px;
}
.example>div{
/*コレ*/margin-left: calc(-50vw + 50%);
/*コレも忘れずに*/width: 100vw;
background: #883838;
height: 100px;
}【まとめ】widthを画面いっぱいにする方法
body直下の要素の場合
- bodyのmarginとpaddingを0にする
- body直下の要素はdivなどのブロック要素
- width:auto（または未指定）か
width:100%（box-sizing:border-boxも追記）
body直下以外の要素の場合
- width:100vwで画面幅いっぱいにする
- box-sizing:border-boxでpaddingを含める
- margin-left:calc(-50vw + 50%)で横位置を画面に合わせる
以上、横幅(width)を画面いっぱいにする方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
