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

HTML DOMのverticalAlignプロパティとは？使い方と設定値を徹底解説

HTML DOMのverticalAlignプロパティは、HTMLドキュメント内の要素コンテンツの垂直方向の配置（縦位置）を取得および変更するために使用されます。テーブルセル内のテキストや画像の位置調整などに活用できる便利なプロパティです。

構文

verticalAlignプロパティの基本的な構文は以下の通りです。

値の取得

object.style.verticalAlign

値の設定

object.style.verticalAlign = "value"

設定できる値

valueには以下の値を指定できます。

値説明
initialプロパティの値をデフォルト値に設定します。
inherit親要素からプロパティの値を継承します。
length要素を指定した長さ（px、emなど）だけ上下に移動させます。
percentage(%)line-heightプロパティに対する割合で要素を上下に移動させます。
baseline要素のベースラインを親要素のベースラインに揃えます。
sub要素を下付き文字（添え字）として配置します。
super要素を上付き文字（累乗など）として配置します。
top要素の上端を行内で最も高い要素の上端に揃えます。
text-top要素の上端を親要素のフォントの上端に揃えます。
middle要素を親要素の中央に配置します。
bottom要素の下端を行内で最も低い要素の下端に揃えます。
text-bottom要素の下端を親要素のフォントの下端に揃えます。

サンプルコード

それでは、HTML DOMスタイルのverticalAlignプロパティの具体的な使用例を見ていきましょう。ボタンをクリックすると、テーブルセル内のテキストが上寄せに変更される例です。

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   table {
      border: 2px solid #fff;
      height: 150px;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
   }
</style>
</head>
<body>
<h1>DOM Style verticalAlign Property Example</h1>
<table>
<tr>
<td id="myTd">Table Data</td>
</tr>
</table>
<button onclick="add()" class="btn">Set verticalAlign</button>
<script>
   function add() {
      document.querySelector('td').style.verticalAlign = "top";
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOMのverticalAlignプロパティとは？使い方と設定値を徹底解説

「Set verticalAlign」ボタンをクリックすると、テキストの垂直配置が上寄せ（top）に調整されます。

HTML DOMのverticalAlignプロパティとは？使い方と設定値を徹底解説

まとめ

verticalAlignプロパティを使えば、JavaScriptから動的に要素の縦位置を制御できます。特にテーブルレイアウトやインライン要素の配置調整において、baseline、middle、top、bottomなどの値を使い分けることで、柔軟なデザインが可能になります。

  1. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明