これは便利すぎる！ Webページをコピペで、編集可能なFigma用に変換できる拡張機能「Copy to Figma」しかも完全無料
Post on:2026年6月11日
Chromeに表示したWebページや特定のセクションをコピペで、Figmaの編集可能なレイヤーに変換できる拡張機能を紹介します。
以前紹介したhtml.to.designと似ていますが、html.to.designはサブスクで無料版はかなりの制限があります。この記事で紹介するCopy to Figmaは完全に無料で、すべての機能を利用できます！
このCSSは難読すぎる！ 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji
Post on:2026年6月10日
ぱっと見、なんじゃこりゃ！ と思ったのですが、よく見ると絵文字をclass名としてしっかりとしたBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワークを紹介します。
完全なデザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、さらにビルドツールチェーンも付属しています。
HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css
Post on:2026年6月9日
プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。
ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセットCSSに利用してもよさそうです。
CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能
Post on:2026年6月8日
先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。
今回のアップデートで注目すべき点は、たくさんあります！
まずはshape()がshape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さらにCSS GridやFlexboxのギャップをスタイルできるようになり、コンテナ間に罫線などを簡単に実装できます。また、拡大縮小された画像をくっきり表示させたり、テーブルのデフォルトだったboder-color: gray;が削除されたなど、Web制作者は要チェックです！
AI検索や生成AIの現在、AI最適化に必読の一冊！ AIOという新しい考え方についてしっかり学べる解説書 -AI最適化の教科書
Post on:2026年6月5日
※本ページは、アフィリエイト広告を利用しています。
2026年になり、検索を取り巻く環境は大きく変わりました！
以前はGoogleなどの検索で上位表示されることが重要でしたが、現在ではAIが複数のWebサイトから情報を集めて引用し、ユーザーに最適な答えを提示します。
AI検索や生成AIの最適化はAIO（AI Optimization）と呼ばれています。AIOとはどのような仕組みで、最適化するにはどのようにすればよいかをしっかり学べる解説書を紹介します。
数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ
Post on:2026年6月4日
優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。
生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこともできます。
Details that make interfaces feel better
Details that make interfaces feel better -GitHub
UIデザインやエディタのカラーに最適！ 目に優しい、アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki
Post on:2026年6月3日
アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。
WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。
CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック
Post on:2026年6月2日
CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。
メディアクエリやブレイクポイントの設定は不要で、あらゆるWebサイト、スマホアプリで利用できます。
