サイト構築
CSSのcolumn-ruleプロパティが便利！ 疑似要素やボーダーを使用せずに、コンテナ間に区切り線を装飾できるようになります
Post on:2026年6月25日
この機能を待ち望んでいた人は、多いと思います！ 6月にアップデートされたChrome 149で、CSS GridやFlexboxのギャップをCSSで装飾できるようになりました。言い換えると、コンテナ間に区切り線をスタイル […]
こういうアプリが欲しかった！ OSやアプリ間で重複しているショートカットキーを特定する無料アプリ -HotkeyClash
Post on:2026年6月24日
アプリをインストールして困ることが、ショートカットキーが他のアプリと重複している場合です。いつもなら「Command + スペース」でスポットライトを呼び出せるのに、なぜか他のアプリが起動してしまったことはありませんか？ […]
CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec
Post on:2026年6月23日
CSSの検証やデバッグにデベロッパーツールを使用している人が多いと思います。しかし、デベロッパーツールではリロードするとその変更内容が消えてしまうという大きな弱点があります。 macOS用のインスペクター、CSSに特化さ […]
レスポンシブの対応はメディアクエリとclamp()の使い分けが大事！ あらゆるプロパティに対応したclamp()の値を生成できる便利ツール -CSS Clamp Generator
Post on:2026年6月16日
レスポンシブ対応の最近の実装方法は、メディアクエリとclamp()の使い分けが明確になってきました。メディアクエリは構造的なレイアウトを変更するとき、そしてclamp()はビューポートに対して比例的に変更するとき、といっ […]
これは便利すぎる！ Webページをコピペで、編集可能なFigma用に変換できる拡張機能「Copy to Figma」しかも完全無料
Post on:2026年6月11日
Chromeに表示したWebページや特定のセクションをコピペで、Figmaの編集可能なレイヤーに変換できる拡張機能を紹介します。 以前紹介したhtml.to.designと似ていますが、html.to.designはサブ […]
この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の新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能
Post on:2026年6月8日
先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべき点は、たくさんあります！ まずはshape()がshape-outsideプロパティで動 […]
数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ
Post on:2026年6月4日
優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングア […]
UIデザインやエディタのカラーに最適！ 目に優しい、アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki
Post on:2026年6月3日
アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Cod […]
sponsors
