サイト構築 -実装
CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
Post on:2023年9月19日
先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 […]
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
Post on:2023年9月14日
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり […]
朗報！ リニューアルされたGoogle Fontsがかなり使いやすくなってる、フリーフォントとアイコンを探すときに便利
Post on:2023年9月12日
先週、Google Fontsがリニューアルされました！ サイトのデザインは一新され、フォントやアイコンがこれまで以上に簡単に探せ、すぐにダウンロードしたりコードを簡単に利用できます。 新しくなったGoogle Font […]
CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます
Post on:2023年9月11日
イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャ […]
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
Post on:2023年9月7日
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるように […]
Monotype、フォントワークスの買収を完了！ フォントワークスのユーザーはGothamなど人気フォントが利用可能になるって
Post on:2023年9月6日
2023年9月1日に、Monotype社とフォントワークス社からそれぞれ「フォントワークスの買収を完了」「Monotypeの傘下に」のリリースが発表されました。 これによりフォントワークスの従業員と1,000種類以上のフ […]
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
Post on:2023年9月5日
先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネック […]
全部、商用利用も無料！ Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適
Post on:2023年9月4日
Google Fontsには日本語フォントや英語フォントをはじめ、さまざまな言語のフォントをすべて無料で使用できます。いやー、いい時代ですね。 そんなGoogle Fontsの中からリーダビリティ、レジビリティに優れた、 […]
CSSでスムーズなアニメーションを実現する4つの新しい機能
Post on:2023年8月31日
今年もCSSの進化が止まりません！ 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScrip […]
CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
Post on:2023年8月30日
CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが […]
sponsors
