高速レイアウトのための CSS ビューポート単位

CSS ビューポートユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し始めています。これらの利点は、JavaScript を必要とせずに動的にサイズを変更できることです。失敗した場合でも、バックアッププランは豊富にあります。

この記事では、CSS ビューポートユニットとその使用方法について学習し、一般的な問題とその解決策および使用例をいくつか見ていきます。それでは始めましょう。

導入

CSS 仕様によれば、ビューポートのパーセンテージ単位は、Web ページのルート要素である初期コンテナブロックのサイズを基準とします。

ビューポートの単位は、 vw 、 vh 、 vmin 、およびvmaxです。

vw単位はルート要素の幅のパーセンテージを表します。 1vwはビューポート幅の1%に相当します。

ビューポートの幅

vw単位はルート要素の幅のパーセンテージを表します。1vw 1vwビューポートの幅の1%に相当します。

次の CSS を持つ要素があるとします。

。要素 {
    幅：50vw;
}

ビューポートの幅が500pxの場合、 50vw次のように計算されます。

幅 = 500*50% = 250ピクセル

ビューポートの高さ

vh単位はルート要素の高さのパーセンテージを表します。1 vhビューポートの高さの1%に相当します。

次の CSS を持つ要素があります。

。要素 {
    高さ: 50vh;
}

ビューポートの高さが290pxの場合、 70vh次のように計算されます。

高さ = 290*70% = 202ピクセル

みんな履歴書にプロジェクトがないと言うので、みんなのためにプロジェクトを探してきて、【構築チュートリアル】も添付しました。

Vmin 単位

vminビューポートの幅と高さの小さい方の値、つまりvwとvhの小さい方の値を表します。ビューポートの幅が高さより大きい場合、値は高さに基づいて計算されます。

次の例を見てみましょう。

vmin単位を持つ要素を備えた横長の携帯電話があります。この場合、値は幅よりも小さいため、ビューポートの高さに基づいて計算されます。

。要素 {
    パディングトップ: 10vmin;
    パディングボトム: 10vmin;
}

vminは次のように計算されます。

ご想像のとおり、計算は次のようになります。

パディングトップ = (高さの 10%) = 10% * 164 = 16.4px 
 
padding-bottom = (高さの10%) = 10% * 164 = 16.4px

Vmaxユニット

vmaxはvminの反対で、 vwとvhのうち大きい方の値です。

次の例を見てみましょう。

。要素 {
    パディングトップ: 10vmax;
    パディングボトム: 10vmax;
}

計算結果は以下のとおりです。

パディングトップ = (幅の10%) = 10% * 350 = 35px 
padding-bottom = (幅の10%) = 10% * 350 = 35p

ビューポートの単位とパーセンテージの違いは何ですか?

ビューポートの単位はページのルート要素に基づきますが、パーセンテージはそれらが含まれるコンテナーに基づきます。したがって、それらは互いに異なりますが、それぞれに独自の用途があります。

ビューポート単位でのフォントサイズの使用例

CSS ビューポートユニットは、レスポンシブなタイポグラフィに最適です。たとえば、記事のタイトルとして次のものを使用できます。

。タイトル {
    フォントサイズ: 5vw;
}

タイトルのfont-size 、ビューポートの幅に応じて増減します。これは、ビューポート幅の5％のフォントサイズを提供するようなものです。ただし、適切なテストを行わずに使用すると、落とし穴に陥る可能性があります。以下のビデオを見てみましょう:

本体サイズが非常に小さくなり、アクセシビリティとユーザーエクスペリエンスに悪影響を及ぼします。私の知る限り、モバイルデバイスの最小フォントサイズは14px未満であってはなりません。 GIF では10px以上。

この問題を解決するには、タイトルの最小フォントサイズを指定する必要があります。これはcalc()を使用して行うことができます。

。タイトル {
    フォントサイズ: calc(14px + 2vw);
}

calc() CSS 関数は最小値を14pxに設定し、それに2vwの値を追加します。これにより、font-size の値が小さくなりすぎることはありません。

考慮すべきもう 1 つの重要な点は、 27” iMacなどの大型画面でフォントサイズがどのように動作するかということです。何が起こるでしょうか? ご想像のとおり、フォントサイズは約95pxで、大きな値です。これを防ぐには、メディアクエリを使用して、特定のブレークポイントでフォントサイズを変更する必要があります。

@media (最小幅: 1800px) {
    。タイトル {
        フォントサイズ: 40px;
    }
}

フォントサイズをリセットすることで、サイズが大きくなりすぎないようにすることができます。複数のメディアクエリを追加する必要もあるかもしれませんが、それはプロジェクトのコンテキストに応じて異なります。

アドレスの例: https://codepen.io/shadeed/pen/fa989837c6379770cce49f0be6daa3e3

全画面表示

場合によっては、ビューポートの高さを100%取得するためにpが必要になります。この場合は、 viewport高さの単位を使用できます。

.p {
    高さ：100vh;
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}

height: 100vhを追加することで、 p高さがビューポートの100%占めることを保証できます。さらに、コンテンツを水平方向と垂直方向に中央揃えするためのflexboxを追加しました。

ソースコードの例: https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=1100

スティッキーレイアウト（フッター）

大きな画面では、Web サイトのコンテンツがまばらになり、 footer下部に固定されないことがあります。これは正常であり、悪い習慣とはみなされません。しかし、改善の余地はあります。問題を表す次の図を考えてみましょう。

これを修正するには、コンテンツの高さをビューポートの高さ - (ヘッダー + フッター)に等しくする必要があります。これを動的に行うことは困難ですが、CSS のビューポートを使用すると簡単です。

最初の解決策: calcとビューポート単位

headerとfooterの高さが固定されている場合は、次のようにcalc()関数とビューポート単位を組み合わせることができます。

ヘッダ、
フッター {
    高さ: 70px;
}
 
主要 {
    高さ: calc(100vh - 70px - 70px);
}

この解決策は、特に于footer 、常に機能するとは限りません。私のキャリアでは、固定の高さのfooter使用したことがありません。これは、たとえば、異なる画面サイズでは実現できないためです。

2. 2番目の解決策: Flexboxとビューポートユニット (推奨)

body要素の高さを100vhに設定することで、flexbox を使用してmain要素が残りのスペースを占めるようにすることができます。

体 {
    最小高さ: 100vh;
    ディスプレイ: フレックス
    flex-direction: 列;
{
 
主要 {
    /* これにより、メイン要素が残りのスペースを動的に占有するようになります */
    フレックス成長: 1;
}

この方法では、問題は解決され、コンテンツの長さに関係なく固定footerが実現します。

ソースコードの例: https://codepen.io/shadeed/pen/c735b26b8fa97ee685b38084448b3f85?editors=1100

レスポンシブ要素

レスポンシブデザインの作品を紹介するポートフォリオがあり、3 つのデバイス (モバイル、タブレット、ラップトップ) があるとします。各デバイスには 1 つの画像が含まれます。目標は、CSS を使用してこれらのページをレスポンシブに適応させることです。

CSS グリッドとビューポートユニットを使用することで、完全に動的かつレスポンシブにすることができます。

<div class="wrapper">
  <div class="デバイス ラップトップ"></div>
  <div class="デバイス モバイル"></div>
  <div class="デバイス タブレット"></div>
</div>

ビューポート単位は、 grid- *プロパティだけでなく、 border 、 border-radiusなどのプロパティでも使用できます。

.ラッパー{
  表示: グリッド;
  グリッドテンプレート列: repeat(20, 5vw);
   グリッド自動行: 6vw;
}
 
。携帯 {
   位置: 相対的;
  zインデックス: 1;
  グリッド列: 2 / スパン 3;
  グリッド行: 3 / スパン 5;
}

 .タブレット{
  位置: 相対的;
  zインデックス: 1;
  グリッド列: 13 / スパン 7;
   グリッド行: 4 / スパン 4;
  ボーダー下部: 1vw 実線 #a9B9dd;
  右ボーダー: solid 3vw #a9B9dd;
}

 。ラップトップ {
  位置: 相対的;
  グリッド列: 3/スパン 13;
  グリッド行: 2 / スパン 8;
}
 
/* ビューポートの単位は、下、左、右、高さ、境界の半径に使用されます。クールだと思いませんか? */
.laptop:after {
    コンテンツ："";
    位置:絶対;
    下部: -3vw;
    左: -5.5vw;
    右: -5.5vw;
    高さ: 3vw;
    背景色: #a9B9dd;
    境界線の半径: 0 0 1vw 1vw;
}

ソースコードの例: https://codepen.io/shadeed/pen/2da0f2b70699769f8de3220ff4465bc6?editors=1100

コンテナから抜け出す

レイアウトの編集に最適なユースケースが 1 つあることに気付きました。親要素の幅が制限されている場合でも、ビューポートの幅の100％を占める子要素。次の点を考慮してください。

。起こる {
    幅：100vw;
    位置: 相対的;
    左: 50%;
    右: 50%;
    左マージン: -50vw;
    右マージン: -50vw;
}

これらすべてのプロパティがどのように機能するかを少しずつ理解できるように、少し分解してみましょう。

1. width: 100vw

最も重要なステップは、画像の幅をビューポートの100%に設定することです。

2. margin-left: -50vwを追加

画像を中央に配置するには、ビューポートの幅の半分の幅の負のマージンを与える必要があります。

3. left: 50%

最後に、親の幅の50％の値だけ画像を右に押し出す必要があります。

アドレスの例: https://codepen.io/shadeed/pen/828f12b1ef7fa7211584ff5c7b82d2fa?editors=1100

垂直および水平間隔

思い浮かぶもう 1 つの興味深い使用例は、ビューポート単位を使用して要素間の間隔を表すことです。これは、 margin 、 top 、 bottom 、 grid-gapなどの値と組み合わせて使用できます。使用すると、間隔はビューポートの幅または高さに基づいて決定され、レイアウトをより動的にするのに役立ちます。

モーダルボックス

モーダルの場合は、ビューポートの上部から押し込む必要があります。通常、これはtopプロパティを使用して実行し、パーセンテージまたはピクセル値のいずれかを使用します。ただし、ビューポート単位を使用すると、ビューポートの高さに基づいて変更できる間隔を追加できます。

.modal-body {
    トップ：20vh;
}

アドレスの例: https://codepen.io/shadeed/pen/f77a0d58947c64c2b3dadbd887700db5?editors=1100

ページヘッダー

ページheader 、ページの紹介として機能する部分です。通常、タイトルと説明があり、上端と下端に固定の高さまたはパディングがあります。

たとえば、次の CSS スタイルがあるとします。

.ページヘッダー{
    パディングトップ: 10vh;
    パディングボトム: 10vh;
}
 
.ページヘッダー h2 {
    マージン下部: 1.5vh;
}

ページタイトルのパディングとタイトルの下の余白にはvh単位を使用します。間隔がどのように変化するかに注目してください。

ソースコードの例: https://codepen.io/shadeed/pen/43024fa031519e316e95bb3ce47f2b22?editors=1100

Vmin と Vmax の使用例

このユースケースは、ページタイトル要素の上部と下部のpaddingに関するものです。ビューポートが小さい場合 (モバイル)、通常はpaddingが削減されます。 vminを使用すると、ビューポートの小さい方の寸法 (幅または高さ) に基づいて適切な上部と下部のpadding取得できます。

.ページヘッダー{
    パディング: 10vmin 1rem;
}

ソースコードの例: https://codepen.io/shadeed/pen/f335c2f43b960a2c70ea057228ddc5b9?editors=0100

アスペクト比

vw単位を使用すると、ビューポートのサイズに関係なくアスペクト比を維持するレスポンシブ要素を作成できます。

まず、必要なアスペクト比を決定する必要があります。この例では、 9/16を使用します。

ｐ {
    /* 9/16 * 100 */
    高さ: 56.25vw;
}

ソースコードの例: https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=0100

人気のトップボーダー

ほとんどのウェブサイトで使用されている上部の境界線をご存知ですか?多くの場合、ブランドと同じ色で、個性を与えます。

境界線の初期値として3pxサポートします。固定値をビューポートオブジェクトに変換するにはどうすればよいでしょうか? vw相当を計算する方法は次のとおりです。

vw = (ピクセル値 / ビューポート幅) * 100

ビューポートの幅は、ピクセル値と必要なvw単位の比率を推定するために使用されます。

この例では、 headerに次のスタイルを追加します。

.ヘッダー{
    上境界線: 4px 実線 #8f7ebc;  
}

私の場合、ビューポートの幅は1440です (これは固定値ではないので、ご自身の数値に置き換えてください)

vw = (4 / 1440) * 100 = 0.277

.ヘッダー{
    上ボーダー: 0.277vw 実線 #8f7ebc;  
}

さらに良いことに、基本ピクセル値を使用して、ビューポート単位を加算することができます。

.ヘッダー{
    border-top: calc(2px + 0.138vw) solid $color-main;
}

モバイルのスクロールの問題

モバイルデバイスでは、 100vhでもアドレスバーの高さが見えるためスクロールが必要になるという一般的な問題があります。 Louis Hoebregts 氏はこの問題について記事を書き、簡単な解決策を提示しました。

.my-要素{
  height: 100vh; /* カスタムプロパティをサポートしていないブラウザ用のフォールバック */
  高さ: calc(var(--vh, 1vh) * 100);
}

// まず、ビューポートの高さを取得し、それに 1% を掛けて vh 単位の値を取得します。let vh = window.innerHeight * 0.01;
// 次に、`--vh` カスタム プロパティの値をドキュメントのルート ディレクトリ内のプロパティに設定します。 document.documentElement.style.setProperty('--vh', `${vh}px`);

ソースコードの例: https://codepen.io/shadeed/pen/1d18ca2d23ec0038c759dc62dc3fd8c3?editors=0110

CSS ビューポートユニットを使用して高速レイアウトを実現する方法については、これで終わりです。CSS ビューポートユニットに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL の暗黙的な型変換によって発生するインデックス障害の解決策

>>: Vue3 における provide と inject の使用法と原則