CSS | spanにtransformプロパティが効かない原因と解決策

2022-10-11CSS トラブルシューティング,CSS

CSSのカスタマイズで<span>タグにtransformプロパティが効かない原因と対策を紹介しています。

spanにtransformプロパティが効かない原因

<span>要素は「display」プロパティのデフォルト値が「inline」となっています。

「display」プロパティが「inline」には要素のサイズを必要とする「transform」プロパティが効かず、反映されない事が原因となっています。

例えば、以下のCSSコードは「transform」プロパティが反映されません。

span {
	transform: rotate(45deg);
}

spanにtransformプロパティが効かない場合の解決策

この問題を解決するには、<span>要素の「display」プロパティを「inline-block」などに変更する必要があります。

span {
	display: inline-block;
	transform: rotate(45deg);
}

また、「display」プロパティを「block」にした場合は、段落として扱われてしまいますので注意が必要です。