flex-wrap: balance で Flexbox の折り返しを均等にする
flex-wrap: wrap では、最後の行に少数のアイテムだけが残り、行ごとのアイテムの量が大きく偏ることがあります。flex-wrap: balance は、通常の折り返しで決まる行数を維持しながら、各行の長さが近くなるように Flex アイテムを振り分けます。この記事では balance 使い方について紹介します。
最新記事
Zod の z.compile() でバリデーションを高速化する
Zod 4.5 で、スキーマを実行時に最適化された JavaScript へ変換する z.compile() が追加されました。コンパイル済みスキーマは通常のスキーマと同じ API を保ちながら、複雑なデータの検証を高速化します。この記事では基本的な使い方と仕組みを紹介します。
CSS の shape() 関数でレスポンシブな図形を作る
clip-path の path() 関数で複雑な図形を作ると、固定座標のため要素のサイズへ追従させにくいという問題があります。shape() 関数ではパーセントや CSS の単位、カスタムプロパティを使って曲線を含む図形を定義できます。この記事では幅を変更できる吹き出しを作り、path() との違いや offset-path への応用を紹介します。
Feature
flex-wrap: balance で Flexbox の折り返しを均等にする
flex-wrap: wrap では、最後の行に少数のアイテムだけが残り、行ごとのアイテムの量が大きく偏ることがあります。flex-wrap: balance は、通常の折り返しで決まる行数を維持しながら、各行の長さが近くなるように Flex アイテムを振り分けます。この記事では balance 使い方について紹介します。
Zod の z.compile() でバリデーションを高速化する
Zod 4.5 で、スキーマを実行時に最適化された JavaScript へ変換する z.compile() が追加されました。コンパイル済みスキーマは通常のスキーマと同じ API を保ちながら、複雑なデータの検証を高速化します。この記事では基本的な使い方と仕組みを紹介します。
CSS の shape() 関数でレスポンシブな図形を作る
clip-path の path() 関数で複雑な図形を作ると、固定座標のため要素のサイズへ追従させにくいという問題があります。shape() 関数ではパーセントや CSS の単位、カスタムプロパティを使って曲線を含む図形を定義できます。この記事では幅を変更できる吹き出しを作り、path() との違いや offset-path への応用を紹介します。
人気記事
- AI に技術ブログを書かせてみてわかったこと
- Slack 上でオープンな開発を行う Slack Code を試してみた
- Vitest のモックを using で自動的に復元する
- 最近の AI コーディングで実践している、設計を中心とした開発の進め方
- Claude Code デスクトップで Worktree を作成するとき .worktreeinclude で .gitignore で除外されているファイルを含める
- 実装前に設計を徹底的にインタビューし、要件を明確にするためのスキル `/grill-me`
- エディタを Zed に乗り換えてみた
- Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
- TanStack Virtual で大量の要素を仮想化して描画する
- 2ページ目 | azukiazusaのテックブログ2
ショート
azukiazusa
Codex のネットワークアクセス設定
azukiazusa
Codex Hooks で終了時に通知を出す
azukiazusa
Codex の smart_approvals で承認の負担を軽減する
azukiazusa
browserslist で Baseline を設定できるようになった
登壇資料
2026
-
リファクタリングのためのトークン節約術
エージェントがより効率よくタスクを達成できるように、日常のタスクの中で徐々にメモリやスキルを改善していこうという話です。
-
フロントエンドカンファレンス名古屋 2026
フロントエンドの相手が変わった - AIが加わったWebの新しいインターフェース設計
フロントエンドエンジニアがこれまで向き合ってきた相手は人間でしたが、AIの登場によってその前提が変わりつつあります。AIがWebの出力者になる（ストリーミングUI、MCP Apps）ことと、AIがWebの消費者になる（Markdown配信、WebMCP）という2つの変化を軸に、AI時代のWebインターフェース設計を考察します。
-
React Tokyo Fes 2025
コーディングエージェントにフロントエンドを書かせるとき、フィードバックはどのように与えるか？
LLMベースのコーディングエージェント(Claude Code、Codexなど)が普及しているが、LLMの反復改善プロセスにおいて、コード実行結果のフィードバックがなぜ不可欠です。バックエンド開発では実行結果やテストを通じて即座にフィードバックを得られる一方、フロントエンド開発では独特の課題が存在します。本発表では、コーディングエージェントがフロントエンドコードを生成する際の「フィードバックループの問題」に焦点を当て、実践的な解決策とそのトレードオフについて議論します。