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

CSSのscaleY()を使って要素の高さを変更する方法

CSSで要素の高さを変更するには、scaleY()メソッドを使用します。scaleY()は、要素をY軸（縦）方向に拡大・縮小するためのtransform関数で、高さの調整をシンプルに実現できます。

scaleY()の構文

構文は以下の通りです。

scaleY(n);

ここで、nはスケール係数（倍率）を表す数値です。1より小さい値を指定すると要素は縦方向に縮小され、1より大きい値を指定すると拡大されます。1を指定した場合は元のサイズのまま変化しません。

scaleY()の使用例

以下は、scaleY()を使って要素の高さを変更する具体例です。

div {
    width: 40px;
    height: 50px;
    background-color: black;
}
.myScaled {
    transform: scaleY(0.9);
    background-color: orange;
}

この例では、幅40px・高さ50pxの黒い背景を持つdiv要素を基本スタイルとして定義しています。そして、transform: scaleY(0.9)を適用したクラス「myScaled」を用意しました。このクラスが適用された要素は、元の高さの90%に縦方向へ縮小され、背景色がオレンジ色に変わります。

このようにscaleY()を使えば、要素の実際の高さプロパティを変更することなく、表示上の高さだけを柔軟に調整できます。アニメーションやホバー効果と組み合わせれば、動きのあるインタラクティブな表現にも活用できます。

  1. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用

  2. CSSでウィンドウの高さ100%のDIVを作成する方法

    CSSのheightプロパティを使うと、要素の高さを自由に指定できます。ウィンドウ（ビューポート）の高さいっぱいに要素を表示したい場合は、heightプロパティとvh単位を組み合わせるのが一般的です。この記事では、ウィンドウの高さ100%のDIVを作成する具体的な方法を、サンプルコード付きでわかりやすく解説します。heightプロパティの構文CSSのheightプロパティは、次のように記述します。Selector {    height: /*値*/ }値にはpxや%などの絶対・相対単位を指定できます。親要素に対する割合（%）で高さを指定する場合、親要素にも明示的に高さが設