-
HTML/CSS
- background
- css
- html
- transparent
background-colorに透明色(transparent)を設定する方法と用途
webページを制作するにあたって、背景色に普通に色を付けるだけでは何か単調な印象を与えてしまいがちですが、透明色を設定するtransparentプロパティを使用することで、現代風のおしゃれな印象を持たせる事ができます。基本的な用途や作品例をご紹介しますので、是非使いこなせるようになりましょう。慣れてきたら応用して自分の個性を出してみてください。
HTML、CSSを作成する
まずは、今回の例で使用するHTML、CSSのコードを紹介します。
ファイル構成 ※scssファイルを作成していますが、学習されていなくても理解できる構成にしているので安心してください。
index.htmlファイルとstyle.cssファイルにコードを記述していくことになります。
imagesフォルダには背景画像の海の写真がbackground-image.jpgというファイル名で入っています。
scssファイルを作成していますが、次からのコードはcssの形で記述しているのでscssの使用方法が分からない方も安心して読み進めてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>backgroundcolor-transparent</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="img-wrapper">
<button>
<a href="#">ボタン</a>
</button>
</div>
</body>
</html>.img-wrapper-ly {
position: relative;
background-image: url(../images/background-image.jpg);
width: 900px;
height: 600px;
background-size: cover;
margin: 0 auto;
}
.img-wrapper-ly button {
width: 200px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-decoration: none;
background-color: red;
border: 3px solid white;
border-radius: 10px;
}
.img-wrapper-ly button a {
font-size: 40px;
text-decoration: none;
color: white;
}構成としては至ってシンプルなものになっており、img-wrapperというクラスをつけたdiv要素の中にbackground-imageプロパティで海の画像を背景として設定しています。
その中にbutton要素でボタンを配置。現在はボタンの背景色をbackground-colorプロパティでredと指定しています。
これにより、背景色が赤色になっているのが確認できるかと思います。
余談ですが、ボタン要素を上下左右中央配置にしたい場合、上のコードのようにpositionプロパティと、transformプロパティを用いて指定する方法がたびたび見られるので覚えておいて損はないかと思います。
現段階でのHTMLをブラウザで表示すると、下図のようになっています。
ボタン要素の背景色を透明にする
次に、現在、button要素のbsckground-colorプロパティに設定されているredという部分をtransparentに書き換えてみましょう。
background-color:transparent;すると、下図のようにbutton要素のbackground-colorが透明になり、下の海の画像が見えるようになりました。
少しおしゃれなボタンが作成できました。こういったレイアウトのボタンをwebサイトで見ることも多いと思います。
これだけでもとても見栄えの良いものができますが、疑似クラスであるhoverと組み合わせてみると、動きが出てさらにおしゃれに作れます。
transparent以外で透明色を設定する
transparentで透明にする以外にも、透明色を設定する方法があります。
それは、rgba()を使用する方法です。
transparentを使用する場合との違いは、完全に透明にするのではなく、少しだけ背景を透かすという表現ができることです。background-colorプロパティを下のように書き換えてみましょう。
background-color:rgba(255, 255, 255, 0.2);その状態でHTMLファイルをブラウザで表示してみると次のようになります。
button要素の背景色が少し白っぽくなりつつ、背景画像の空の部分も見えているのが分かりますでしょうか。
このrgba()という記法を使用すると、rgb()で色指定するものに加えて、不透明度といものを設定できます。
上のコードの『0.2』と記述されている部分がそれにあたります。
この値が『1』に近づくほど透明ではなくなり、『0』に近づくほど透明になります。
この部分の数値を自身で変更してみて、どういった色合いになるか試してみてください。
少し応用してグラデーションを設定する
背景色にグラデーションで透明色を設定してみましょう。
background-colorプロパティを設定していた部分を、下のように書き換えてみてください。
background:radial-gradient(transparent,white);すると、ブラウザでの表示は次のようになります。
外側が白くなっており、中央にいくにつれて透明になっているのが確認できるかと思います。
radial-gradientは円形のグラデーションを付与するものです。
線形のグラデーションを設定する場合はlinear-gradientを使用します。
グラデーションを設定する場合、background-colorプロパティではなくbackgroundプロパティを使用しないと適用されないので注意してください。
まとめ
taransparentでどんな事ができるのか理解していただけたでしょうか。
ただ単純に透明色を設定するだけではなく、グラデーションやrgba()を使用することで全く違う表現の仕方をすることができます。
今回はボタンの背景色という形で紹介しましたが、その他にも様々な用途で使用されているのをいろんなwebサイトで確認できます。
何かのページを見る際に、どんな使われ方をしているのか気にしてみると自分の技術に幅が出てくると思いますのでそういった視点からも勉強してみてください。
