あなたのCSS力の助けになってくれる素晴らしいWebサイト12選

以下はAman Varma( [Twitter](https://twitter.com/AmanAjayVarma) / [GitHub](https://github.com/amanajayvarma) / [stackoverflow](https://stackoverflow.com/story/amanajayvarma) / [Webサイト](https://contactup.io/amanajayvarma/) )による記事、[12 Super websites to help you with your CSS problems ☺](https://dev.to/amanajayvarma/10-website-to-help-you-with-your-css-problems-2poi)の日本語訳です。


# 12 Super websites to help you with your CSS problems ☺

これらは、あなたのCSSをより楽しく簡単に装飾してくれる、そしてもしかしたらあなたが躓いているCSSの問題の多くを解決してくれるかもしれないWebサイトたちです。

## 1. Pixel art

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/757b8c1a-9527-674d-b2a9-da0fc2a93c93.png)

あなたもきっとピクセルアートが好きに違いありません。
90%の人はpngでピクセルアートを書いてサイトに追加していると思いますが、でもそのピクセルアートをCSSで書けたらもっといいと思いませんか？
そこでPixel Art to CSSです。
書いたピクセルアートをCSSに変換してくれます。

[Pixel Art to CSS](https://pixelartcss.com/)

## 2. Gradient

![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/644ed8e3-a299-5491-ec1b-3f4e8870e5c6.jpeg)

CSSグラデーションは非常に美しいですが、使いこなすのは難しいものです。
正しい色を見つける必要があり、何行ものコードを書かなければなりません。
また互換性に気を使うと、さらに多くのコードが必要になります。
それらの問題を解決するためにCSS GradientのWebサイトが存在します。
直感的なカラーセレクタや後方互換は大きな助けになってくれるでしょう。
ここにはまた、[Gradient Backgrounds](https://cssgradient.io/gradient-backgrounds/)や[Color Shades](https://cssgradient.io/color-shades/)といったツールも存在します。

[CSS Gradient](https://cssgradient.io/)

## 3. Compatibility

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/2f1117d2-b762-45ec-3f22-5a4d6cb00463.jpeg)


古いブラウザには対応していないCSSタグや、逆に新しすぎて誰も対応していないようなCSSタグがたくさん存在します。
自分の使っているタグがどれだけのブラウザに対応しているかは、様々なサイトを見て確認しなければなりません。
そんなときに役立つのがCanIUseです。
CanIUseは、どのブラウザがどのタグをサポートしているかを教えてくれます。
また[News](https://caniuse.com/#info_news)セクションでは、ブラウザが新しく対応したタグの状況について教えてくれます。

[CanIUse](https://caniuse.com/)

## 4. Cheatsheets

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/e7b03ba5-b5b8-f6cb-01da-68a8e295cd6a.png)


もしかしたら、私のようにCSSタグをよく忘れてしまうかもしれません。
そんなときのために、手元にCSSチートシートを用意しています。
CSSチートシートで検索すると数千もの結果が出てくるのですが、その中でも最高のものであると私が信じているもののひとつがDevhintsです。
CSS以外にも、HTML、Python、Rubyなど、多くの言語のチートシートが用意されています。

[Devhints](https://devhints.io/)

## 5. Color Palettes

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/4387306f-8733-44fb-b9da-08e0eb55dc31.png)

あなたのプロジェクトにぴったりのイメージカラーは見つかりましたか？
ネットでは多くの素晴らしいオンラインカラーパレットを見出すことができますが、私が気に入っているのはシンプルなColor Huntです。
新着順、注目順、ランダム順などで並べ替えることができ、最も頭を使わずにカラーパレットを選択することができます。

[Color Hunt](https://colorhunt.co/)

## 6. Unicode

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/062783d7-6b7e-ce34-c3be-3ed2c1c78835.png)

世界には何万ものUnicodeが存在するので、全てを覚えきれない人もときにはいることでしょう。
この問題を解決するためにUnicode Tableが存在します。
あなたのプロジェクトにマッチする絵文字やUnicodeを、Unicode Tableから探してみましょう。
また、 𓂸のような面白Unicodeも見つけられるかもしれません。


[Unicode Table](https://unicode-table.com/)

## 7. CSS Validator

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/82263316-3178-3403-0ffe-d0a45404330c.png)


CSSを正しく使えているか、どのように判断しましょう。
W3C CSS Validatorを使えばいいのです。
W3C CSS Validatorは、WebデザイナーやWeb開発者が作ったCSSをチェックできるように、W3Cが制作したサイトです。


[CSS Validator](https://jigsaw.w3.org/css-validator/)

## 8. Old Browser support

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/df0c0601-c4b2-cd56-8bf9-65e8071536a8.png)


あなたのWebサイトを、未対応のユーザエージェントを持つ古い古いブラウザや、新しいブラウザでも見れるようにしたいと思いませんか？
そこでAutoprefixerです。
AutoprefixerはCSSを解析し、Can I Useの対応状況を見て、CSSにベンダープレフィックスを追加してくれます。
AutoprefixerはGoogleにも推奨されていて、実際にTwitterやTaobaoが使用しています。

[Autoprefixer CSS online](http://autoprefixer.github.io/)

## 9. Other awesome tools

![09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/af4d48c7-c887-e7f4-bec9-04de508a9ecd.jpeg)


Bennett Feelyは、初心者にもプロにも助けになるような、素晴らしいWebサイトを幾つも開発しています。
私が最も気に入っているのは[CSS Pie Chart](https://bennettfeely.com/csspiechart/)で、`conic-gradient`を使った円グラフを生成することができます。
また[Clippy](https://bennettfeely.com/clippy/)はCSSで画像をクリッピングし、[Image Effect wit CSS](https://bennettfeely.com/image-effects/)ではCSS blend modeを使った様々な画像効果を紹介し、そして[CSS Gradients](https://bennettfeely.com/gradients/)では様々なCSSグラデーションを参照することができます。

[Bennettfeely](https://bennettfeely.com/)

## 10. Tobias Ahlin Thanks to [Siddhartha Sarkar](https://dev.to/siddsarkar)

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/98563c56-1e4e-965c-6134-4536ba99a22b.png)


Tobiasは、Webサイトで幾つもの素晴らしいCSSを公開しているもう一人の開発者です。
彼のWebサイトからProjectセクションを見てみると、彼が手掛けた多くの作品、[Moving Letters](https://tobiasahlin.com/moving-letters/)、[TypeSource](https://tobiasahlin.com/typesource/)、[SpinKit](https://tobiasahlin.com/spinkit/)などを見ることができます。
とても役に立ちそうなCSSです。

[Tobias Ahlin Bjerrome](https://tobiasahlin.com/)

## 11. Hayk An:: Workbench Thanks to [Amruth Pillai](https://dev.to/amruthpillai)

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/cf20e0c6-f2c1-e852-6e81-3c365bd3d4dd.png)

Hayk AnのWebサイトには、インターネット上で最も有用で興奮させられるサイトのいくつかを見つけることができます。
これらはインスピレーションの金脈であり、あなたのウェブサイトデザインにきっと多くの刺激を与えてくれるでしょう。


[Hihayk](https://hihayk.github.io/)

## 12. You can suggest in the comment I will make it my number 12 or we can till 20 ;)

あなたの好きを12番目にしてくれていいのよ。

![12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/bc585aff-2f6d-7f43-cb9e-94d9a747d858.gif)

ピクセルアート By [lipixelart](https://rewa14.github.io/lipixelart/gallery.html)

# コメント欄

「[Spinkit.css](https://tobiasahlin.com/spinkit/)がかっこいいローディングしてくれる。」「この作者のサイトを追加したよ。」
「アプリを作るときに[Scale](https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/1D9A6C/29/154/108/white)でカラーパレットを選択したよ。」「この作者のサイトを追加したよ。」
「CSSセレクタがわからないときの[Selectors Explained](https://hugogiraudel.github.io/selectors-explained/?)いいぞ。」
「有益なリンクありがとう」
「いくつかお気に入りに登録した！」
「素晴らしいキュレーションありがとう😍 」


# 感想

もはや今のCSSは、私のような一般人のレベルでは何も作れないところにまでなっています。
一からどうにかするのは諦めて、誰かが作ってくれている、これら優れたツールやパーツを拝借させてもらって、ブラッシュアップを図っていきましょう。
単にコピペするだけでもワンランク上の見た目を作れるようになる、素晴らしいサイトたちです。

まあ私はフロントエンドエンジニアではないので、最近はもう[Bulma](https://bulma.io/)突っ込んで適当にdiv生やして終わりますけどね。