CSS レイアウトの共通単位を明らかにする: どれをマスターする必要がありますか?

CSS レイアウト ユニットの公開: 何を知っておく必要がありますか?

CSS レイアウト ユニットは Web デザインに不可欠な部分であり、要素のサイズ、間隔、位置を決定するために使用されます。 CSS にはさまざまな単位があり、それぞれに独自の特性と用途があります。この記事では、最も一般的に使用される重要な CSS レイアウト単位のいくつかをわかりやすく説明し、それらをよりよく理解して適用できるように具体的なコード例を提供します。

1. ピクセル (px)
   ピクセルは最も一般的に使用される単位の 1 つで、画面上のピクセルを表します。 CSS で要素のサイズを設定する場合、通常は単位としてピクセルを使用します。たとえば、次のコードを使用して div 要素の幅を 200 ピクセルに設定できます。ただし、ピクセル単位の使用にはいくつかの欠点もあります。ユーザーが高解像度の画面で Web ページを閲覧すると、ピクセル単位により要素が小さく表示される場合があります。

パーセント (%)

パーセントの単位は、親要素のサイズに相対的です。たとえば、div 要素の幅が 50% に設定されている場合、その幅は親要素の幅の半分になります。次のコードは、パーセント単位を使用して要素の幅を設定する方法を示しています。

2. div {
     width: 200px;
   }

   
   パーセント単位は、さまざまなデバイスの画面サイズに基づいて要素のサイズを自動的に変更できるため、レスポンシブ レイアウトに最適です。ただし、要素の親要素に幅が定義されていない場合、パーセント単位が正しく機能しない可能性があります。

em

em 単位は、現在の要素のフォント サイズに応じて計算されます。要素のフォント サイズが 16px に設定されている場合、1em は 16px に相当します。たとえば、次のコードは、段落要素のフォント サイズを 1.2em に設定します。これは、親要素のフォント サイズの 1.2 倍に相当します。

3. div {
     width: 50%;
   }

   
   em 単位は、サイズの設定に最適です。要素の間隔、特にレスポンシブ レイアウトをデザインする場合に重要です。フォント サイズの変更に基づいて要素のサイズを自動的に変更できるためです。ただし、ネスト レベルが非常に深い場合、em ユニットは複雑になり、理解するのが難しくなる可能性があります。

rem

rem 単位は、ルート要素 (通常は HTML 要素) のフォント サイズに応じて計算されます。 em ユニットとは異なり、rem ユニットはネスト レベルの影響を受けません。たとえば、次のコードは、タイトル要素のフォント サイズを 2rem に設定します。これは、ルート要素のフォント サイズの 2 倍に相当します。 要素のフォント サイズを変更すると、要素のサイズが自動的に変更されます。ただし、古いブラウザでは十分にサポートされていない可能性があります。

4. 
   vw と vh
vw と vh は、ビューポートの幅とビューポートの高さを基準とした単位です。 1vw はビューポートの幅の 1% に等しく、1vh はビューポートの高さの 1% に等しくなります。以下のコードは、vw および vh 単位を使用して要素のサイズを設定する方法を示しています。

p {
  font-size: 1.2em;
}

vw および vh 単位は、さまざまなビューポート サイズに自動的に調整されるため、応答性の高いレイアウトの作成に最適です。 devices 要素のサイズ。ただし、vw および vh 単位を使用すると、要素が大きくなりすぎたり、小さくなりすぎたりする場合があります。

5. 要約すると、CSS レイアウト ユニットには多くの種類があり、それぞれに独自の特徴と用途があります。レイアウト単位を選択するときは、特定の状況に基づいて決定する必要があります。要素のサイズと位置を正確に制御する必要がある場合は、ピクセル単位を使用できます。レスポンシブなレイアウトを実装したい場合は、パーセント、em、rem、または vw/vh 単位を使用できます。これらのユニットを柔軟に活用することで、美しくレスポンシブな Web レイアウトを作成できます。
   
この記事が CSS レイアウト ユニットの理解と適用に役立つことを願っています。学習と実践を通じて、CSS レイアウト ユニットをより柔軟かつ専門的に使用して、独自の Web ページ レイアウトを作成できるようになります。

以上がCSS レイアウトの共通単位を明らかにする: どれをマスターする必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。