サイズ


要素のサイズについて

 HTMLの要素(オブジェクト)のサイズは、特に指定しなければ自動的に決まります。普通は、内容のサイズを入れられるだけのサイズになりますが、画面サイズを超えることはありません。

 要素のサイズを決める必要がある場合は、width属性とheight属性を使います。


width, height

 HTMLのdivタグやpタグ, tdタグなどは他のタグのコンテナとしても機能します。これらは、サイズを指定することができます。サイズの指定には、width属性とheight属性を使います。これらの値は数値であって、数値の後に単位を付ける必要があります。

 よく使われる単位はピクセル(px)やセンチメートル(cm)などです。単位に%を使うとサイズは固定ではなく、コンテナ(最上位要素ではブラウザ画面)の幅などの%になります。

<p style="border: dotted 2px gray; background-color: cyan; width: 300px; height: 150px;">
300px * 150px
</p>

300px * 150px

 

サイズの制限

 min-width, min-height, max-width, max-height属性を使うと、サイズを制限できます。

 <style>
#div1 {
  border: medium solid gray;
  padding: 5px;
  width: 15cm;
  height: 10cm;
  min-width: 10cm;
  min-height: 5cm;
  max-width: 20cm;
  max-height: 10cm;
  resize: both;
  overflow: auto;
}
</style>
<div id="div1">
 min-width, min-height, max-width, max-height属性を使うと、サイズを制限できます。<br />
最少設定:10cm * 5cm<br />
最大設定:20cm * 10cm
</div>
 min-width, min-height, max-width, max-height属性を使うと、サイズを制限できます。
最少設定:10cm * 5cm
最大設定:20cm * 10cm

 

 

このページの先頭へ戻る