CSS によるサイズ設定

HTML 要素には自然なサイズがあり、 CSS の影響を受ける前に設定されます。簡単な例は画像です。画像には、ページに埋め込む画像ファイルで定義された幅と高さがあります。このサイズは内在サイズと呼ばれ、画像自体に由来します。

<img> タグまたは CSS の属性を使用してページに画像を配置し、その高さと幅を変更しない場合、その内在サイズを使用して表示されます。以下の例では、ファイルの範囲を確認できるように画像に境界線を付けています。

ただし、空の <div> には独自のサイズはありません。コンテンツのない HTML に <div> を追加し、画像で行ったように境界線を付けると、ページに線が表示されます。これは、要素の折りたたまれた境界線です。開いたままにするコンテンツはありません。以下の例では、その境界線はコンテナーの幅まで伸びています。これはブロックレベルの要素であるため、慣れ親しんだ動作になるはずです。コンテンツがないため、高さ（またはブロック軸のサイズ）はありません。

上記の例では、空の要素内にテキストを追加してみてください。要素の高さがコンテンツによって定義されているため、境界線にはそのテキストが含まれています。したがって、 <div> ブロック軸におけるこのサイズは、コンテンツのサイズに由来します。繰り返しますが、これは要素の内在サイズです。そのサイズはコンテンツによって定義されます。

もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを外部サイズと呼びます。上記の例の <div> を見てみます。特定の width と height の値を指定できるため、そ コンテンツがどのように配置されても、そのサイズになります。 前のオーバーフローに関するレッスンで見たように、要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性があります。

このオーバーフローの問題のため、要素の高さを長さまたはパーセント値で固定することは、ウェブ上で非常に注意深く行う必要があります。

多くの点で、パーセント値は長さの単位のように機能し、値と単位に関するレッスンで説明したように、多くの場合、長さと同じ意味で使用できます。パーセント値を使用している場合、あなたはそれが何に対する比率であるかを認識する必要があります。別のコンテナー内のボックスの場合、子ボックスに幅のパーセント値を与えると、親コンテナーの幅のパーセント値になります。

これは、パーセント値がそれを包含するブロックのサイズに対して解決されるためです。パーセント値を適用しない <div> 場合、これはブロックレベルの要素であるため、使用可能なスペースの 100％を占めます。パーセント値の幅を指定すると、これは通常埋められるスペースに対するの比率になります。

margin と padding をパーセント値で設定すると、奇妙な動作に気づくかもしれません。下記の例にはボックスがあります。内側のボックスには margin に 10%、padding に 10% が指定されています。ボックスの上下のパディングやマージンは、左右のパディングやマージンと同じサイズです。

例えば、上下のマージンのパーセント値は要素の高さのパーセント値であり、左右のマージンのパーセント値は要素の幅のパーセント値であると予想するかもしれません。しかし、そうではありません。

マージンとパディングをパーセント値で設定する場合、値はインラインサイズから計算されます。したがって横書きの言語で作業しているときは幅になります。この例では、マージンとパディングはすべて幅の 10% です。つまり、ボックス全体で同じサイズのマージンとパディングを使用できます。この方法でパーセント値を使用する場合、これは覚えておかなければならない事実です。

固定サイズを与えることに加えて、要素に最小サイズまたは最大サイズを与えるよう CSS に要求できます。さまざまな量のコンテンツを含む可能性のあるボックスがあり、常に特定の高さ以上にしたい場合は、そのボックスに min-height プロパティを設定できます。ボックスは常にこの高さ以上になりますが、ボックスの最小高さでのスペースよりも多くのコンテンツがある場合は、ボックスの高さが高くなります。

以下の例では、2 つのボックスがあり、どちらも 150 ピクセルの高さが定義されています。左側のボックスの高さは 150 ピクセルです。右側のボックスには、より多くのスペースを必要とするコンテンツがあるため、150 ピクセルよりも高くなっています。

これは、オーバーフローを回避しながら、可変量のコンテンツを処理するのに非常に役立ちます。

max-width の一般的な用途は、固有の幅で表示するための十分なスペースがない場合に画像を縮小し、その幅よりも大きくならないようにすることです。

例として、画像に width: 100% を設定する場合、その固有の幅がコンテナーよりも小さいと、画像は強制的に引き伸ばされて大きくなり、ピクセル化されたように見えます。固有の幅がコンテナーよりも大きい場合、オーバーフローします。どちらの場合も、あなたが起こりたいことではないでしょう。

代わりに max-width: 100% を使用すると、画像は本来のサイズよりも小さくなりますが、サイズの 100％で止まります。

以下の例では、同じ画像を 2 回使用しています。最初の画像には width: 100% が指定されており、それよりも大きいコンテナー内にあるため、コンテナーの幅まで拡大されます。2 番目の画像には max-width: 100% が設定されているため、コンテナーを埋めるために引き伸ばされることはありません。3 番目のボックスにも同じ画像が含まれており、 max-width: 100% も設定されています。この場合、ボックスに収まるように縮小された様子を確認できます。

この手法は、画像をレスポンシブにするために使用されます。そのため、より小さなデバイスで表示すると、適切に縮小されます。ただし、この手法を使用して非常に大きな画像を読み込んでから、ブラウザーで縮小するべきではありません。画像は、デザインに表示される最大サイズに必要なサイズよりも大きくならないように適切なサイズにするべきです。大きすぎる画像をダウンロードすると、サイトが遅くなり、ユーザーが従量制の接続を使用している場合は、より多くの費用がかかる可能性があります。

ビューポート（サイトの表示に使用しているブラウザーでのページの表示領域）にもサイズがあります。CSS には、ビューポートのサイズに関連する単位（ビューポートの幅 vw とビューポートの高さ vh ）があります。これらの単位を使用すると、ユーザーのビューポートを基準にしてサイズを変更できます。

1vh はビューポートの高さの 1% に、 1vw はビューポートの幅の 1% に等しくなります。これらの単位を使用して、ボックスだけでなくテキストのサイズも変更できます。以下の例では、 20vh と 20vw のサイズのボックスがあります。ボックスには、 font-size が 10vh の文字 A が含まれています。

vh との vw 値を変更すると、ボックスまたはフォントのサイズが変更されます。ビューポートに相対的なサイズであるため、ビューポートのサイズを変更しても、サイズが変更されます。ビューポートのサイズを変更したときにサンプルの変更を確認するには、サイズを変更できる新しいブラウザーウィンドウにサンプルを読み込む必要があります（上記の例を含む埋め込み <iframe> がビューポートであるため）。サンプルを開き、ブラウザーウィンドウのサイズを変更して、ボックスとテキストのサイズがどうなるかを観察しましょう。

ビューポートに応じてサイズを調整することは、デザインに役立ちます。例えば、全ページのヒーローセクション (hero section) を他のコンテンツの前に表示させたい場合、ページのその部分を 100vh の高さにすると、残りのコンテンツはビューポートの下に押しやられてしまい、ドキュメントがスクロールされたときにのみ表示されます。

この記事の終わりまで来ましたが、最も重要な情報を覚えていますか？次に進む前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります。スキルテスト: サイズ設定を見てください。

このレッスンでは、ウェブ上のサイズを決定するときに遭遇する可能性があるいくつかの重要な問題の概要を説明しました。CSS レイアウトに移ると、さまざまなレイアウトメソッドを習得する際にサイズ設定が非常に重要になるため、先に進む前に、ここで概念を理解しておくことをお勧めします。

次の記事では、画像、メディア、フォーム要素が CSS でどのように扱われるかを見ていきます。

• 前のページ
• Overview: CSS の構成要素
• 次のページ