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

HTMLで要素の高さを設定する方法【height属性の使い方】

HTMLで要素の高さを指定するには、height属性を使用します。この属性は、<canvas>、<embed>、<img>、<input>、<video>などの要素と組み合わせて利用できます。

height属性の基本

height属性にはピクセル単位の数値を指定します。例えば「height="200"」と記述すると、要素の高さが200ピクセルに設定されます。通常はwidth属性（幅）とセットで指定することで、要素全体のサイズをコントロールできます。

なお、現代のWeb開発ではレイアウトやスタイルはCSSで管理するのが一般的ですが、画像や動画といったメディア要素については、ブラウザが読み込む前に領域を確保できるというメリットがあるため、height属性が今でも広く使われています。

使用例

以下のコードは、video要素にwidth属性とheight属性を指定して、動画プレーヤーのサイズを設定する実装例です。実際に動作を確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素に対応していません。
      </video>
   </body>
</html>

まとめ

HTMLのheight属性を使えば、<img>や<video>などの要素の高さを簡単に指定できます。幅（width属性）と併せて設定することで、ページ表示時のレイアウト崩れを防ぎ、より快適なユーザー体験を提供できます。

  1. HTMLの<title>要素の正しい使い方とSEO対策のポイント

    この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。 ページタイトルの確認方法 閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。 以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値