CSS におけるアイテムのサイズ設定

自然なサイズまたは内在サイズ

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

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

<img
  alt="star"
  src="/deoxy?target=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fbig-star.png" />

img {
  border: 5px solid darkblue;
}

ただし、空の <div> には自分自身のサイズがありません。コンテンツのない HTML に <div> を追加し、画像で行ったように境界線を付けると、ページに線が表示されます。これは、<div> の折りたたまれた境界線です。開いたままにするコンテンツはありません。

次の例では、この境界線はコンテナーの幅全体に広がっています。これは、それがブロックレベル要素であるためですが、この動作については、もうお馴染みになっているでしょう。コンテンツがないため、高さ（つまりブロック次元でのサイズ）はありません。

<div class="box"></div>

.box {
  border: 5px solid darkblue;
}

上記の例で、空の要素の中にテキストを追加してみてください。要素の高さがコンテンツによって定義されるため、境界線が開くのがわかるでしょう。繰り返しになりますが、これは要素の内在サイズであり、そのサイズはコンテンツによって定義されます。

サイズの指定

もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを外部サイズと呼びます。

次の例では、2 つの <div> に特定の width と height の値を指定します。これにより、内部にどのようなコンテンツが配置されても、そのサイズを維持するようになります。右側の <div> が示すように、高さを設定すると、コンテンツが親要素に収まりきらない場合、コンテンツがはみ出してしまうことがあります（オーバーフローについては、後のレッスンで詳しく学びます）。

<div class="wrapper">
  <div class="box"></div>
  <div class="box">
    これらのボックスはどちらも高さが設定されていますが、このボックスにはコンテンツが含まれており、割り当てられた高さよりも多くの空間が必要となるため、オーバーフローが発生します。
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.wrapper {
  display: flex;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  height: 100px;
  width: 200px;
}

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

パーセント値の使用

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

<div class="container">
  <div class="box">幅がパーセント値です。</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 5px solid darkblue;
  width: 50%;
}

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

以上の例を編集してみてください。

1. box の <div> の width 宣言を除去し、利用できる width の 100% を占めることをデフォルトで確認してください。
2. 前回の手直しを元に戻してください。box の <div> の width を再び 50% に設定してください。
3. これで、container の <div> の width を 50% に設定してみましょう。box の <div> の width が小さくなるのがお分かりいただけると思います。これは、その width がコンテナーの width に対して相対的な値になっているためです。

マージンとパディングのパーセント値

margin と padding をパーセント値で設定すると、奇妙な動作に気づくかもしれません。下記の例にはボックスがあります。

内側のボックスには margin に 10% が、padding に 10% が指定されています。ボックスの上下のパディングやマージンは、左右のパディングやマージンと同じサイズです。

<div class="box">すべての辺でマージンとパディングを 10% に設定しています。</div>

body {
  font: 1.2em sans-serif;
}
.box {
  border: 5px solid darkblue;
  width: 200px;
  margin: 10%;
  padding: 10%;
}

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

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

最小サイズ、最大サイズ

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

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

<div class="wrapper">
  <div class="box"></div>
  <div class="box">
    これらのボックスはどちらも min-height が設定してあります。このボックスにはコンテンツが含まれており、割り当てられた高さよりも大きな空間が必要であるため、最小の高さから伸長します。
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  min-height: 100px;
  width: 200px;
}

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

画像の max-width

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

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

代わりに max-width: 100% を使用すると、画像の内在的な幅がコンテナーの幅よりも小さい場合、画像が無理に引き伸ばされて大きくなることはなく、その結果、ピクセル化を防ぐことができます。

以下の例では、埋め込んだ同じ画像を 3 回使用しています。

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

<div class="wrapper">
  <div class="box">
    <img
      alt="star"
      class="width"
      src="/deoxy?target=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fbig-star.png" />
  </div>
  <div class="box">
    <img
      alt="star"
      class="max"
      src="/deoxy?target=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fbig-star.png" />
  </div>
  <div class="mini-box">
    <img
      alt="star"
      class="max"
      src="/deoxy?target=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fbig-star.png" />
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box,
.mini-box {
  border: 5px solid darkblue;
}

.box {
  width: 200px;
}
.mini-box {
  width: 30px;
}
.width {
  width: 100%;
}
.max {
  max-width: 100%;
}

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

ビューポートに関する単位

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

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

<div class="box">A</div>

body {
  font-family: sans-serif;
}

.box {
  border: 5px solid darkblue;
  width: 20vw;
  height: 20vh;
  font-size: 10vh;
}

vh および vw の値を変更すると、それぞれボックスのサイズとフォントのサイズが変化します。また、ビューポートのサイズを変更すると、ボックスとフォントのサイズも変化します。これは、これらがビューポートを基準としてサイズが決定されるためです。ビューポートのサイズを調整した際にボックスとテキストのサイズがどのように変化するかを確認するには、この例を新しいタブで読み込み、ブラウザーウィンドウのサイズを調整してみてください。

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

まとめ

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

次の記事では、CSS のサイズ設定について解説した情報を、どの程度理解し、身につけることができたかを調べるためのテストをいくつかご紹介します。

• 前のページ
• Overview: CSS によるスタイル設定の基本
• 次のページ