サイト構築 -実装
簡単に実装できる！ SVGアニメーションで気持ちよく動くスピナー、超軽量サイズでカスタマイズも簡単 -SVG Spinners
Post on:2025年1月27日
コピペで簡単に使用できる、ローディング用のアニメーションにぴったりなSVGベースのスピナーを紹介します。 さまざまなデザインのスピナーが揃っており、画像は一切使用されていません。アニメーションも快適で、くるくる気持ちよく […]
日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date
Post on:2025年1月22日
WebサイトやスマホアプリのUIで日にちや時間、年の範囲の書式を自動的に短く、読みやすく、理解しやすく表示するJavaScriptのライブラリを紹介します。 このライブラリを使用すれば、シンプルで一貫性のある書式で表示で […]
Web制作者は要チェック！ Chrome 132で新しく追加されたCSSとHTMLの3つの新機能
Post on:2025年1月21日
Chrome 132で追加された、CSSとHTMLの新しい機能3つを紹介します。 今回のアップデートで、dialog要素の開閉トグルイベントを取得できるようになります。これによりダイアログが表示されているのかどうか簡単に […]
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
Post on:2025年1月16日
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり […]
Futuraの初期型の字形「Formera」がオープンソースのフリーフォントでダウンロードできます
Post on:2025年1月15日
Futuraの初期型の字形が、オープンソースのフリーフォントでダウンロードできるので、紹介します。 「Formera」はFuturaの原形とされるもので、大きな特徴としては、mが直線で構成されていたり、rが棒と点で構成さ […]
2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ
Post on:2024年12月19日
今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェック […]
これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit
Post on:2024年12月18日
CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ […]
CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる
Post on:2024年12月10日
スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバ […]
2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」、HTMLのコードは「#A47864」
Post on:2024年12月9日
2025年のトレンドカラーがPantoneから発表されました。 トレンドカラーは、温かみのある極上の茶色「モカムース（Mocha Mousse）」、穏やかなひとときを誘う控えめな色合いです。 モカムースのリッチなブラウン […]
UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit
Post on:2024年12月5日
ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトで […]
sponsors
