メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.08.01

開発環境・ツール

配色にこだわる人のための、便利ツール

こんにちは。新卒のSKです。
先日の記事「開発の現場で使えるツール紹介」より、
今回は”CSS Gradient Generator”についてご紹介します。

ページ制作をしていると、配色にこだわりを持つ人も多いと思います。
単に色のコードを知りたい人、RGBやHEXを読み替えたいだけの人
実際に自分の目で見て、絶妙な配色をしてみたい人などなど。

私も作成したサイトをCSSでアレンジしようとすると、
文字や背景、一本の横線に至るまで、配色にかなり時間をかけてしまいます。

そこで私は、こちらのサイトを参考にするようにしています。
CSS Gradient Generator
◆サイトはこちら:http://www.css3factory.com/linear-gradients/

css_gg_01

動的に色が変わり視覚的にもチェックがしやすいので、
かなり重宝しています。画面もシンプルで見やすい。

グラデーションも作成でき、カラーをADDしていけば独自配色も可能です。
グラデーションサンプルが表示されている下のバーを動かせば、
それぞれの色についてどの程度表示させるか調整でき、Gradient Directionで方向も決められます。

css_gg_02

さらに便利なのは、CSSのコードも動的に作成されること。
そのまま自分が必要な箇所へコピペして実装が可能です。

css_gg_03

この手のサイトですが、ほかにもいろいろあるようです。
最後にいくつか紹介させていただきます。

・ColorPicker.com
https://www.webpagefx.com/web-design/color-picker/
カラーコードのみ確認できるシンプルなサイト。

・CSS matic
http://www.cssmatic.com/
基本的なカラー設定のほかに、Boxの丸角や影なども視覚的に作成できます。
もちろん、コードも動的に作成されます。

・w3schools.com
https://www.w3schools.com/
WEB用言語の総合的な勉強ができ、もちろんカラーコードも探せるサイト。CSS他、HTMLやJavaScript等もあります。こちらのツールだけで完結できそうな気がします。


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事

SNS共有