ywork2020.com

Title

埋め込み要素の横幅を設定する

目次 (INDEX)

width とは

ここで説明する width とは次の語句からなる HTML 要素の属性です。
width
読み: ウィズ
意味: 幅

目次に戻る

width 属性の概要

この属性は、以下に挙げる埋め込み要素の横幅を指定します。

width は上記した要素以外では古い属性となっています。 また、これから先には これらの属性でも古い属性となっていく可能性があります。

その時のことを考慮して、CSS の width プロパティの使用をお勧めします。

設定できる値は要素により異なり、絶対値で指定しなければならないものもあれば、相対値で指定できるものもあります。

目次に戻る

サンプルコードと実行結果

ここでは、img 要素で同じ画像を 2つ埋め込みました。 この 2つの画像で width 属性の設定値の比較を見てみましょう。

サンプルコード: HTML
<body>
	<img src="./cat.jpg" alt="猫の画像" width="100%">
	<img src="./cat.jpg" alt="猫の画像" width="80%">
</body>
  • 02: width="100%" (画像の横幅を親要素の横幅の 100% の値と設定しています。)
  • 03: width="80%" (画像の横幅を親要素の横幅の 80% の値と設定しています。)
実行結果:
猫の画像 猫の画像

目次に戻る