サイト構築 -実装
数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ
Post on:2026年6月4日
優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングア […]
UIデザインやエディタのカラーに最適！ 目に優しい、アナログ印刷のインキと紙の色合いを再現したカラースキーム -Flexoki
Post on:2026年6月3日
アナログ印刷のインキ、温かみのある紙の色合いからインスピレーションを得て、デジタルのスクリーンで見ることを想定して設計されたカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Cod […]
CSSのpow()関数が便利！ フォントサイズをレスポンシブ対応にするCSSの新しいテクニック
Post on:2026年6月2日
CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。 メディアクエ […]
UIデザインはもちろん、イラストや紙のデザインにも対応！ カラーパレットをAIで生成できる完全無料ツール -EnigmaEasel
Post on:2026年5月27日
ここ1,2年でAIによる便利なツールが増えてきました。ここで紹介するのはそれらの便利なAIツールの中でもかなり実用的で、これまでの定番ツールも同時に利用できるお勧めツールです。 プロンプト（日本語）で「夕陽のカラーパレッ […]
Bartenderの代替にThawがお勧め！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ
Post on:2026年5月26日
macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。 Thawは常に表示するアイコンと非表示するアイコンを設定でき、「…」をクリックすると非表示に設定したアイコンが表示 […]
HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI
Post on:2026年5月25日
HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。 各 […]
フォント好きは要チェック！ 和文フォントと欧文フォントの混植をブラウザ上で簡単に試すことができる便利サイト -MOBULA
Post on:2026年5月21日
フォントの混植とは、日本語のテキストは和文フォントで、英語のテキストは欧文フォントで表示したり、またよくあるのがひらがなフォントに漢字が揃っているフォントを混植したり、2つのフォントを組み合わせて使用することです。 通常 […]
HTMLの新しい要素「<install>」はJavaScriptなしで、Webアプリのインストールが簡単にできるようになります
Post on:2026年5月20日
安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、HTMLの新しい要素「<install>」が利用できるようになっています。 <install>でインストールボタン […]
Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle
Post on:2026年5月19日
flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素 […]
職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons
Post on:2026年5月18日
コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。 display: flex;, display: grid;はもちろん、position […]
sponsors
