HTMLは非常にシンプル! 圧倒的な速さでMaterial Design 3のUIを実装できるCSSの超軽量フレームワーク -Beer CSS

ここ数年で数多くのCSSのフレームワークが登場しました。BootstrapBulmaをはじめ、Tailwind CSSなど、それらを使用したことがある人も多いと思います。

しかし、これらの人気が高いフレームワークはバージョンアップを重ねにつれ、肥大化と複雑さが問題点として挙げられます。

最近注目されているCSSの超軽量フレームワーク「Beer CSS」🍺を紹介します。シンプルで効率がよく、柔軟性もあり、アクセシブルで、セマンティックHTMLで記述します。

Material Design 3をベースにした初のCSSフレームワーク -Beer CSS

Beer CSS
Beer CSS -GitHub

続きを読む

実は難しい! CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック

CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか?

下記のデモはうまく機能していますが、角丸が汚かったり、最初が鋭角の矩形にならなかったり、角丸をスムーズにアニメーションさせる際に遭遇する問題点とその解決方法を紹介します。

CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック

Smoothly animating a border-radius
by Bramus!

続きを読む

これは絶対見逃すな! AmazonでAdobe CC コンプリートプランが新規対象キャンペーンで46%オフ、ほとんどの人が46%オフで購入できます

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

Amazonで、Adobe CC コンプリートプランが激安価格になるセールが開催されています!

去年のブラックフライデーと同様で新規対象キャンペーンとなっており、驚異の46%オフです。「新規対象」とは今回のセールで初めて購入する人が対象で(つまり1つ限定)、既にコンプリートプランを使用している人でも過去にAmazonで購入した人でも問題なく購入できることを確認しました(人柱になって私が購入しました)。

セール期間は4/4までなので、絶対お見逃しないように!

サイトのキャプチャ

【新規対象キャンペーン】Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

続きを読む

Illustratorの使い方を身につけたい人に! センスのよいデザインを作りながら学べる解説書 -Illustratorおてがる入門

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

Adobe Illustratorをそろそろ学びたいな、と思っている人にお勧めの解説書を紹介します。

「おてがる」とあるように本書では難しいと思われがちなIllustratorの使い方をお手軽に使いこなせるようになる一冊です。また、入門書にありがちなダサいデザインをつくって学ぶのではなく、センスのよいデザインが揃っているので、楽しく学ぶことができると思います。

Illustratorおてがる入門

続きを読む

Cursorをこれから使用する人にお勧めの解説書、コードやテキストを書くときの効率アップにつながる方法を詳しく解説 -Cursor完全入門

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

AIコードエディタのCursorってどうなの? エディタはテキスト編集にしか使わないけど役立つの? HTMLやCSSにもAIが役立つの? アプリ開発もAIでできるの? Gitとかは大丈夫?

そんな疑問を解決してくれるCursorの入門書を紹介します。入門書とは言っても内容はかなり濃く、非常に役立ちます。

本書は本日3/19が、発売日!

Cursor完全入門

続きを読む

AIなら超簡単で早い! Webサイトの構造を視覚化し、サイトマップを生成できる無料ツール -AI Sitemap Generator

最近はAIによる便利ツールが増えてきましたね。既存サイトの構造を視覚化し、ヴィジュアルサイトマップを生成できるAIツールを紹介します。

サイトマップを生成するだけでなく、コンテンツもAIで生成できるので、既存サイトの改善やリニューアルにも役立ちます。

AIなら超簡単で早い! Webサイトの構造を視覚化し、サイトマップを生成できる無料ツール -AI Sitemap Generator

AI Sitemap & Website Content Generator

続きを読む

商用でも完全に無料! ゲームだけでなく、UIデザインにもぴったりな1,440個のピクセルアイコン -Pixel Icon Library

HackerNoonのレトロなデザインにインスパイアされた、24ピクセルのグリッドで設計されたピクセルアイコンを紹介します。

アイコンは1,440個以上あり、一貫性が確保されたかわいいデザインです。Webサイト、アプリ、プロダクトなど、さまざまなプロジェクトで無料で利用できます。

ゲームだけでなく、UIデザインにもぴったりな1,440個のピクセルアイコン -Pixel Icon Library

Pixel Icon Library
Pixel Icon Library -GitHub

続きを読む

センスや感覚で判断するのではなく、使いやすさとクオリティに重視したロジカルなデザイン書 -ウェブデザインの思考法 第2版

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

Webサイトやスマホアプリの善し悪しや品質を感覚的に判断されてしまうことがあります。たとえば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういった経験はありませんか?

UIデザインの使いやすさや便利さ(機能性)とビジュアルのクオリティ(情緒性)を両立させたデザイン方法と方針策定のプロセスをロジカルに解説したデザイン書を紹介します。

ウェブデザインの思考法 第2版

続きを読む

top of page

©2025 coliss