文字の色を透明にして見えなくする方法を4つ紹介します。
opacityを使う
いちばん簡単で、最初に思いつくのは「opacity:0;」を指定する方法です。
.sample {
opacity:0;
}
opacityの値は0〜1の間で指定し、「0」が完全に透明、「1」が完全に不透明な状態になります。
transparentを使う
続いては「color:transparent;」を指定する方法です。
.sample {
color:transparent;
}
RGBAを使う
RGBAを使うのも有効です。
.sample {
color:rgba(255,255,255,0);
}
rgba()は、RGBAカラーモデルで色を指定するテクニックです。
rgba()で色を指定する際には、カンマ（,）区切りにした3つの数値でRGBの色を指定した後、第4引数で透明度を指定します。
なお透明度はopacityの時と同じく「0」が完全に透明、「1」が完全に不透明になります。
たとえば白色color:rgb(255,255,255);を50%の不透明度にしたい場合は次のように記述します。
.sample {
color:rgba(255,255,255,0.5);
}
visibilityを使う
visibilityプロパティは、要素の表示・非表示を指定する際に使用します。
.sample {
visibility:hidden;
}
「display:none;」と「visibility:hidden;」の違い
「display:none;」は要素の存在が完全に無いものとして扱われますが、「visibility:hidden;」では要素の存在はそのままに、単に見えない状態になります。
