適切な CSS レイアウト ユニットを使用して美しい Web デザインを作成する

適切な CSS レイアウト ユニットを選択してエレガントな Web デザインを作成する

Web デザインにおいて、CSS レイアウト ユニットは重要な部分です。さまざまなレイアウト単位を使用すると、Web ページ要素のサイズ、間隔、位置をより適切に制御できるため、エレガントで美しい Web デザインを作成できます。この記事では、いくつかの一般的な CSS レイアウト単位を紹介し、具体的なコード例を示します。

1. ピクセル (px) 単位

ピクセルは、最も一般的な CSS レイアウト単位の 1 つです。サイズが固定されており、要素のサイズと位置を正確に制御する必要がある状況に適しています。たとえば、ピクセル単位を使用して要素の幅を 200 ピクセルに設定できます。

.element {
  width: 200px;
}

2. パーセント (%) 単位

パーセント単位はサイズに応じて計算されます。親要素の 。これはレスポンシブ レイアウトの実装に役立ちます。パーセント単位を使用すると、画面サイズの変化に応じて要素のサイズを自動的に変更できます。たとえば、パーセンテージ単位を使用して、要素の幅を親要素の 50% に設定できます。

.element {
  width: 50%;
}

3. ビュー ウィンドウ単位 (vw, vh)

ビュー ウィンドウの単位は、ブラウザ ウィンドウのサイズに対する相対的な単位を指します。 vw (ビューポート幅) 単位はビューポートの幅に対する比率を表し、vh (ビューポート高さ) 単位はビューポートの高さに対する比率を表します。ウィンドウ ユニットはレスポンシブ デザインで広く使用されており、ウィンドウのサイズに基づいて要素のサイズを動的に変更できます。

たとえば、vw 単位を使用して、要素の幅をビューポート幅の 30% に設定できます:

.element {
  width: 30vw;
}

4. em 単位と rem 単位

em 単位単位は親要素のフォント サイズを基準にして計算され、rem 単位はルート要素 (html) のフォント サイズを基準にして計算されます。 em 単位と rem 単位は、フォント サイズに関係なく、相対的なサイズのレイアウトを実現するのに役立ちます。

たとえば、em 単位を使用して要素の幅をフォント サイズの 2 倍に設定できます:

.element {
  width: 2em;
}

5. アダプティブ単位 (fr)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

以上が適切な CSS レイアウト ユニットを使用して美しい Web デザインを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。