サイト製作をしているときに、ヘッダーやボタンなど、なんとなく半透明にしたいときがあります。
不透明のデザインでも格好いいですが、
抜け感的な演出をしたいときに半透明を設定すると中々格好よく仕上がるんですよね。
今回はそんな時に使うopacityの使い方について紹介します。
opacityの使い方
opacityは0～1の数値を設定して使います。
0が透明、1が不透明なのでやや透けさせたいときは0.9など様子を見ながら設定していきます。
どのように記述するのか例をどうぞ↓
.test{
opacity: 0.9;
}クラスやIDを指定してopacity、数値をセットするだけでOK！簡単ですね。
ヘッダーを半透明にしたい！という場合は？
ヘッダーを半透明にすると格好いいですよね。
ちょうど私のサイトも、ヘッダー半透明にしていないので実際やってみましょう。
試しにスクロール時のヘッダーを半透明にしますよ
今回はスクロール時の半透明にしたいので頑張ります。
Windows使ってるのでWindowsのやり方ですみません。
あとブラウザはchromeでお願いします。
右クリックしたのち、一番下の検証をクリックします。
そしたら上の画像のような画面になるんで、ここからclassやIDを調べていきます。
- この矢印みたいなやつをクリック
- 半透明にしたいヘッダーにマウスカーソルをもっていく
- マウスカーソルを持って行ったところに色がつくので、ここらへんに該当classまたはIDがあることがわかるようになります（必ずしも色がついたところに目当てのclassやIDがあるわけではないです）
試しにグレーになった箇所にopacityを設定していけるのか確認していきます。
上の段じゃなくて下の段の適当なところにopacity:0.7やらなんやら書いてみて効果が現れるか確認します。
今回はロゴやメニューバーの文字のみ半透明になってしまったので、ここじゃないことがわかります。
- ①の中のSTEP2でグレー箇所でopacityを入れてみてもダメだったので、近くのそれっぽい個所をクリックして、
- ②の場所で手あたり次第opacity入れていきます。今回はスクロールした時のヘッダーなので、大体こういうのはscrollなどわかりやすいclassがついてることが多いのでっぽいやつを見つけるのは結構簡単です。
- 確認して効果が出てたら効果が出たclassやIDをまるごとコピーしときます。
カスタマイズの追加CSSにコピーしたclassやIDをいれて、opacityを指定して公開で終わり！
お疲れ様でした～！(^O^)ﾉ
簡単でイイネ！
opacity、ウェブデザインを始めて割と初期に覚えた便利なCSSです。
まとめると長くなっちゃうけども、やれば簡単なのでぜひ。
ヘッダーのclassとかID探すのがやや大変なテーマもあると思うんですけど、打てば当たるので頑張りましょう。
