Webデザインの配色に悩んだときの参考になる！ UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse
Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM
Beautiful CSS checkboxes examples - CSS Scan
All of these checkboxes were initially copied using CSS Scan (click here to try a free demo). With CSS Scan you can easily inspect or copy any website's CSS. 📌 Press Ctrl+D to bookmark this page Have you seen CSS Scan? The fastest and easiest way to check and copy CSS. Learn more → Beautiful box-shadow examples 90+ free beautiful CSS box-shadow, ready to use, click to copy. Learn more →
配色ツール決定版、大量の制作サンプルで完成をイメージしやすい Palette Maker
オンラインには、たくさんの配色カラーパレットツールがあり、どれも魅力的で美しい色の組み合わせを見つけることができます。 しかし、気に入った配色をダウンロードして、いざデザインに落とし込んでみると、「あれ？思ってた感じと違う・・」、なんて経験は誰もが一度はあるでしょう。 そんな悩みを一発で解決してくれる、新しい配色ツール Palette Makerを今回はご紹介します。 お好みの配色をクリックで選ぶだけで、大量の制作サンプル例で色味を確認することができ、本当に必要なカラーパレットを直感的に選ぶことができます。 大量の制作サンプルで完成をイメージしやすい配色カラーツール Palette Maker このツールは、ロゴデザインやUI／UXデザイン、ポスター、イラストなどクリエイティブな分野の大量のデザイン例をつかって、お好みのカラーパレットの色合いを確認、検証できる、色好きのためのユニークなツー
これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons
Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。 角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。 100 Modern CSS Buttons 100 Modern CSS Buttons -GitHub 100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。 ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソース
CSS Background Patterns by MagicPattern
CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. The collection is being updated regurarly! Patterns are everywhere! From your website to your favorite book cover. There're severa
CSS Scan - The fastest and easiest way to check and copy CSS
button .btn .demo-btn .first-demo-btn 272x50 Arial 16px background-color: #C2FBD7; border-radius: 50px; border-width: 0; box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0; color: #008000; cursor: pointer; display: inline-block; font-family: Arial, sans-serif; font-size: 1em; height: 50px; padding: 0 25px; transition: all 200ms;
Gradihunt: Automated Gradient Generator
Beautiful gradient app to generate gradient color and css.
正規表現が嫌いな人のための正規表現チートシート・「I Hate Regex」
I Hate Regexは正規表現が嫌いな人の為に作られた正規表現チートシートです 任意のキーワードで目的を探す事ができて、目的の項目を選ぶと図式で解説しつつコードや実装例も出してくれます 更に使われた式の使用例も書かれているので調べつつ学べるようになっています 例えば電話番号をマッチさせたい場合は上記のページで学べる、といった感じです 目的で探せて、調べると同時に学んだり理解できるようになっている、まさに嫌いな人の為のチートシートですね 本アプリはソースコードも公開されていますので特に学びやすいかなぁと思います。ライセンス明記は無いみたいなので商用利用する際は開発者に問い合わせください I Hate Regex
無料でウェブデザインに最適な配色実例をそのままコピペできるようにした「Happy Hues」レビュー
色は人の心理に働きかけることが知られており、デザインに何色を使うかは重要な問題です。特に、異なる色を使いつつ統一感を持たせるのは至難の業で、一歩間違うとまとまりやメッセージ性のない配色になってしまうことも。そこで、プロのデザイナーがウェブデザインのさまざまな配色実例をそのままコピーできる「Happy Hues」を作成し、無料で公開しています。 Happy Hues - Curated colors in context. https://www.happyhues.co/ トップページには画面左側にパレットが表示されています。パレットをクリックすることで、画面右側の配色を変更可能。深緑を中心とした落ち着いた配色から…… ピンクを中心としたファンシーな配色。 グレーベースのシンプルなデザイン。 温かみがある焦げ茶色ベースの配色など、背景だけでなく文字色やボタン、イラストの色まで変わるので画面
コピペで使えてカスタマイズもしやすいCSSアニメーションコードをまとめている・「CSS WAND」
CSS WANDはコピペで使えるように工夫されたCSSアニメーションコードのまとめサイトです。HTMLとCSSをそれぞれコピーして簡単に利用できるようになっています。 まとめと言ってもまだ数は少ないですが、増えれば便利そうですし覚えておく良いかもしれませんね。 使い方 使い方って程でもないんですけど、表示されている動作サンプルをクリックすると上図のようにコードがポップアップするのでコピペして使って欲しい、みたいな仕様となっています。 後は張り付けてからやりたいようにコードを変えれば良いだけ。楽でいいですね。今時、いちから全部書いている方はそう多くはないと思うので需要があるかは分かりませんが、個人的にはCSSアニメーションは自作フレームワークに含めていないのとモジュールも作ってないので少し需要ある感じです。 本まとめはGithubでも公開されています。 CSS WAND
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
CSS Loaders: A collection of more than 600 loading animations
VSCheatsheet | Shortcuts in the shortest time possible | Shortcut Illustrations
AnimatiSS
地味に便利！さまざまなプロジェクトに適したHTMLのテンプレートを簡単に生成できる -HTML Boilerplates
シンプルなものからユニークなものまで様々なCSS製のスピナーやローダーをまとめた・「CSS3 Loader & Spinners」
成功したブランドのWebサイトに焦点を当てたUIデザインギャラリー・「Convertux Interfaces」
ユニークなCSSグラデーションをコレクションしている・「Gradient Magic」
