Webサイトコーディングにおけるwidthとheight指定の有無による表示結果の違い

CSS HTML

初歩的なことで今更ではあるが、今後なにかしらの検証をする際に前提となるかもしれないことなので、幅と高さの指定の有無による表示結果の違いを確認しておく。

先に結果をまとめておくと、以下のようになった。

・divタグの中が空の場合

  1. 幅指定なし、高さ指定なし ⇒ 何も表示されない
  2. 幅指定あり、高さ指定なし ⇒ 何も表示されない
  3. 幅指定なし、高さ指定あり ⇒ 幅：ウィンドウサイズ（全行幅）、高さ：指定通り
  4. 幅指定あり、高さ指定あり ⇒ 幅：指定通り、高さ：指定通り

・divタグ内に（ブロック）要素がある場合

  1. 幅指定なし、高さ指定なし ⇒ 幅：ウィンドウサイズ（全行幅）、高さ：文字高さ
  2. 幅指定あり、高さ指定なし ⇒ 幅：指定通り、高さ：文字高さ
  3. 幅指定なし、高さ指定あり ⇒ 幅：ウィンドウサイズ（全行幅）、高さ：指定通り
  4. 幅指定あり、高さ指定あり ⇒ 幅：指定通り、高さ：指定通り
divタグの中が空の場合

以下、コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatの検証</title>
<style>
body, div {
	margin: 0;
	padding: 0;
}
#one {                    /* 1.幅指定なし、高さ指定なし */
  background-color: #F00; /* 赤 */
}
#two {                    /* 2.幅指定あり、高さ指定なし */
  background-color: #0F0; /* 緑 */
  width: 100px;
}
#three {                  /* 3.幅指定なし、高さ指定あり */
  background-color: #00F; /* 青 */
  height: 100px;
}
#four {                   /* 4.幅指定あり、高さ指定あり */
  background-color: #666; /* グレー */
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
  <div id="one">   <!-- 幅指定なし、高さ指定なし、背景色：赤 -->
  </div>
  
  <div id="two">   <!-- 幅指定あり、高さ指定なし、背景色：緑 -->
  </div>
  
  <div id="three"> <!-- 幅指定なし、高さ指定あり、背景色：青 -->
  </div>
  
  <div id="four">  <!-- 幅指定あり、高さ指定あり、背景色：グレー -->
  </div>
</body>
</html>

表示結果は以下のようになった。
←クリックで大きい画像表示

  1. 幅指定なし、高さ指定なし　⇒　何も表示されない
  2. 幅指定あり、高さ指定なし　⇒　何も表示されない
  3. 幅指定なし、高さ指定あり　⇒　幅：ウィンドウサイズ（全行幅）、高さ：指定通り
  4. 幅指定あり、高さ指定あり　⇒　幅：指定通り、高さ：指定通り

また、各divタグ内に何らかの要素をいれた場合の結果も確認しておく。

divタグ内に（ブロック）要素がある場合

以下、コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatの検証</title>
<style>
body, div {
	margin: 0;
	padding: 0;
}
#one {                    /* 1.幅指定なし、高さ指定なし */
  background-color: #F00; /* 赤 */
}
#two {                    /* 2.幅指定あり、高さ指定なし */
  background-color: #0F0; /* 緑 */
  width: 100px;
}
#three {                  /* 3.幅指定なし、高さ指定あり */
  background-color: #00F; /* 青 */
  height: 100px;
}
#four {                   /* 4.幅指定あり、高さ指定あり */
  background-color: #666; /* グレー */
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
  <div id="one">   <!-- 幅指定なし、高さ指定なし、背景色：赤 -->
    <p>いち</p>
  </div>
  
  <div id="two">   <!-- 幅指定あり、高さ指定なし、背景色：緑 -->
    <p>に</p>
  </div>
  
  <div id="three"> <!-- 幅指定なし、高さ指定あり、背景色：青 -->
    <p>さん</p>
  </div>

  <div id="four">  <!-- 幅指定あり、高さ指定あり、背景色：グレー -->
    <p>よん</p>
  </div>
</body>
</html>

表示結果は以下のようになった。
←クリックで大きい画像表示

  1. 幅指定なし、高さ指定なし　⇒　幅：ウィンドウサイズ（全行幅）、高さ：文字高さ
  2. 幅指定あり、高さ指定なし　⇒　幅：指定通り、高さ：文字高さ
  3. 幅指定なし、高さ指定あり　⇒　幅：ウィンドウサイズ（全行幅）、高さ：指定通り
  4. 幅指定あり、高さ指定あり　⇒　幅：指定通り、高さ：指定通り