height

要素の高さを指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ height : 値; }

▲PageTop

指定できる値

値 初期値 意味
auto ○ ブラウザー依存となります。CSSの仕様では最大の高さになるようです。
数値+単位 高さを指定します。単位を省略した時はpxとして解釈されるようです。単位例：px,em,ex,%
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        height : 50;
        background-color : #333333;
        color : #cccccc;
      }
      #sample2 {
        height : 50%;
        background-color : #666666;
        color : #cccccc;
      }
      #sample3 {
        height : 100px;
        border : solid #000000 2px;
      }
      #sample4{
        height : 20px;
        border : solid #000000 2px;
      }
    </style>
  </head>
  <body>
    <div id="sample1">heightサンプル1</div>
    <br>
    <div id="sample2">heightサンプル2</div>
    <br>
    <table id="sample3">
      <tr>
        <td id="sample4">データ１</td>
        <td id="sample4">データ２</td>
        <td id="sample4">データ３</td>
      </tr>
      <tr>
        <td id="sample4">データ１</td>
        <td id="sample4">データ２</td>
        <td id="sample4">データ３</td>
      </tr>
      <tr>
        <td>データ４</td>
        <td>データ５</td>
        <td>データ６</td>
      </tr>
    </table>
  </body>
</html>

表示結果

heightサンプル1

heightサンプル2

データ１ データ２ データ３
データ４ データ５ データ６

▲PageTop

関連項目

CSS

width

▲PageTop

▲