HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのheight属性とwidth属性の使い方を徹底解説

HTMLにおけるheight属性とwidth属性とは？

HTMLのheight属性（高さ）とwidth属性（幅）は、要素の縦横のサイズを指定するために使用される属性です。値は「px」（ピクセル）単位で設定します。

これらの属性を適切に指定することで、画像や埋め込みコンテンツが表示される前にレイアウトの領域が確保され、ページ読み込み時のガタつき（レイアウトシフト）を防ぐ効果も期待できます。

height属性・width属性が使用できる主なHTML要素

height属性とwidth属性は、以下のHTML要素で使用できます。

番号要素height属性width属性
1<canvas>（図形描画領域）○○
2<embed>（外部コンテンツ埋め込み）○○
3<iframe>（インラインフレーム）○○
4<img>（画像）○○
5<input>（入力フォーム）○○
6<object>（外部リソース）○○
7<video>（動画）○○

<img>タグでの使い方

HTMLページに画像を表示するには<img>タグを使用します。その際、height属性とwidth属性を組み合わせることで、画像の高さと幅をピクセル単位で明示的に指定できます。

特に<img>タグでは、あらかじめサイズを指定しておくことで、ブラウザが画像を読み込む前に表示領域を確保できるため、ページ表示速度の指標であるCLS（Cumulative Layout Shift）の改善にも役立ちます。

サンプルコード

以下のコードを実行して、HTMLでのheight属性とwidth属性の実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML height and width attribute</title>
   </head>
   <body>
      <img src="https://www.tutorialspoint.com/green/images/logo.png" alt="Simply Easy Learning" width="200" height="70">
   </body>
</html>

補足：CSSとの使い分けについて

近年では、レスポンシブデザインに対応させるために、サイズ指定をCSS（style属性や外部スタイルシート）で行うのが一般的です。ただし、画像のアスペクト比を維持しつつ初期レイアウトを安定させる目的では、HTML属性でのwidth・height指定が今なお推奨されています。用途に応じて両者を上手に使い分けるとよいでしょう。

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali