【CSS Modules】mask-sizeプロパティの使い方

mask-sizeプロパティは、CSSのマスキング機能において、要素に適用されるマスク画像のサイズを制御するプロパティです。このプロパティを使用することで、指定したマスク画像を要素の特定部分にどのように表示させるかを細かく調整することができます。

具体的には、マスク画像の幅と高さを設定し、そのマスクが要素全体にどのようにフィットするか、またはどのくらいの大きさで表示されるかを決定します。値の指定方法にはいくつか種類があります。たとえば、「contain」と設定すると、マスク画像はそのアスペクト比を保ったまま、マスク領域内に完全に収まる最大のサイズに拡大縮小されます。一方、「cover」と設定すると、マスク画像はマスク領域全体を覆う最小のサイズに拡大縮小され、はみ出した部分は切り取られます。

また、具体的な長さの単位（px、emなど）やパーセンテージ（%）を使用して、マスク画像の幅や高さを直接指定することも可能です。一つの値を指定した場合、それはマスク画像の幅となり、高さは自動的に調整され、アスペクト比が維持されます。二つの値を指定した場合は、それぞれが幅と高さに対応します。

このプロパティは、mask-imageプロパティなどで指定されたマスク画像を、目的の視覚効果に合わせて適切に配置し、サイズを調整する際に非常に重要です。要素の一部を特定の形状で切り抜いたり、複雑な透過効果を作成したりする際に、マスクの適用範囲や見え方を柔軟に制御するために利用されます。ウェブサイトのデザインにおいて、より洗練されたレイアウトやグラフィック表現を実現するために欠かせないプロパティの一つです。

Copy
1mask-size: 100px 50px;

引数なし

引数はありません

戻り値なし

戻り値はありません