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

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

RGBAカラーってなんなの？

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

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

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

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

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

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

透過を強くしてみた例

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

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

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

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

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

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

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

まとめ

といったところでしょうか。ＩＥよりはスマホ優先の方が、時流的にはよさそうです。グラデや淡い色合いもうまく使って、ユーザーが見やすい＆ブランド力のあるサイトを作っていきましょう。