[css] 使うなキケン！の「100vw」

webコーダー兼、プログラマー兼、マーケター兼、デザイナー兼、クリエーター兼、サーバー・ネットワークエンジニアの、ユゲタです。 cssコーダーはプログラマーじゃないって？ そんなこと、誰が言ったの？ とあるネットのサイトで、議論されていた内容ですが、 cssを色やサイズの変更しかできない人の、言い草のようですね。 実際、webブラウザに何かしらの表示を行う時に、必ずHTMLもCSSも記述しなければ、いい感じの表示ができないので、 まさに、「CSSを笑うものは、CSSに泣く」ことがあるでしょう。

100vwを使ってはいけない理由

ブログタイトルのため、際どい書き方をしましたが、cssの値でpxや%以外に、em,rem,vwなどなど、初心者の人はあまり使わない単位がたくさんあります。 ちなみに、 emは、親要素のサイズを100%として、100emで親要素と同じサイズになります。 remは、のルート（htmlの値）を100%として、100remで、htmlのサイズと同じになります。 そして、vwは、ブラウザ画面の横(width)サイズを100%として、100vwで、ブラウザの画面いっぱいになります。 さらに、vhは、ブラウザ画面の縦(height)サイズを100%とします。 こうしてみると、remとvwは基本的には同じサイズになると想像しがちですが、実際は、htmlをブラウザサイズと違う値にセットすることもできるし、 かりに、htmlにwidth:100%;とセットしていたときに、どこかのelementで、100vmとした場合、もちろんブラウザ画面の幅いっぱいで100%になりますが、 スクロールバー（縦スクロール）が表示されている場合は、それを無視して、ブラウザウィンドウのサイズを取得するので、横スクロールが発生してしまう状態になります。 もちろん、htmlに対して、overflow-x:hidden;をセットしておけばそれで問題はないんですが、ぴったりサイズでの表示をするようなサイトであれば、 スクロールバーの非表示処理をブラウザ別の記述で逐一書いていくか、100vwという値を使わないというのが良さそうです。 もちろん、50vwということで、画面の半分サイズで、フロートエレメントを表示したい場合などは、使う分には問題ないですが、 それって、html:100%;の状態で、50remや100remとしたほうが、無駄にスクロールなどのブラウザ機能に左右されなくていいので、安心して使えます。

他にも有るぞcssの値の単位

わかりやすい「cm」や「mm」は、おそらく印刷時に使用するものだろうなと想像できる。 「in」は、インチで、ptは「ポイント」というここまでは、ギリ理解できる。 しかし、この先、 「Q」はQuarter-millimeters 1/4 ミリメートル 「pc」はパイカ これらは、どんな時に使うねん！！！ さらに、vminとvmaxという、ビューポートの表示サイズの縦横で大きいサイズと小さいサイズを取得するこの値、 いったい、どんな時に使うねん！！！

文句ばっかり言うべきではない

記事ネタのために、わざとネガティブなことばかり言ってました。 もっと詳しく知りたい方は、 CSS の値と単位 こちらのサイトを熟読して、cssの単位について、詳しくなってくださいませ。 個人的に作っているシステムで、vwを使って、スクロールバーに苦しめられた結果、今回の記事を書いた始末でした。 お後がよろしいようで・・・