*

画像を使わずCSS3でグラデーションを超簡単に作れるウェブアプリ「Grad2」

公開日: : Webサービス

grad2

一昔前までは Web 制作において背景や見出しなどにグラデーションを使おうと思ったら画像を使うしかありませんでした。グラデーション用だけの画像を作って背景に設定するというやり方です。しかし、それも CSS3 の登場で不要となりました。画像を使いませんので軽量にグラデーションを実現できるのです。

CSS3 自体は2011年頃から登場していましたが、対応ブラウザが少ない事から利用は控えられる風潮がありました。しかし、CSS3 は徐々に主要ブラウザでサポートされるようになり2016年現在ではかなりの数の CSS3 プロパティが使えるようになっています。グラデーションもその一つです。

CSS3 グラデーションの対応ブラウザは以下のようになっています。

  • IE10以降
  • Firefox31以降
  • Google Chrome
  • Safari7以降
  • Opera27以降

あえて古いブラウザを使っていない限り大概カバーしています。もちろん iPhone 用 Safari や Android 用 Chrome も対応しています。

対応していないブラウザについては、background で背景色を指定しておけばグラデーションなしで単色で表示されるので、もう遠慮なしに使っても良い頃だと思います。

CSS3でグラデーションを使う方法

CSS3 でグラデーションをするには一から手で入力するには少々骨が折れる量です。具体的には以下のように書きます。

background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #73a220), color-stop(0.00, #a2d93f));
background: -webkit-linear-gradient(top, #a2d93f 0%, #73a220 100%);
background: -moz-linear-gradient(top, #a2d93f 0%, #73a220 100%);
background: -o-linear-gradient(top, #a2d93f 0%, #73a220 100%);
background: -ms-linear-gradient(top, #a2d93f 0%, #73a220 100%);
background: linear-gradient(top, #a2d93f 0%, #73a220 100%);

すごい量でしょう。#に続くカラーコード部分を変更して調整します。

「-webkit」とか「-moz」というのは何なんだ?と思われると思います。これはベンダープレフィックスといって、各ブラウザで正式対応前の CSS3 プロパティを利用する際に必要なものです。各ブラウザで正式対応されればベンダープレフィックスを付ける必要はないのでもっと簡素化できます。

今では正式対応が進み下記の記述だけで済みます。

background: -webkit-linear-gradient(top, #a2d93f 0%, #73a220 100%)
background: linear-gradient(top, #a2d93f 0%, #73a220 100%);

CSS3のグラデーションを簡単に書く方法

CSS3 でグラデーションのコードを一から書くのは大変ですし、カラーの調整も保存・確認の繰り返しで面倒な作業になります。その面倒な作業を効率よく行えるウェブアプリがありました。それが「Grad2」です。

ブラウザ上で自由に色が選択でき、リアルタイムに色が変わります。微調整も容易で満足いく色になったらコードをコピペするだけで OK。すぐにあなたの製作中のウェブサイトにグラデーションを導入できます。

grad22

まずは赤線で示したスライダーをダブルクリックしましょう。

grad23

そしてこのカラーピッカーで色を選択するとスライダー部分の色が変わります。もう片方のスライダーも同様の方法で色を選択すれば赤枠で示した CSS コード、黄枠で示したグラデーションプレビューがリアルタイムに変わり微調整も簡単です。あとは、赤枠部分の CSS コードを選択して Ctrl + c か右クリックで「コピー」を選択して貼り付ければ OK です。

またスライダー間をクリックする事でいくつも増やすことができるので多段グラデーションも可能です。スライダーを削除するには Photoshop などの操作と同様でスライダーを左へドラッグします。

grad24

また、グラデーションのプリセットも用意されています。クリックするだけで簡単に用意されたグラデーションを作る事ができます。

おわりに

CSS3 でグラデーションを作る作業は意外と面倒な作業でしたが、このウェブアプリを使うと効率的に作業できました。Web 制作を行っている人ならブックマークに入れておいて損はないでしょう!

上部広告

  • Pocket

おすすめトピックス

関連記事

ドメイン
Whois修正依頼に間に合わずドメイン運用制限から解除までの経緯

私が取得している独自ドメインはバリュードメイン(Value Domain)で管理しているのですが、先日バリュードメインから「WHOISの正確性確認、修正依頼について」というメールが届きました。 お世話になっております。 […]

landr
誰でも簡単に音圧を上げられる!マスタリングツール「LANDR」が凄い

自分で作った楽曲と、市販の CD の音量・音圧の差を感じる事は誰しも感じた事ではないかなと思います。それは楽曲制作の最終工程の「マスタリング」という作業の質の差です。 マスタリングは長年の経験や知識が必要でかなり難しい作 […]

instagram
とてもわかりやすいInstagramでコメント返信する方法

Instagram とは写真共有アプリの一つで、Twitter などと同じく利用者同士でやり取りができます。私も Instagram のアカウントを持っていてたまにアップロードしますが、それほどヘビーに利用しているわけで […]

instagram-tag
instagramで写真を見てもらえないとお悩みならハッシュタグを付けてみよう

instagram は SNS の一つで写真を共有するアプリです。写真が上手い人はとても美しい写真を日々アップして、いいねがたくさん付いたり日々交流が盛んです。 じゃあ、私も instagram に登録して写真をアップし […]

tumblr-re
htaccessも使えないTumblrで外部サイトへリダイレクトを行う方法

Tumblr へウェブサイトを移転した場合など、多くのリンク切れが発生してしまう場合があります。Tumblr などのウェブサービスではなく通常のウェブサイトであれば htaccess を使ってリダイレクト処理をかけて転送 […]

新聞記事
あなたの興味ありそうなおすすめの記事をGoogleが紹介してくれるのをご存知?

スマートフォンやタブレットで新しいニュースを入手するには、ニュースアプリを導入するか自らニュースサイトへ見に行くという方法があります。実はその他にスマートフォンやタブレットでは Google があなたの興味ありそうな記事 […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。

sumaho-footer2
これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時

gifuparking
名鉄岐阜駅直結の最も近い駐車場、24時間営業で2日以上停められます

名鉄岐阜駅から名古屋方面へ旅行やお出かけ、また中部国際空港へ電

wordpressengry
WordPress管理画面の投稿一覧で表示される投稿数を変更するには

WordPress の管理画面と言えば、WordPress でブログや

パンケーキ
札幌市大通で絶品サッポロパンケーキ!タイル貼りのカフェ「ミント」

札幌の地下鉄大通駅から徒歩3分、アクセスも良いタイル貼りのオシ

→もっと見る