Monthly Newsletter 5月号

2025年4月に公開した記事を分野ごとにまとめて紹介する。今月はCSSの新機能やレイアウト、AI活用、マインドセットなど多彩な話題を取り上げている。

HTML

ダークモードやライトモードに応じて画像を切り替える方法を解説。<picture>要素のmedia属性を活用し、ユーザーの環境に合わせた画像表示を実現する。

国際化対応の一環として、複数の文字体系が混在する日本語文書で自動的にスペースを挿入できるtext-autospaceプロパティを紹介。現時点では一部ブラウザのみ対応で、デフォルト値の違いに注意が必要である。

印刷時の色表現を最適化するprint-color-adjustプロパティを解説。背景色を印刷時に省略したり、正確に再現したりする用途に使える。

conic-gradientやrepeating-conic-gradientを使い、マンガの集中線エフェクトをCSSだけで表現する方法を紹介。角度の調整で密度も自在に変更できる。

レイアウト設計において、FlexboxよりもGridを優先して使うべき理由を解説。Flexboxの幅指定の難しさや、Gridの柔軟性・保守性の高さを具体例とともに説明する。

ボタン付きスタック型コンポーネントでスクロールバー表示時に発生するレイアウト崩れの原因と、OSの外観設定やscrollbar-gutterプロパティによる対策を解説。

並行システムで発生するデッドロックやリソース競合の例として有名な「食事する哲学者の問題」を解説。セマフォなどを用いた解決策も紹介。

AIとアプリケーション間の情報連携を効率化するModel Context Protocol（MCP）について解説。Node.js+TypeScriptで最小構成のMCPサーバを実装する手順を紹介。

ChatGPTのカスタム機能を活用し、独自の辞書データを組み込んだ翻訳機の構築事例を紹介。ビジネス用語や固有名詞の正確な翻訳を実現する工夫を解説。

「教えがいのある人」になるための心構えと行動指針を述べる。自分から積極的に実践・フィードバックし、周囲と知識を循環させる重要性を説く。