このCSSは難読すぎる! 絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji

ぱっと見、なんじゃこりゃ! と思ったのですが、よく見ると絵文字をclass名としてしっかりとしたBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワークを紹介します。

完全なデザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、さらにビルドツールチェーンも付属しています。

絵文字をclass名に使用したBEMメソッドの本番環境レベルで使えるCSSフレームワーク -BEMoji

BEMoji
BEMoji -GitHub

続きを読む

HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css

プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。

ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセットCSSに利用してもよさそうです。

classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css

dev.css
dev.css -tangled

続きを読む

CSSの新機能が便利! FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能

先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべき点は、たくさんあります!
まずはshape()shape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さらにCSS GridやFlexboxのギャップをスタイルできるようになり、コンテナ間に罫線などを簡単に実装できます。また、拡大縮小された画像をくっきり表示させたり、テーブルのデフォルトだったboder-color: gray;が削除されたなど、Web制作者は要チェックです!

Chrome 149で新しく追加された9個のCSSとUIに関する機能

New in Chrome 149
Chrome 149 beta

続きを読む

AI検索や生成AIの現在、AI最適化に必読の一冊! AIOという新しい考え方についてしっかり学べる解説書 -AI最適化の教科書

※本ページは、アフィリエイト広告を利用しています。

2026年になり、検索を取り巻く環境は大きく変わりました!
以前はGoogleなどの検索で上位表示されることが重要でしたが、現在ではAIが複数のWebサイトから情報を集めて引用し、ユーザーに最適な答えを提示します。

AI検索や生成AIの最適化はAIO(AI Optimization)と呼ばれています。AIOとはどのような仕組みで、最適化するにはどのようにすればよいかをしっかり学べる解説書を紹介します。

AI最適化の教科書

続きを読む

数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ

優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。

生成AIのスキルとしてコーディングアシスタント(Claude Code、Codexなど)に使うこともできます。

数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ

Details that make interfaces feel better
Details that make interfaces feel better -GitHub

続きを読む

UIデザインやエディタのカラーに最適! 目に優しい、アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki

アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。

WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。

アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki

Flexoki
Flexoki -GitHub

続きを読む

CSSのpow()関数が便利! フォントサイズをレスポンシブ対応にするCSSの新しいテクニック

CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。

メディアクエリやブレイクポイントの設定は不要で、あらゆるWebサイト、スマホアプリで利用できます。

フォントサイズをレスポンシブ対応にするCSSの新しいテクニック

Fluid Modular Type Scale -GitHub

続きを読む

Amazon スマイルSALEは明日(6/2)まで! 見逃しがちなお買い得品を紹介します

※本ページは、アフィリエイト広告を利用しています。

Amazonで開催されているスマイルSALEもいよいよ明日(6/2)が最終日、このセールでは特に生活用品が数多く対象になっており、通常のセールよりもかなり安くなって、非常にお買い得です。

見逃しがちなお買い得品、今回のセールで私が実際に購入したものを紹介します。ブラックフライデーやプライムデーより安くなっているものもあります!

サイトのキャプチャ

Amazon スマイルSALE

続きを読む

top of page

©2026 coliss