*

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

おすすめトピックス

関連記事

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

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

AbemaTV
テレビに革命!ネットで見るテレビ「AbemaTV」無料でニュースもアニメもスマホで見られる

2016年4月11日にサイバーエージェントとテレビ朝日による AbemaTV というサービスがスタートしました。簡単に説明すると、無料でインターネットを通じてテレビ番組を視聴できるサービスです。地デジで放送されているテレ […]

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

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

facebookで○○さんはどこどこにいますという通知を無効にする方法

facebook と言えば世界的に有名な SNS の一つで日本でも利用者は多数います。私も facebook に登録してはいますが、ブログの facebook ページを作るためにとりあえず登録しているだけで個人のタイムラ […]

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

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

ちゃんりお
2016年の年賀状はちゃんりお年賀状で決まり!

2015年夏、Twitter などの SNS で話題となり大人気となったちゃんりおメーカーをご存知でしょうか? ちゃんりおメーカー -Chanrio maker- キティちゃんでお馴染みのサンリオ風キャラクターを自分で作 […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
宇佐美
ガソリンスタンドENEOSの看板にある「宇佐美」とは何か?

普段何気なしに利用しているガソリンスタンドですが、ふと気になっ

中部国際空港のプレミアムラウンジセントレアに入るための条件や必要な物

空港には特別な待合室(ラウンジ)があります。中部国際空港も例外

厚さ4cmの封筒が入る郵便ポストは存在するか?

郵便物をポストに投函する場合、投函できる厚みのボーダーラインとしてよく

潮騒そば
こだわりの魚介スープが織り成すラーメン、彦根市の「らー麺潮騒」

滋賀県彦根市の彦根駅周辺の国道8号線を通っている時に、何か新し

超人気のラーメン店銀座篝がsitatte sapporo(シタッテ札幌)に上陸

2017年3月4日に札幌駅前に新たなランドマークとしてオープン

→もっと見る