Web制作に役立つ情報一覧

スクロール連動UIはCSSだけで作れる！

2026/02/02(Mon) 09:01

CSSには、スクロール位置が対象コンテンツの「前か」「後か」を判定するのに役立つものがあります。:target-before、:target-after、:target-currentの3つの疑似クラス、scroll-target-groupプロパティを使うと、今までJavaScriptを必要としていたスクロール連動のインタラクションをCSSだけで実現できます。

https://ics.media/entry/260130/

CSSの100vwで水平スクロールバーが表示される問題がようやく解決！ vwにスクロールの幅が含まれなくなります

2026/01/30(Fri) 09:01

Web制作者の長年の悩みがようやく解決されます！CSSで100vwを使用して幅いっぱいにすると、垂直のスクロールバー分が含まれて、水平スクロールバーが表示されてしまいます。この問題はWindowsで起こり、macOSでもクラシックのスクロールバーを使用していると起こります。

https://coliss.com/articles/build-websites/operation/css/using-100vw-is-now-scrollbar-aware.html

UIデザインのクオリティが格段にアップする！ 感覚的ではなく、論理的にデザインを改善するポイントを解説

2026/01/27(Tue) 08:51

WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。

https://coliss.com/articles/build-websites/operation/work/logic-driven-ui-design-tips.html

HTML Living StandardとモダンCSS、最新ブラウザに完全対応！ 目的別で分かりやすいリファレンス本 -HTML＆CSSポケットリファレンス 改訂第4版

2026/01/26(Mon) 08:57

『HTML＆CSSポケットリファレンス』の改訂第4版が、発売されました！先週発売されたばかりの最新刊で、HTML Living StandardとモダンCSSに対応したリファレンス本です。もちろん、最新のブラウザにも対応しており、HTMLとCSSの基礎知識からこれから使うであろう最新機能まで、収録されています。

https://coliss.com/articles/book-review/isbn-9784297153311.html#google_vignette

これはかなり便利！ 1クリックであらゆるWebサイトのデザインやアセットを抽出できるChromeの拡張機能 -MiroMiro

2026/01/21(Wed) 08:53

MiroMiroは1クリックするだけで、表示しているサイトを分析、デザイン要素を抽出、本番環境で使えるアセットに変換するオールインワンの拡張機能です。デベロッパーツールや似た拡張機能よりも直感的に操作でき、かなり便利です。

https://coliss.com/articles/build-websites/architectonics/copy-sites-design-assets.html

CSSでスタッガーアニメーションがつくれる！ sibling-index() / sibling-count()の活用アイデア

2026/01/20(Tue) 08:56

sibling-index()関数とsibling-count()関数は、兄弟要素の「並び順」や「総数」を整数として返すCSS関数です。数値として使えるので、calc()関数などと組み合わせられます。具体例としてわかりやすいのが、スタッガーアニメーション（要素が順番に遅れて動くアニメーション）です。

https://ics.media/entry/260116/

すごく分かりやすい！ デザインにおけるトーン＆マナーの考え方、揃え方を詳しく解説したデザイン書 -トンマナの基本

2026/01/19(Mon) 08:55

一つひとつはいいんだけど、全体で見るとなんかバラバラ、そういうデザインは「トンマナが揃っていない」と言われます。ここ数年で、デザインのトーン＆マナーを重要視しているWebサイトやスマホアプリも増えてきたように感じます。そのトンマナの考え方、作り方、運用について詳しく解説したデザイン書を紹介します。

https://coliss.com/articles/book-review/isbn-9784802615297.html

デザイナーのためのAI入門：ハルシネーションとは？仕組み・リスク・対策をわかりやすく解説

2026/01/08(Thu) 09:07

生成AI、すごく便利ですよね。でも、AIに質問して返ってきた回答を見て「え、これ本当⋯？」と思ったこと、ありませんか？調べてみたら、実在しない本を紹介されていたり、微妙に事実と違う情報が混ざっていたり。じつは、これには「ハルシネーション」という名前がついています。AIが幻覚を見ているかのように、存在しない事実を作り出してしまう現象のことなのです。

https://designmemo.jp/2026/01/ai-hallucination-for-designers.html

『つくって学べる はじめてのFigmaデザイン』の「はじめに」全文公開と、発売後の記録

2026/01/06(Tue) 08:53

デザインメモ初の商業書籍『つくって学べる はじめてのFigmaデザイン』が12月2日発売されて、まもなく1ヶ月が経ちます。まだデザインメモでは、この本についてきちんと書けていなかったのですが、まずはこの本の「はじめに」をそのまま掲載しようと思います。

https://designmemo.jp/2025/12/figma-book-after-release.html

AI検索とSEO：変わること、変わらないこと

2026/01/05(Mon) 09:00

Search Off the Record ポッドキャスト のエピソード 102 では、Danny Sullivan（ダニー・サリヴァン）氏と John Mueller（ジョン・ミューラー）氏が、AI Overviews (AIO) によって Google 検索が どのように進化しているのか、そしてそれが SEO に何を意味するのかをディスカッションしました。

https://www.suzukikenichi.com/blog/ai-search-and-seo-what-changes-and-what-stays-the-same/