【裏技】グラデーションを表すCSSを無料で爆速で作れる「Tabiku」を解説

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

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

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

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

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

http://tabiku.com/

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

機能

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

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

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

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

step1.

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

step2.

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

step3.

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

step4.

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

step5.

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

step6.

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

step7.

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