Webデザイン制作時、意外と手間がかかるのがグラデーションの指定です。
グラデーションを表すCSSは細かい数値や文字列が必要なため、手動で入力するとミスが発生してしまう可能性もあります。
しかし、サービスの印象やホームページの印象をより良くするために。グラデーションを利用したいという方は多いのではないでしょうか。

今回は、グラデーションを表すCSSを無料かつ簡単に作れる「Tabiku」をご紹介します。
英語対応のサービスですが、直感的に操作することができますのでまずは利用してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

CSSの基本～スタイルシートとは
レスポンシブ対応のCSSフレームワーク25選
ホームページ制作に必須！CSS・JavaScriptについての基礎知識を確認するための設問3つ

グラデーションCSSを爆速で作れる「Tabiku」

スクリーンショット_2016-03-10_10.15.11.png
http://tabiku.com/

「Tabiku」は、グラデーションを表現するCSSを手間なく簡単に作成することができるサービスです。
グラデーションの始まりと終わりの色を決め、どの程度のグラデーションにするのかを設定するだけで自動的にCSSが書き出されます。

機能

このサービスで利用できる機能は、以下の5つです。

・1.グラデーションCSSを作成する
・2.色パレットを作成する
・3.参考画像に使用されているカラーコードを確認する
・4.参考色パレットに使用されているカラーコードを確認する
・5.あらかじめ作成されたグラデーションCSSを利用する

グラデーションを作成する際に便利な機能が多数揃っていますが、今回は主要な機能である「グラデーションCSSの作成」「色パレットの作成」の方法について順を追って解説します。

グラデーションCSSを作成する方法

step1.

ホームページにアクセスしたら、会員登録をします。
Twitterのアカウントを利用したソーシャルログインとなりますので、あらかじめTwitterアカウントにログインしておいてください。

step2.

1.png
グラデーションの作成を始めます。
上部に表示されているメニューバーの中から「Create Gradient」をクリックします。

step3.

2.png
色を選択する画面に遷移します。
画面左側がグラデーションの始まりの色、右側が終わりの色を示しますので、任意の色をパレットの中から選択してください。
任意の色がない場合は「＋」をクリックすると色を選択することができます。

step4.

3.png
色を選択したら、画面真ん中にある「▶︎」をクリックしてください。
するとグラデーションの程度を選択する画面に遷移します。

step5.

4.png
真ん中に表示されている「◀︎｜▶︎」をクリックしたまま、左右に動かしてください。
するとグラデーションが変化します。

step6.

5.png
任意のグラデーションができたら、画面右上のチェックマークをクリックしてください。
色を選択しなおす場合は、バツマークをクリックすると選択画面に戻ります。

step7.

6.png
これで完了です。
CSSが表示されますので、コピー＆ペーストをして利用してください。

色パレットを作成する方法

step1.

まずホームページにアクセスしたら、会員登録をします。
Twitterのアカウントを利用したソーシャルログインとなりますので、あらかじめTwitterアカウントにログインしておいてください。

step2.

7.png
色パレットの作成をはじめます。
上部に表示されているメニューバーの中から「Create Palette」をクリックします。

step3.

8.png
色を選択する画面に遷移しますので、画面中央に表示されている色を示すパレットの中から任意の色をクリックして選択してください。
カラーコードを入力して作成することも可能です。

step4.

9.png
パレットを作成したら「Done」をクリックしてください。
これで完了です。

まとめ

グラデーションCSSを作成するジェネレーターは複数ありますが、今回ご紹介したツール「Tabiku」は、グラデーション作成時はもちろん、配色を考える際の参考にすることもできます。
カラーコードの備忘録としても使用できるので、頻繁にWebデザインを行う方に最適です。

無料で利用できるので、効率よくデザインを行いたい方は、ぜひ一度試してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

CSSの基本～スタイルシートとは
レスポンシブ対応のCSSフレームワーク25選
ホームページ制作に必須！CSS・JavaScriptについての基礎知識を確認するための設問3つ

このニュースに関連するカリキュラム

CSSの基本～スタイルシートとは

CSSの基本～スタイルシートとは

現在のホームページは、内容とデザインとをわけてプログラミングすることが増えています。デザイン部分を担うプログラミング言語をCSSといいます。文字サイズやレイアウトなどを細かく指定します。