path: root/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html

---
title: CSS によるサイズ設定
slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
tags:
  - Beginner
  - CSS
  - Intrinsic size
  - Learn
  - max size
  - min size
  - percentage
  - sizing
  - viewport units
translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>

<p>これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>CSS によるさまざまなサイズ設定の方法を理解する。</td>
  </tr>
 </tbody>
</table>

<h2 id="The_natural_or_intrinsic_size_of_things" name="The_natural_or_intrinsic_size_of_things">要素固有のサイズ</h2>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>

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

<h2 id="Setting_a_specific_size" name="Setting_a_specific_size">サイズの指定</h2>

<p>もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを<strong>外部サイズ</strong>と呼びます。上記の例の <code>&lt;div&gt;</code> を見てみます。特定の {{cssxref("width")}} と {{cssxref("height")}} の値を指定できるため、そ <span class="tlid-translation translation" lang="ja"><span title="">コンテンツがどのように配置されても、そのサイズになります。</span> </span> <a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">前のオーバーフローに関するレッスンで</a>見たように、要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性があります。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>

<p>このオーバーフローの問題のため、要素の高さを長さまたはパーセンテージで固定することは、Web上で非常に注意深く行う必要があります。</p>

<h3 id="Using_percentages" name="Using_percentages">比率指定</h3>

<p>多くの点で、パーセンテージは長さの単位のように機能<a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">し、値と単位に関するレッスンで説明したように、</a>多くの場合、長さと同じ意味で使用できます。パーセンテージを使用している場合、あなたはそれが<em>何に対する</em>比率であるかを認識する必要があります。別のコンテナー内のボックスの場合、子ボックスに幅のパーセンテージを与えると、親コンテナーの幅のパーセンテージになります。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>

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

<h3 id="Percentage_margins_and_padding" name="Percentage_margins_and_padding">マージンとパディングの比率</h3>

<p>パーセンテージとして <code>margin</code> と <code>padding</code> を設定すると、奇妙な動作に気付く場合があります。以下の例では、ボックスがあります。内部ボックスに10％の {{cssxref("margin")}} と10％の {{cssxref("padding")}} を与えました。ボックスの上下の padding と margin は、左右の margin と同じサイズです。</p>

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>

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

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

<h2 id="min-_and_max-_sizes" name="min-_and_max-_sizes">最小サイズ、最大サイズ</h2>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>

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

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

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

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>

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

<div class="blockIndicator note">
<p><strong>注</strong>：<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像技術の</a>詳細をご覧ください。</p>
</div>

<h2 id="Viewport_units" name="Viewport_units">ビューポートに関する単位</h2>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>

<p><strong><code>vh</code> との <code>vw</code> 値を変更すると、ボックスまたはフォントのサイズが変更されます。ビューポートに相対的なサイズであるため、ビューポートのサイズを変更しても、サイズが変更されます。ビューポートのサイズを変更したときにサンプルの変更を確認するには、サイズを変更できる新しいブラウザーウィンドウにサンプルを読み込む必要があります（上記の例を含む埋め込み <code>&lt;iframe&gt;</code> がビューポートであるため）。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">サンプルを開き</a>、ブラウザウィンドウのサイズを変更して、ボックスとテキストのサイズがどうなるかを観察します。</strong></p>

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

<h2 id="Summary" name="Summary">まとめ</h2>

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

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ol>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
  <ul>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
  </ul>
 </li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
</ol>