みなさんこんにちは!おさかなです!
今回は「Sorted CSS Colors」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・カラーの「CSS名」を確認したい方
・Webデザインに携わる方
・HTML/CSSを学習中の方
・カラーの「CSS名」を確認したい方
・Webデザインに携わる方
・HTML/CSSを学習中の方
「CSS名」をチェックしたい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
この色キレイ〜✨
「CSS名」だとなんて言うのかな?
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
それなら「Sorted CSS Colors」で確認してみよう!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
おー!カラーパレット!
![](https://osakanav.com/wp-content/uploads/2021/12/nippon-top-160x90.png)
【日本の伝統色】和風デザインで使えるカラー・配色が見つかる!【NIPPON COLORS】とは?
みなさんこんにちは!おさかなです!今回は「NIPPON COLORS」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・日本の伝統デザインをしたい方・和風サイトを検討中の方・日本風の配色を知...
「Sorted CSS Colors」って何?
「Sorted CSS Colors」とは、(@scriptype)さんが作成した、CSSカラーパレットのことです。
Webデザインに携わる方や、様々なパターンの配色を試したい方におすすめのサービスとなっています!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/11e860975ff1a8a41822fad39beefcd0.png)
Sorted CSS Colors
I wanted to create a tool to sort the named CSS colors in a way that it shows related colors together. So, next time I can't decid...
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-top-160x90.gif)
本や雑誌の「3Dアニメーション」が作れちゃう!?【3D Book Image CSS Generator】とは?
みなさんこんにちは!おさかなです!今回は「3D Book Image CSS Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・3Dブックを作成したい方・表紙画像を本にし...
実際につかってみよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2022/01/scc.png)
カラー名はCSSの値で、そのまま使用できます!(便利!)
![](https://osakanav.com/wp-content/uploads/2022/01/scc-name.png)
例えば、背景色に「MOCCASIN」を実装したい場合は、下記のようにCSSコードを書けばOKです!(ふむふむ…。)
background: moccasin;
ビフォーアフターは、こんな感じになり、きちんと実装できました!(わーい!)
![](https://osakanav.com/wp-content/uploads/2022/01/scc-before-1.png)
![](https://osakanav.com/wp-content/uploads/2022/01/scc-after.png)
カラーバーを動かすと、たくさんの色をチェックできます。
![](https://osakanav.com/wp-content/uploads/2022/01/scc-bar.gif)
気になる色をクリックすると、「16進数のカラーコード」や「RGB」も確認できるので、用途に合わせて使い分けてみてください!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/01/scc.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
カラーパレットを活用しよう!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/12/bits-top-160x90.png)
Webデザインをサクッと実装【コードスニペット】のまとめサイト!【Bits】とは?
みなさんこんにちは!おさかなです!今回は「Bits」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・良い感じのWebデザインを探している方・コードスニペットを探している方・HTML/CSS...