HTML・CSS: テキストを半透明にする

HTMLで記述するテキスト(文字)を半透明にしたい場合は、 CSSのopacityプロパティを使用します。

opacityは要素の透明度を指定するために使用し、 「0~1」の範囲で値を指定します。 「1」が不透明で「0」が完全な透明です。

理論上、半透明は「opacity: 0.5」になりますが、 文字色や背景色など サイトによって見え方は異なりますから、 実際に表示してみて値を微調整してください。

次のサンプルコードではopacityの値を複数設定して、 透明度を比較しています。

<p style="opacity: 1">opacity: 1</p>

<p style="opacity: 0.75">opacity: 0.75</p>

<p style="opacity: 0.5">opacity: 0.5</p>

<p style="opacity: 0.2">opacity: 0.2</p>

■ 表示結果

opacity: 1

opacity: 0.75

opacity: 0.5

opacity: 0.2

HTML・CSS入門