【CSS Modules】shape-image-thresholdプロパティの使い方
shape-image-thresholdプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
shape-image-thresholdプロパティは、CSSにおいて、画像の透明度に基づいてフローティング要素の周囲にカスタムの形状を作成する際に、どの透明度を形状の境界と見なすかを定義する値を保持するプロパティです。このプロパティは主にshape-outsideプロパティと組み合わせて使用され、画像を用いてテキストの回り込み形状を詳細に制御します。
具体的には、shape-outsideプロパティに画像が指定された場合、shape-image-thresholdプロパティは、その画像のどの部分をテキストが回り込むための形状として利用するかを決定します。値は0.0（完全に透明）から1.0（完全に不透明）までの数値を設定できます。0.0を設定すると、画像内の透明な部分も形状の対象となり、画像全体の輪郭が形状の対象となります。一方、1.0を設定すると、完全に不透明な部分のみが形状として認識され、画像の不透明な領域に沿ってテキストが回り込みます。例えば、0.5を設定すると、50%以上の不透明度を持つ部分が形状として扱われます。
このプロパティを使用することで、ウェブページ上でテキストを画像の複雑な輪郭に沿って配置できるようになり、単なる四角形ではない、より柔軟で視覚的に魅力的なレイアウトを実現することが可能になります。これにより、デザインの表現力が大幅に向上します。
公式リファレンス: shape-image-threshold
構文(syntax)
1shape-image-threshold: 0.5;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません