width100%もwidth100vwのどちらもブラウザの幅いっぱいに表示する指定ですが、範囲が少し違います。
どう違うのか見ていきましょう。
viewportビューポートと%パーセンテージ
width100%は言わずもがな、要素の幅いっぱいの表示を意味します。
1％だと1/100ですね。
親要素が1000pxなら100％表示は1000px。すごく単純でわかりやすいです。
では、viewportはブラウザの幅と高さが基準になっています。「表示領域」と呼ばれることが一般的なようです。
1vwはブラウザ幅の1/100です。
ブラウザのモニターいっぱいで表示されているときはモニター幅が100vw。ブラウザをモニターの半分の幅にしてもブラウザ幅に依存するのでモニターの半分の幅が100vwになります。
100vhになると表示領域の高さいっぱいということになります。
パーセンテージもビューポートも100という数字を使うので同じようにみえますが、ベースとするものが違うので、見え方が少し変わります。
同じに見えるが、同じじゃないwidth 100％と100vw
％パーセントでもviewportでも同じならなんとなくかっこいいviewportで全画面表示はvw/vhで指定すればいいんじゃない？って思う人も多いはず。
でもね、
気・を・つ・け・て！
100vwの幅はスクロールバー分が含むブラウザ幅になります。
下の画像のwidthに100vwをかけてみました。
横スクロールバーが現れました。
100vwにすると、スクロールバーを含んだ幅を100とするので、横スクロールバーが出現するのです。
サンプルを見てみましょう。width 100vwでコードも書いてみました。↓
See the Pen width100vw by chocolartwork (@chocolartwork) on CodePen.
もう一つ、横幅100％の指定を画像にかけました。横幅いっぱいに表示されて、横スクロールバーは表示されません。
width 100％もサンプルを見れるようにコードを書いてみました↓
See the Pen width100% by chocolartwork (@chocolartwork) on CodePen.
横スクロールバーがでても気にしないのなら、100vwはとても便利ですが、気になるようなら横幅指定はパーセンテージ100％をおすすめします。
横スクロールバーを消す方法
前任者がコーディングしたサイトを引き継ぎ、なんで横移動のバーが出てるの？消してほしい。と言われ、ここにたどり着くまでちょっと時間がかかりました。
なので、横スクロールバーを消したいときは、まずはCSSでwidth:100vwが指定されていないか探してみるのがよいかなと思います。
ちょっとしたことが見つけられなくて、もういいやーってなることもあるけど、コツコツ頑張っていきましょ＾＾
コメント