CSSのtransform-originプロパティで変形要素の基準位置を変更する方法
CSSで変形（transform）された要素の回転や拡大縮小の基準となる位置を変更したい場合は、transform-originプロパティを使用します。
デフォルトでは、変形の基準点は要素の中心（50% 50%）に設定されていますが、transform-originプロパティを使うことで、この基準点を自由に変更できます。これにより、要素を回転させた際の見た目や動きを細かくコントロールすることが可能になります。
transform-originの基本的な使い方
transform-originプロパティには、以下のような値を指定できます。
- キーワード値：top、bottom、left、right、center など
- パーセンテージ：30% 40% のように、要素の幅と高さに対する割合で指定
- 長さの単位：px、em などの絶対的な値で指定
実装例
以下のコードでは、青色の内側の要素にtransform: rotate(10deg)で回転を適用し、さらにtransform-origin: 30% 40%を指定することで、回転の基準点を要素の左上から横方向に30%、縦方向に40%の位置に移動させています。
<!DOCTYPE html>
<html>
<head>
<style>
.demo1 {
width: 300px;
height: 300px;
background-color: yellow;
}
.demo2 {
width: 200px;
height: 200px;
background-color: orange;
}
.demo3 {
width: 100px;
height: 100px;
background-color: blue;
transform: rotate(10deg);
transform-origin: 30% 40%;
}
</style>
</head>
<body>
<h1>Rotation</h1>
<div class = "demo1">Demo
<div class = "demo2">Demo
<div class = "demo3">
Demo
</div>
</div>
</div>
</body>
</html>
コードのポイント
.demo1（黄色）：300px × 300px の外側のコンテナ要素.demo2（オレンジ）：200px × 200px の中間の要素.demo3（青）：100px × 100px の要素に10度の回転とカスタム基準点を適用
transform-originの値を「0% 0%」にすれば左上隅、「100% 100%」にすれば右下隅が基準点になります。実際にブラウザで表示して、値をいろいろ変更しながら回転の挙動の違いを確認してみてください。
-
CSSのvisibilityプロパティで要素の表示・非表示を制御する方法
CSSのvisibility（可視性）プロパティは、ドキュメント内で要素を表示するかどうかを指定するために使用されます。要素自体はレンダリングされますが、visibilityがhiddenに設定されている場合は画面上には表示されません。なお、visibilityと似た役割を持つdisplay: noneとの大きな違いは、hiddenを指定しても要素の占めるスペースは保持されるという点です。レイアウトを崩さずに要素だけを一時的に隠したい場合に非常に便利です。visibilityプロパティで使える値要素の可視性を制御するために指定できる主な値は以下のとおりです。番号値と説明1visibleデフォル
-
CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方
CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1