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

CSSのheightプロパティの使い方｜画像の高さをpxや%で指定する方法

CSSのheightプロパティは、画像などの要素の高さを指定するために使用されます。値には「px」「em」などの長さ単位、または「%（パーセント）」を指定できます。パーセントで指定した場合は、その画像が配置されている親ボックス（包含ブロック）の高さを基準として計算される点に注意しましょう。

heightプロパティの基本的な書き方

heightプロパティは、以下のような構文で記述します。

セレクタ {
  height: 値;
}

使用例：画像の高さを設定する

次のコードでは、1つ目の画像はピクセル（px）で固定の高さを指定し、2つ目の画像はパーセント（%）で相対的な高さを指定しています。実際にブラウザで実行して動作を確認してみてください。

<html>
   <head>
   </head>
   <body>
      <img style = "border:2px solid green; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:2px solid green; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

コードのポイント解説

  • height:100px; … 画像の高さを100ピクセルに固定します。ウィンドウサイズに関係なく常に同じ高さで表示されます。
  • height:50%; … 親要素（ボックス）の高さに対して50%の高さになるよう指定します。親要素のサイズによって表示が変化します。
  • border:2px solid green; … 画像の周囲に2pxの緑色の枠線を引くことで、高さの違いが視覚的にわかりやすくなっています。

heightプロパティで指定できる主な値

  • auto（初期値）… ブラウザが自動的に高さを算出します。
  • length … px、em、remなどの単位で具体的な高さを指定します。
  • % … 包含ブロック（親要素）の高さに対する割合で指定します。

補足として、画像の縦横比を維持したまま高さだけ変更したい場合は、widthプロパティにautoを指定しておくと、歪まずに自然に表示されます。レスポンシブデザインでは%やビューポート単位（vh）と組み合わせて活用されることも多いので、用途に応じて適切な指定方法を選びましょう。

  1. CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

    transform-originプロパティとは？ CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。 デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。 値の指定方法は主に以下のとおりです。 キーワード： top、bottom、left、right、center など パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定 長さ（px、em な

  2. CSSのtransformプロパティで要素を変形させる方法

    CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。 transformプロパティの基本的な使い方 transformプロパティには、主に以下のような変換関数を指定できます。 rotate()：要素を指定した角度で回転させます scale()：要素のサイズを拡大・縮小します translate()：要素をX軸・Y軸方向に移動させます skew()