1. はじめに
大学生エンジニアの私が勉強中、コーディング中に見つけた便利なサイトを紹介します
見づらい部分があるかと思いますが、皆さんのご参考になれば幸いです。
随時追加していきます。
2. 便利サイト
コピペで反映できるサイトを紹介します。
2-1. Neumorphism.io
僕が好きなニューモーフィズムなデザインが簡単に作れるので、とてもおすすめです。
See the Pen ニューモーフィズム by まんまねこ (@opcivmrc-the-bashful) on CodePen.
2-2. CSS Box Shadows Generator
ニューモーフィズムに続いてBox Shadow生成です。なかなかおしゃれですよね。
See the Pen Untitled by まんまねこ (@opcivmrc-the-bashful) on CodePen.
2-3. CSS Gradient
なかなかグラデーション作るのめんどくさかったりします。そんなときはこのサイトですね！
See the Pen CSS Gradient by まんまねこ (@opcivmrc-the-bashful) on CodePen.
2-4. Gradient Magic
たくさんの背景素材が詰まったギャラリー、色も調節できます。現在1731個で一部課金性のようです。
無料でも多くの背景が使用できるので、おすすめです。
See the Pen Untitled by まんまねこ (@opcivmrc-the-bashful) on CodePen.
2-5. Min-Max-Value Interpolation
メディアクエリをできるだけ減らして可読性高く記述する際clamp関数の計算をしてくれるこのサイトはとても便利。clamp(最小値,推奨値,最大値)という感じで計算される。詳しくは調べてね。
clamp(0.5rem, 0.185rem + 1.57vw, 1.563rem)
See the Pen Untitled by まんまねこ (@opcivmrc-the-bashful) on CodePen.
2-6. CSSからTailwindCSSへのコンバータ
css→tailwindに書き換えてくれるサイトです。
最近tailwindを使い初めて、リファクタでcssをtailwindに書き直す機会がありましたが、結構単調な作業なので、このサイトはとても重宝しました。正しく変えてくれないものも結構あります。
2-7. uiverse
僕の一押しです。おしゃれなUI達がたくさん投稿されていて、とても参考になります。
3. 最後に
僕が普段使っているウェブサイトを紹介しました！
コピペでできるのは便利ですが、中身を理解して使うようにしないとですね。