時計/タイマー/カウントダウンのコードスニペット8選。CSS/JSで作れるデザイン！ - Workship MAGAZINE(ワークシップマガジン)
Webサイト上に「時計」を表示するデザインは、一定の需要があります。 もとからデバイスの画面に時計は表示されていますが、それでもWebサイト上に時計が表示されると、つい目がいってしまいますよね。 時計の要素としてとくに需要があるのが、クイズやイベントなどに使われるカウントダウンです。カウントダウンの機能は、UXにおいて重要な役割を果たすことも。 今回は、時計やタイマー、カウントダウンなどの機能を取り入れられるコードスニペットを8選ご紹介します。 1. Vue.jsを使ったデジタル時計 最初にご紹介するのは、近代的なデザインのデジタル時計です。この時計はVue.jsを使って構築されています。 機能自体はベーシックですが、目をひくデザインに仕上がっていますね。 See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。 Flowrift ライセンスが明記されてい
CSS in JS時代のCSS設計 - Qiita
Ateam Lifestyle Advent Calendar 2019の1日目は 株式会社エイチームライフスタイル クリエイティブ戦略部 シニアデザイナーの綿貫が担当します！ 先陣切って投稿しますので、みなさんどうぞ読んでください！ はじめに CSS in JSもそこまで珍しくなくなってきたと思いますが、CSS in JSでのCSS設計の話はなかなか見かけません。 ないなら自分で書こう！と思い立ったので書きます。 そもそもCSS設計が必要な理由 CSSを書くに当たって、人間が悩むのは主に「名前空間が存在していない」からだと思います。 1つ1つのパーツを個別にスタイリングをするだけならさほど難しくもありませんよね？ ところが、サイト全体を通してスタイリングするとなると 自分が触っている箇所に 予期せぬスタイルが当たっている 当たるはずのスタイルが当たらない 自分が触っていない箇所に 予期せ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌