項 目 | 説 明 |
---|---|
記述形式 | セレクタ {height: 値 } |
値 の形式 | 数値 (長さ,%) | auto,inherit |
初 期 値 | auto |
対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
heightプロパティ は,要素の高さを指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
長 さ | 下表に示すような単位を用いて要素の高さを指定します。 |
パーセント(%) | 基準となるボックスやウィンドウの高さを1とした百分率で指定します。 |
auto | ブラウザーの仕様に任せます。 (初期値) |
inherit | 親要素の heightプロパティの設定を継承します。 |
数値では,次のような単位を付けて指定が可能です。
単位 | 説 明 |
---|---|
px | px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
em | em とは現在使用中の標準フォントの高さを1とする単位です。 |
ex | ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。 |
% | 親要素の widthプロパティ の値を基準にして割合を%値で指定します。 |
現在,CSS3 の sizing ワークグループでは widthプロパティ と heightプロパティ に 新しいキーワード を導入することが議論されているようです。 まだ,仕様が確定しているようではありませんので,ここでは従来の仕様に従った説明にしております。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css"> <!-- div.sample { width: 240px; height: 240px; background-color: #00AAAA; } img.sample { margin: 20px; } --> </style> |
HTML <body> ~ </body> |
<div class="sample">
<img class="sample" src="logo.gif" alt="大阪教育大学ロゴ"
width="200" height="199">
</div> |
ブラウザー 表示例 |
---|