webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/03/04

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

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

RGBAカラーってなんなの?

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

RGBAカラーを使うCSS書き方

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

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

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

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

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

通常だとcolor:#ffffffみたいにカラーコードを指定したりもしますが、CSSで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カラーとグラデーション表示例

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

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

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

まとめ

  • RGBAカラーだと透過などもok(opacityと使い分ける)
  • linear-gradientでグラデーションもつけられる
  • IE8あたりだと表示が崩れる可能性があるが、使っている人ほとんどいない
  • ベンダープレフィックスも覚えておくといい

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


【カテゴリ】 - CSS
【タグ】 -

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...