サイト構築 -実装
2026年4月、Adobeユーザーに朗報！ Adobe Fontsに日本語フォントが大量追加、CCユーザーは無料で使えます
Post on:2026年4月9日
4/10のフォントの日に先立って、Adobe Fontsで使用できる日本語フォントフォントが大量に追加されました！！ 今回は、「きりぎりす」の七種秦史氏のフォントが大量追加され、さらにロゴナの極細ウェイト「VDL ロゴナ […]
長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります
Post on:2026年4月7日
テーブルのヘッダを上部に固定し、さらに列の1つを左端に固定する、これを実装するのは非常に大変です。 一見、position: sticky;を使って、top: 0;とleft: 0;で実装できそうですが、実際にはどちらか […]
そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css
Post on:2026年4月2日
CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。 要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やr […]
CSSのデバッグやスキルアップに役立つ！ グラデーションや背景など複雑に記述されたCSSを読みやすくし、デバッグ・編集できる無料ツール -bg.layers
Post on:2026年3月31日
CSSで装飾したテキストやボタンのデバッグは、各プロパティやその値もそれほど複雑なCSSではないので簡単です。 下記のようにレイヤーが重なったグラデーションのデバッグはどうでしょうか。CSSもかなり複雑で、コードを見ただ […]
CSSのlight-dark()関数が画像もサポート！ これでライトテーマとダークテーマの対応がさらに簡単になります
Post on:2026年3月26日
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。 これまではlight-dark()関数はカラー値（<color>）のみし […]
UIに使用する色のコントラストをAIで検証、基準を満たしていないときはデザインに合った代替色を提案してくれる無料ツール
Post on:2026年3月24日
AIを使用して前景色と背景色のコントラスト、WCAG 2.1および2.2のAA/AAA基準を満たすアクセシブルな色の組み合わせをテストし、さらにその組み合わせに合った色で基準に満たした色も提案してくれる無料ツールを紹介し […]
ミニマルなデザインで使いやすい！ シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI
Post on:2026年3月23日
セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル！ 依存関係は一切なく、classレスと […]
これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる
Post on:2026年3月17日
画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。
Web制作者は要チェック！ スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能
Post on:2026年3月12日
3/11にアップデートされたChrome 146に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、スクロールの位置に基づいてアニメーションを制御する機能、meta name=t […]
これでSVGアイコンを探すときに困らない！ 無料で商用利用できるライブラリを横断検索できる便利サイト -All SVG Icons
Post on:2026年3月11日
SVGアイコン、特に無料で利用できるオープンソースのSVGアイコンをまとめて検索・閲覧できる便利なサイトを紹介します。 さまざまなSVGアイコンのライブラリを横断検索することもでき、好みのデザインを見つけて、SVGアイコ […]
sponsors
