9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

qnoteAdvent Calendar 2023

Day 22

未経験から2年経ったWEBデザイナーの知っておくとちょっと便利なサイト6選

Last updated at Posted at 2023-12-21

Webデザイン等をする上で、これまで見つけた個人的にちょっと(かなり)便利だなと思っているサイトを紹介します。
頻繁に使用しているサイトはもちろん、いつか使いたいと温めているものも合わせて紹介します!


1. WebGradients

美しく綺麗なグラデーションがまとめられているサイト。
デザインの時の色決めはもちろん、ワンクリックでcssのコードがコピーできるのでよくお世話になっています。


2. CSS Section Separator Generator

セクション分けで利用できる、CSSのみで作成された境界線デザインを作成・ダウンロードできます。
微調整も可能なのがありがたいです。
もっと早く知りたかったツールの一つ。


3. CSS Background Patterns

こちらはCSSのみで作成された背景をダウンロードできます。
柄の幅や色、透明度などを調整してからダウンロードが可能です。
個人的には方眼紙みたいなグリッドの背景がお気に入りです!


4. CSS clip-path maker

最近巷でよくみるclip-pathプロパティを直感的に作成できるサイトです。
もちろん作成した図形のCSSコードをコピーできます。

clip-pathプロパティはアニメーションの幅も広がるのでもっと使いこなしていきたい所存です。


5. gridpx

コンテンツを横並びにするときに幅やマージンの数値に悩むことはありませんか?
こちらのツールはコンテンツ幅・カラム数・カラム間のマージンを入力することで、カラムのpx数を算出してくれます。
本当に毎回お世話になっています。


6. 3D Book Image CSS Generator

3Dで書籍を表示してくれるCSSジェネレーターです。
高さや幅、最初の傾きなど微調整ができるので、自分のお気に入りの見せ方が見つかります。

おわり

以上、私が実際に使用している・したいサイトの紹介でした。
この他に「このサイト実際使っていて便利!」というものがあったら是非教えてください。

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?