wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

   

こんにちは、管理人@SS_mshpです。

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタイルシート)を扱います。

使うテクは『RGBAカラー&グラデーション』画像なしグラデだと、サイト容量も少し落とせるかもしれません。さっそくCSSでのやりかたを見ていきます。

■RGBAカラーってなんなの?

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

なお、印刷するときには光でなくてインクの色合いである『CMYKカラー』になるので、少し色合いが変わります。今回のコラムでは、このRGBAカラーを、CSS(スタイルシート)に使ってみます。

■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よりはスマホ優先の方が、時流的にはよさそうです。グラデや淡い色合いもうまく使って、ユーザーが見やすい&ブランド力のあるサイトを作っていきましょう。



【カテゴリ】 - webサイト制作 【タグ】 -

  関連記事

ワードプレスの『AllinOne SEOPack』って、なぜ・どんな仕組みで検索に強くなるの?

今回は、ワードプレスの検索エンジン最適化用プラグインが、どんな仕組みで検索に強くなるのかを調べます。 All in One SEO Packというと、Yoast …

【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディングアニメ)をつけてみます。 実装しやすい、プラグイン形式のものを試してみました。さっそく …

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もSSL暗号化接続が可能になったのでやってみます。 社会的信用はいまいちだけど(fc2動画の …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部分の更新情報を表示』する方法について考えてみます。 方法は『phpで更新情報取得して表示 …

【ワードプレスサイト製作】俺の最低限なインストールプラグイン晒す 

今回は、ねた準備中につき雑談です。 管理人はワードプレス勢ですが、なるべくプラグインは少なくなるようにしています。どういうのをインストールしているか、さっそくみ …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵はイラストacさんからお借りしました。CSS3では、カンタンなアニメーションを実装できるの …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき、困ったことがあったので、対処方法を紹介します。 ワードプレスのファイル構成やCSSの学 …

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワードプレスを使って、サクッと導入します。 twitterでも話題になったhttpページ(S …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作ってみます(うまくいくかは微妙です)。 画像はfreeimages.comさんからお借りしま …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなってるのかを学習します。 CSSでの使い方・色が商標登録される場合があるので気をつける点・ …