サイトがカッコ良くなるCSS～RGBAカラーやグラデーションで微妙な色合いも表現

投稿：2017/10/01｜ 更新： 2021/03/04 219文字

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS（スタイルシート）を扱います。使うテクは『RGBAカラー＆グラデーション』画像なしグラデだと、サイト容量も少し落とせるかもしれません。さっそくＣＳＳでのやりかたを見ていきます。

1 RGBAカラーってなんなの？
2 RGBAカラーを使うＣＳＳ書き方
3 まとめ

RGBAカラーってなんなの？

イラスト制作ツールとか使っている方にはおなじみかもしれませんが、こんな感じでRGBAの割合を変えて色を作ります。

RGBAカラーを使うＣＳＳ書き方

注：たぶん大丈夫だと思うけど『透過対応してるブラウザ』で見ていただければと思います（古いＩＥ用コードとか書いていません）

セレクタやプロパティに色をつけたいところ、赤・緑・青・透過の順で

この領域に RGBAカラー指定してます。

ちょっと作ってみました。全体ＣＳＳはめんどいので、インラインで上記の場所だけに書きました。背景ということなので『background-color』としました。


<div style="width:90%; 
background-color: rgba(0,120,255,1);">文章</div>

通常だとcolor:#ffffffみたいにカラーコードを指定したりもしますが、ＣＳＳでRGBAカラーのときは赤・緑・青・透過の順で指定します。G（緑）が少し混ざって、淡いブルーになりました。最後の『1』は透過で、『1だと不透過100％、0.5だと透過50％、0だと透過100％』という形です。

透過を強くしてみた例

この領域に RGBAカラー指定してます。


<div style="width:90%; 
background-color: rgba(0,120,255,0.5);">文章</div>

さらにa(アルファ)を操作して、半透明に。0.5にしてみました。

RGBAカラーとグラデーション合わせ技

この領域に RGBAカラー・グラデーション指定してます。


<div style="width:90%; 
background:linear-gradient(rgba(255,255,255,1), rgba(0,120,255,1));">
文章</div>

さらにカッコよくする技として、グラデーション（linear-gradient）を。白（255,255,255）から、淡いブルー（0,120,255）へと、徐々に変化します。

（旧ブラウザの方向け）RGBAカラーとグラデーション表示例

古いＩＥ用コードは書いてなかったので（またはグラデーション対応してない）、上記のＣＳＳが表示できないかもしれないので画像を用意しました。この画像のようなグラデーションがかかります。

ＩＥバージョン11では表示できました。これは2017年9月で24%のシェアがあります。最近ではＩＥ８．９．１０あわせて数パーセントのシェアなので、だんだん気にしなくなってもよくなっています。特にグラデーションや透過表示に難があるのは８以前でした。

また、最新ブラウザでは大丈夫っぽいんですけど、ベンダープレフィックス指定（-webkit-linear-gradientや-moz-linear-gradient、-ms-linear-gradient）も覚えておくと良いかもしれません。管理人も2012年ころはこれ書いてました。ルナスケープでレンダリングエンジン切り替えたりして（笑）