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

HTMLのheight属性とは？使い方と対応要素をわかりやすく解説

HTMLのheight属性は、要素の高さを宣言するために使用される属性です。値は基本的にピクセル（px）単位で指定します。

height属性の基本

注意： HTML5以降では、高さを「%」（パーセント）で指定する方法のサポートが廃止されました。そのため、height属性には数値のみを指定します。

height属性を持つ主なHTML要素は以下の通りです。

  • canvas
  • embed
  • iframe
  • img
  • input
  • object
  • video

これらの要素に対してheight属性を設定することで、ページ上に表示される際の縦幅を明示的に制御できます。特に画像や動画などのメディア要素では、レイアウトの崩れを防ぎ、ページ読み込み時の表示ずれ（レイアウトシフト）を抑える効果もあります。

Video heightプロパティの使用例

ここでは、video要素のheightプロパティを使った具体例を紹介します。ボタンをクリックするたびに、動画の高さが50pxずつ増加する仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video height</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-height</legend>
<video id="wordPressIntro" width="320" height="50" controls><source src=" https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Video Not Visible">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var wordPressIntro = document.getElementById("wordPressIntro");
    function getTrackDetails() {
        wordPressIntro.height += 50;
        divDisplay.textContent = 'Video height: '+wordPressIntro.height;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような動作になります。

1）「Video Not Visible」ボタンをクリックする前：

動画は初期状態として高さ50pxで表示されています。

HTMLのheight属性とは？使い方と対応要素をわかりやすく解説

2）「Video Not Visible」ボタンを3回クリックした後：

クリックのたびにheightプロパティへ50pxが加算され、動画の高さが段階的に大きくなります。同時に、画面下部のdiv要素に現在の動画の高さ（ピクセル数）がテキストとして表示されます。

HTMLのheight属性とは？使い方と対応要素をわかりやすく解説

まとめ

height属性は、canvas・iframe・img・videoなどのメディア系要素の高さをピクセル単位で指定できる便利な属性です。HTML5ではパーセント指定が廃止されている点に注意しながら、JavaScriptのDOM操作と組み合わせれば、このように動的に高さを変更することも可能です。

  1. HTML pattern属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのpattern属性は、<input>要素に入力された値が、あらかじめ指定した正規表現に一致するかどうかを検証するための属性です。この属性を活用すれば、JavaScriptを書かなくてもブラウザ側で手軽に入力チェック（バリデーション）を実装でき、フォームの利便性を高めることができます。pattern属性を指定した入力欄に正規表現と一致しない値が入力された場合、フォーム送信時にエラーメッセージが表示され、送信がブロックされます。利用できるのはtext・search・tel・url・email・passwordなどのテキスト系入力タイプです。構文pattern属性の基本構文は次

  2. HTML DOMのVideo heightプロパティの使い方を解説

    HTML DOMのVideo heightプロパティは、メディア（動画）の高さに対応する数値（ピクセル単位）を取得・設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に動画要素の表示サイズを制御できるようになります。 構文heightプロパティの構文は以下のとおりです。 height値の取得（ピクセル単位）mediaObject.height height値の設定（ピクセル単位）mediaObject.height = number それでは、Video heightプロパティの具体的な使用例を見ていきましょう。 サンプルコード<!DOCTYPE h