CSSスプリットビュー

CSS Flexbox の基礎知識と使い方を詳しく解説

出典:CSS Flexbox の基礎知識と使い方を詳しく解説 | コリス Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」を紹介します。

Viewport単位はviewportの寸法を基準としているため、要素の幅、高さ、サイズをviewportに合わせて設定しなければならない状況でとても便利です。

出典:レスポンシブに便利なCSSのvh/vw/vmin/vmaxの基本と使い方とは – WPJ

フルスクリーン表示される要素に背景画像を設定することはよくあります。製品やサービスに関する個々のセクションが画面いっぱいに表示されるようにWebサイトをデザインしたいと思う場合があるでしょう。そうしたケースでは各要素の幅を100%に、高さを100vhに設定できます。

.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}

スクロールバーがブロック要素の幅の計算に支障をきたさないようにするには、ブロック要素の幅は%で指定したほうが良いのです。

出典:レスポンシブに便利なCSSのvh/vw/vmin/vmaxの基本と使い方とは – WPJ

Viewport単位を使って要素の幅を設定するときは慎重にしてください。なぜならルート要素のoverflowプロパティがautoに設定されていると、ブラウザーはスクロールバーが存在しないものと解釈するからです。これによって要素の幅が期待よりわずかに広くなります。次のように、div要素を4つマークアップしてスタイリングすると考えてください。

div {
  height: 50vh;
  width: 50vw;
  float: left;
}

通常、divはそれぞれ画面の可用領域の4分の1を占めると考えられます。しかし、各divの幅はスクロールバーが存在しないものとして計算されるので、横並びの幅が所定の幅よりもいくらか広く表示される結果となります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です