WebサイトコーディングにおけるHTMLタグの中身の幅よりCSS指定幅が小さかった場合の表示結果

HTML CSS

前回の記事の補足となるが、HTMLタグの中身の幅よりCSSで指定した幅が小さかった場合の表示結果を確認しておく。

ここでいう“HTMLタグの中身”とは、以下のコードにおいて、pタグ内に書かれている文字や画像のことを指すものとする。

<p>テキスト</p>
<p><img src="○○"></p>

では、Webサイトコーディング時にほぼ必ず登場すると思われる、HTMLタグの中身が文字(列）と画像の場合について、それぞれ表示結果の違いを見ていく。

HTMLタグの中身が文字(列）の場合

確認コードと表示結果は以下の通り。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS幅が小さかった場合の表示結果</title>
<style>
body, p{
  margin:0;
  padding:0;	
}
p {
　background-color:#CCC; /* グレー */
　width: 40px;
}
</style>
</head>
<body>
  <p>零番目</p>
</body>
</html>

←クリックで大きい画像表示
結果から、文字列「零番目」の幅よりそのボックスに対するCSSでの指定幅が小さかった場合は、以下のように文字1個単位で同じ行に表示されるか否かが決まり、オーバーする分は下に落ちることが分かる。

ちなみにCSSでの指定幅が文字1文字分の幅より小さかった場合の表示結果は以下の通り。
コード変更点及び表示結果。

p {
　background-color:#CCC; /* グレー */
　width: 7px;
　height: 40px;
}

←クリックで大きい画像表示
height指定の場合の結果も確認すべく、heightの指定も加えてみた。
heightが足りなかった場合も同様となることが確認できる。

さらにここにもう一つ同じpタグ要素を加えてみる。
以下、変更点のコード及び表示結果。

<body>
  <p>零番目</p>
  <p>零番目</p>
</body>

←クリックで大きい画像表示
この結果から、ボックスの幅（高さ）としては、CSSで指定した分のみが確保され、そこからはみ出た中身の分に関しては、次の要素が被って表示される。つまり、はみ出た中身分の幅や高さは無視されるということが分かる。ただし、中身の表示は指定値で切られてはみ出た分が表示されなくなるのではなく、全部が表示されるということが分かる。

HTMLタグの中身が画像の場合

下記の50×50pxの画像を用いて確認する。

確認コードと表示結果は以下の通り。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS幅が小さかった場合の表示結果</title>
<style>
body, p, img{
  margin:0;
  padding:0;	
}
p {
　background-color:#CCC; /* グレー */
　width:30px;
　height:60px;
}
</style>
</head>
<body>
  <p><img src="blog_image/01.jpg"</p>
</body>
</html>

クリックで大きい画像表示
指定幅の表示結果を確認するため、画像の高さ（50px）より大きい高さ（60px）を指定した。
結果から、文字列の場合と同様に幅（高さ）としては、指定通りとなるが、画像は画像のサイズで表示されることが分かる。

文字の場合と同様に、ここでさらにもう一つ同じ要素を加えてみる。
floatなどを指定していない場合は縦に並ぶので、幅ではなく高さで表示結果を確認することにする。
指定高さの表示結果を確認するため、画像の幅（50px）より大きい幅（60px）を指定した。
また、1つ目の要素と2つ目の要素とで高さがどう表示されているのかを確認するために、背景色を変えてみた。
以下、CSS変更点。

p {
　width:60px;
　height:30px;
}
p#one {
　background-color:#CCC; /* 薄いグレー */
}
p#two{
　background-color:#666; /* 濃いグレー */
}

以下、HTMLの変更点。

<body>
  <p id="one"><img src="blog_image/01.jpg"</p>
  <p id="two"><img src="blog_image/02.jpg"</p>
</body>
</html>

以下、表示結果。
←クリックで大きい画像表示
この結果から、文字の場合と同様に、ボックスの高さ（幅）としては、CSSで指定した分のみが確保され、そこからはみ出た中身の分に関しては、次の要素が被って表示される。つまり、はみ出た中身分の幅や高さは無視されるということが分かる。ただし、表示上被っていない部分に関しては、指定値で切られてはみ出た分が表示されなくなるのではなく、全部表示されるということが分かる。