透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件

タイムライン

透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件

透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件

CSS初心者さんにささぐ。

色を諸々制御するCSSのプロパティーに「Color」ってのがありますが、この「Color」で色を指定するときどう書きますか?

#fffとかで書きますか?

実は、この「Color」の指定方法は大別すると3種類在りまして、

CSSのcolorプロパティーの値
  • CSSで定義済みの色「red」とか「blue」とか
  • RBGの値(16進数)「#ffddcc」とか「#112233」とか
  • RBGの値(10進数)「rgb(0 0 0)」とか「rgb(255 255 255 0.5)」とか

初心者向けの本なんかでは例えば白を指定する場合は

#ffffff、もしくは省略して#fff

等で書いているコトがよくあると思います。

RGBの16進数で書けば

rbg(255 255 255)と、表記することが出来ます。同じ意味です。

得られる結果は同じですが、知っておくべき概念として

Webセーフカラーとは 【web safe colors】 – 意味/解説/説明/定義 : IT用語辞典

webデザインをする場合、閲覧する環境が、閲覧する人によって変わるという考え方を常に持たないといけません。

webデザインにおける色の指定のおさらいをサラッと終わらせて、本題に入ります。

今回使うのは、RGBの10進数の話

RGBで色を指定する場合には、RGBAとしてA(alphaつまりは透明度)を扱えるようになります。

rgba()-CSS3リファレンス

透明度が使えるようになると、webデザインがかなり楽になるんですよね。

まずはズルいデザインを知ろう

透明度が使えるようになると、こんな感じで、ずるいことが出来るようになります。

実際に同じ効果を16進数のRGBで指定しようとすると、なかなかにトライアルアンドエラーの回数がえげつないんです。

濃淡は透明度で指定する

これが出来るようになるだけで、だいぶ助かります。

こういう端を折り返したデザイン

よく見ますね?ちなみにコードの描き方は

.orikaeshi {
background: #8bcdba; /* 背景の色 */
color: #fff; /* 文字の色 */
padding: 10px 25px 10px 10px;
position: relative; /* 折り返し部分の位置制御のため */
}
.orikaeshi:after {
width: 0;
height: 0;
content: "";
position: absolute; /* 折り返し部分の位置制御 */
bottom: 0;
right: 0;
border: 10px solid rgba(0, 0, 0, 0.2);
border-right-color: #fff; /* コンテンツの背景色と同じ色 */
border-bottom-color: #fff; /* コンテンツの背景色と同じ色 */
}

border

コードの詳しい解説は省きますが、要するに、疑似要素のafterを使って折り返し部分を描画しています。

CSS脱初心者への道!疑似クラスと疑似要素を理解すると表現が広がるよ!*prasm

ポイントは、14行目!

折り返された部分の色を指定する部分。ここに透明度を持ったRGBAで真っ黒(0 0 0)の透明度を(20%)と指定することで、濃淡を表現しています。

透明度を使えば、背景のグリーンの上に、透けた黒が載っている状態にすることが出来ます。

こうなるとどう便利なのか??

例えばグリーンからピンクに変えたくなったとき圧倒的に楽になります。

ピンクに!

.orikaeshi {
background: #f59587;
color: #fff;
padding: 10px 25px 10px 10px;
position: relative;
}
.orikaeshi:after {
width: 0;
height: 0;
content: "";
position: absolute;
bottom: 0;
right: 0;
border: 10px solid rgba(0, 0, 0, 0.2);
border-right-color: #fff;
border-bottom-color: #fff;
}

折り返し部分の色を変えなくとも、クラスの背景色を一行変更するだけで手軽に色の変更が出来るようになります。

他の部分は全く変更を加えずに。

こういう端を折り返したデザイン

ピンクに!

コードを一行書き換えるだけで劇的な変化を加えることが出来るようになります。

メンテナンスの面でもどれだけ楽になるか、おそらくわかっていただけるかと。

色の指定の方法は複数合って、透明度が使えると捗る

ズルいデザインの延長ですが、ちょっとだけのアイデアでwebデザインは面白くなります。

疑似要素を使った凝った装飾だけでなく、<div>の背景を透過したい場合でも使えます。

カラーチャートなwebページもたくさんありますので、10進数RGBでお気に入りの色を指定してみるのもいいかもしれません。

500+ Named Colours with rgb and hex values

webセーフカラーという考え方はとても大事ですが、そこから少し自由になるだけで表現の幅は恐ろしく広がります。

一度お試しあれ。

文:シンタロヲフレッシュ

一緒に読んで欲しい記事

前の記事(Previous)
CSS脱初心者への道!疑似クラスと疑似要素を理解すると表現が広がるよ!
次の記事(Next)
[CSS] olの数字をCSSでいい感じに装飾する方法