webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【css】100vwは100%とどう違う?!100vwの使い方とは

覚えると便利な100vwの使い方

コーディング好きですか?

今回は、max-widthが指定されている要素の中に、画面幅いっぱいにしたい要素がある場合に、「100vw」を使う方法をシェアします♫

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

vwとは

vwという単位があります。

vwは、Viewport Widthを略したもので、簡単に言うとウインドウ画面サイズに基いた単位です。

100vwが画面幅いっぱい(100%)のことを指します。

例えばその時のウインドウサイズが1000pxなら、100vwは1000px。

ウインドウサイズが400pxの場合は100vwは400pxです。

ウインドウサイズは、見るモニタのサイズや、pcかスマホかでも変わりますので、固定ではなく変動します。

どんなサイズの時でも、横幅いっぱいに指定したい時に、100vwを使うんですね。

100%は親要素に基づくので違いに注意してください。

親要素が1000pxなら、子要素の100%は1000pxです。

つまり、100vwを指定すると親要素の幅に依存せず画面幅いっぱいのサイズになるということです。

100vwの使い方

以下のようなデザインの場合に使うと便利です。

100vwの使い方
  • max-widthが1000pxと指定されている要素の中に、画面幅いっぱいにしたい要素がある場合
100vwの使い方

親要素を.sec、画面幅いっぱいにしたい要素を.photoとします。

次のようにcssを記述してみます。

.sec {
  max-width: 1000px;
  margin: 0 auto;
}
.photo {
  width: 100vw;
}

親要素の.secはmax-widthが1000pxなので、1000より大きくなることはありません。

.photoに、仮に「width: 100%」と指定すると、親要素より大きくなることはないので、.photoの100%の最大値は1000pxです。

画面幅が1000を超える場合、.photoに100vwと指定することで、画面の左から右端までのサイズにしてくれます。

ただ、このままでは1つ問題があります。

100vwの使い方

widthに100vwを入れただけだと、親要素の左端からスタートするのです。

画面の左端からスタートさせたいので、追加でmargin-leftを入れてあげる必要があります。

スタート地点をウインドウサイズの左ピッタリの位置からスタートさせたい場合、margin-leftを使用して位置を左にずらしたらOKです。

さて、margin-leftは、どう設定したら良いでしょうか?

ちょっとだけ考えてみてください。

この「?」を求める考え方は、めちゃくちゃ数学だと思うんです。

先に答えを書きます。

指定するのは、

margin-left: calc(50% – 50vw);

です。

どういうこと?

と一瞬よくわからないと思うのですが、よく考えていきましょう。

親要素とウインドウサイズの差(上の図の水色部分)だけ左に寄せればOKですよね。

まず、水色部分を求めようと思うと、

ウインドウサイズ ー 親要素の幅 ( = 100%) = 水色の箇所

という式ができます。

=100vw-100%

ただ、この水色の箇所の「半分」だけ左に寄せれば良いので、半分を求めます。

(100vw-100%)÷2

この幅を左にマイナスで寄せたいので、以下のような式ができます。

-{(100vw – 100%)÷2}

これを計算すると、

100vwの使い方

こうなるんですね目が星

親要素を1000pxと指定するのはちょっと待ってください。

親要素はmax-widthなので、ウインドウ幅によって変わります。

どんなサイズの時でもにしないといけないので、margin-leftはcalc(50% – 50vw)とすれば良いのですね。

これはいちいち考えると頭がこんがらがるので、50%-50vwって覚えたらいいのだと思います。

こうなってくるとかなり数学っぽい感じです。

※追記 (2023.5.12)

(50% – 50vw)という書き方でなくても、calc(–50vw + 50%);でもOKです。

ちなみにmargin-leftではなくposition: relativeでもOKです。

position: relative;
left: calc(50% – 50vw);
width: 100vw;

いいなと思ったら
TAPしてね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング 【css】100vwは100%とどう違う?!100vwの使い方とは

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)