[保存版] 絶対使える！CSSデザインに役立つツール集
CSSのコーディングに役立つツールを紹介していきます。
ディベロッパーツール
既に使っている方も多いかもしれませんが、必須と言えるほど便利なので紹介します。
- カラーコードの検索
- フォント、色変更
- コードの試し書き
- デザイン変更シミュレーション
など色々なことに使えます。
https://yuhostyles.com/developertool/
配色パターン
いくつかのサイトを用途に応じて使い分けています。
詳しくはこちらの記事にまとめていますので参考にしてみてください。
グラデーション
自分の好きな色のグラデーションを作りたい時
好きな色をカラーピッカーから選ぶと、グラデーションを産生してくれます。
細かいところまでカスタマイズ性が効くので便利。
https://cssgradient.io/既にある中から選びたい時
こちらはあらかじめ完成している中から選びます。自分では思いつかなかった組み合わせに出会えたりするので便利。
https://www.eggradients.com/gradient-colorborder-radius
これは絵描く人には必須に近い！！！
視覚的に目指す形を作って、border-radiusをコピペできるという珍しいかつ超絶便利なツール。
しかも4箇所、8箇所の指定が可能！(あまり知られていませんが、実はborder-radiusは8箇所まで指定できるのです)
一度使ってみることをお勧めします😁
https://9elements.github.io/fancy-border-radius/フォント
英文フォント
無料・商業利用OK・個性的の三拍子揃ったAwesomeなフォントたちはこのサイト。
見ているだけでも楽しいので、一度は訪れてみることをお勧めします。
https://www.fontspace.com/new/fonts日本語フォント
日本語フォントと言ったらこのサイトです。すっきり読みやすいものから個性的なものまで、日本語フリーフォントがたくさんあります。
http://fontfree.me/Webフォント化
使いたいフォントがWebフォントではなかった場合、自力でWebフォントに変える必要があります。方法については以下の記事にまとめています。
フリー写真素材
こちらのサイトがお洒落で素材も多く、自分が知っている中では1番使い勝手が良いです。
https://unsplash.com/最後に
今のところは以上です！
他に良いものが見つかり次第、追加していきます！