*

画像を使わず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

おすすめトピックス

関連記事

ボタン
Photoshop不要!ボタン素材を自動生成してくれるButton Makerの使い方

Web 上にはボタンというものが至る所に存在しています。検索ボタン、閉じるボタン、送信ボタン、クリアボタン、これらは Web 上でよく見られるボタンです。 このボタン画像は一見簡単に見えて地味に手間がかかるんですよね。C […]

ラクサバで現時点の転送量を確認する方法

当ブログではレンタルサーバーのラクサバを利用しています。月額99円という破格の安さ、最高プランでも月額986円という高機能で速度も申し分なく、この安さは気に入っています。 目次1 転送量とは2 ラクサバの転送量制限につい […]

アニメーションgifを手軽に圧縮してサイズを落とすウェブツール「Online GIF optimizer」

インターネットの速度がここまで発達して速くなってもアニメーション gif は未だに使われているものだと思います。アニメーション gif はかつてインターネットの速度が遅かった時代に動画のように画像を動かせる事ができる事か […]

Google Drive
Googleドライブをインストールしたらスマホとのファイル共有も捗るよ

Google Drive って Windows にもインストールする事ができるって知ってました? Google Drive は 15GB まで無料のクラウドストレージサービスです。Google が提供しているクラウドサー […]

定規と分度器
1インチは何ミリ?Googleの長さ相互単位変換機能が便利だった

Google 検索ってただ知りたい情報を検索するだけの機能だけではありません。ご存じの方も多いと思いますが、Google の検索窓に計算式を入れたら電卓として機能します。東京の天気と入力すれば、検索結果の一番上に現在の東 […]

instagramで横長写真を複数投稿ができない!複数投稿する方法はあるのか?

instagram といえば正方形写真しか投稿できないと思っている人も少なくないかもしれません。現に私もそうでした。instagram では正方形に限らず横長写真も投稿できます。 instagram で横長写真を投稿する […]

著者について

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

フォローはこちら

       

       
大垣市の金沢カレー専門店!濃厚で深みのある味わいの金沢カレー

石川県発祥の金沢カレーをご存知でしょうか。石川のご当地カレーで

Thunderbirdで「ごみ箱フォルダにメッセージをフィルターで分別できませんでした」

いつも通り Thunderbird を立ち上げると見慣れないエ

楽天ショップ等の縦帯バナーを商品別に変えるには?

楽天などのインターネットショップをパソコンで見ると、よく画面端

instagramで横長写真を複数投稿ができない!複数投稿する方法はあるのか?

instagram といえば正方形写真しか投稿できないと思って

岐阜県垂井町で本格インドカレーをお洒落なバー「VAN DO BEE(バンドゥビー)」でディナー

国道21号線を垂井町付近を走行中、チラッと見えたインドカレー&

→もっと見る