*

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

公開日: : 最終更新日:2017/01/15 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」です。

CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor-
CSS3グラデーションのソースを生成するジェネレータ、スライダーで色を決め、-moz-linear-gradient -webkit-gradientを書き出します。

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

grad22

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

grad23

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

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

grad24

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

おわりに

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

  • Pocket

おすすめトピックス

関連記事

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

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

Googleアラート
情報収集ならニュースアプリよりGoogleアラートの方が便利なんじゃないかという話

興味がある日頃のニュースを効率よく集める為に、グノシー、Mynd などのニュースアプリをスマートフォンで利用するのも一つの手段です。これらのアプリは使う人の興味がありそうなニュースをピックアプして届けてくれるものです。 […]

月間30万PV以上に対応する生ログが見られる無料・有料アクセス解析

ウェブサイトを運営している人なら多くの方が導入しているであろうアクセス解析ですが、ページビューが増えてくると動作しないようなページビューで制限をかけているアクセス解析もあります。例えば1ヶ月のページビューが30万を越える […]

Audible
時間がなくても読書ができる、本を聴くAudibleを無料体験してみた感想

最近読書といえば、よほど好きな作家さんが年1,2回出す小説を読む程度でめっきり読書から離れた生活を送っています。学生時代は1時間ほど電車に揺られて通学していたので、小説をたくさん読んでいました。読書から離れた理由は、読書 […]

誰でも簡単に猫のイラストから写真のような猫ができる猫ツールが凄かった

猫は小学生の頃から好きでよく猫のイラストもノートに落書きしたり黒板に書いたりしましたが、このイラストから写真のような猫に変換してくれる猫(神)ツールには感動を覚えました。そのツールがこれです。 Image-to-Imag […]

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

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

著者について

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

フォローはこちら

       

       
大滝鍾乳洞
トロッコに乗って鍾乳洞へ!東海地方最大級の岐阜県「大滝鍾乳洞」を探索

岐阜県郡上市にある東海地方最大級という鍾乳洞「大滝鍾乳洞」へ行

ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

→もっと見る