CodeGrid【公式】
banner
codegrid.net
CodeGrid【公式】
@codegrid.net
Jamstackの会社ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストします。

https://www.codegrid.net/
Pinned
【本日公開一覧】CodeGrid今週公開の3本はこちら!

🔸行く2025年、来る2026年 最終回 デザインと実装編
🔸Google Fontsで学ぶWebフォントの基本 第2回 preconnectとCORSを理解する
🔸AIエージェントのススメ 第5回 私の思う重要とあなたの思う重要は違う

codegrid.net/issues/666/
#codegrid
第666号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
Webフォントの読み込みは通信最適化によって速くできます。preconnectで何が短縮されるのか、なぜフォント取得にCORSとcrossoriginが必須なのかを整理。通信の仕組みから理解しましょう:Google Fontsで学ぶWebフォントの基本 - preconnectとCORSを理解する www.codegrid.net/articles/202... #codegrid
Google Fontsで学ぶWebフォントの基本 | 第2回 preconnectとCORSを理解する
Webフォントの読み込みを最適化するpreconnectの仕組みと、フォントに必須のCORS・crossorigin属性について解説します。
www.codegrid.net
February 12, 2026 at 8:47 AM
【本日公開】Figma Makeや画像生成AIで、UIデザインの進め方はどう変わるでしょうか? その場で調整できるUIプロトタイプで合意形成を加速し、実装とのズレも減らす。AI時代のデザインフローを予感させる座談会です:行く2025年、来る2026年 - デザインと実装編 www.codegrid.net/articles/202... #codegrid
行く2025年、来る2026年 | 最終回 デザインと実装編
AIを用いた開発はWebデザインの現場にも大きな変化をもたらしています。UIデザイナーとエンジニアの協業もAIの出現によって変わっていくのかもしれない、そんな予感のする座談会になりました。
www.codegrid.net
February 12, 2026 at 8:45 AM
【本日公開一覧】CodeGrid今週公開の3本はこちら!

🔸行く2025年、来る2026年 最終回 デザインと実装編
🔸Google Fontsで学ぶWebフォントの基本 第2回 preconnectとCORSを理解する
🔸AIエージェントのススメ 第5回 私の思う重要とあなたの思う重要は違う

codegrid.net/issues/666/
#codegrid
第666号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
February 12, 2026 at 8:45 AM
【本日公開】Claude CodeにIsuueを読み込ませて重要と思われるトピックを挙げさせ、筆者がさらに選んでからドキュメントを作らせました。でも、何かしっくりこない。それはなぜ?:AIエージェントのススメ - 私の思う重要とあなたの思う重要は違う www.codegrid.net/articles/202... #codegrid
AIエージェントのススメ | 第5回 私の思う重要とあなたの思う重要は違う
AIエージェントにドキュメントを作らせようとして失敗した話の続きです。AIと人間の判断の違いについて紹介します。
www.codegrid.net
February 12, 2026 at 8:43 AM
【最新記事】CodeGrid先週公開の3本はこちら!

🔸CSSでの文字縁取りを考える 前編:文字縁取りの基本
🔸行く2025年、来る2026年 第6回 HTML/CSS、Web標準編:後編
🔸AI時代のプロフェッショナル 後編:組織に貢献するプロフェッショナル

codegrid.net/issues/665/
#codegrid
第665号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
February 9, 2026 at 12:00 AM
【本日公開】CodeGrid今週公開の3本はこちら!

🔸CSSでの文字縁取りを考える 前編:文字縁取りの基本
🔸行く2025年、来る2026年 第6回 HTML/CSS、Web標準編:後編
🔸AI時代のプロフェッショナル 後編:組織に貢献するプロフェッショナル

codegrid.net/issues/665/
#codegrid
第665号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
February 5, 2026 at 8:41 AM
【本日公開】エンジニアによる座談会。後編はChromeのサードパーティークッキー廃止の顛末、プライバシーサンドボックスの終了、AIブラウザの台頭など、昨年のブラウザの動向を振り返りこれからを考えます:行く2025年、来る2026年 - HTML/CSS、Web標準編:後編 www.codegrid.net/articles/202... #codegrid
行く2025年、来る2026年 | 第6回 HTML/CSS、Web標準編:後編
HTML/CSS、Web標準、ブラウザの動向について座談会形式で振り返ります。後編ではブラウザの動向について話していきます。
www.codegrid.net
February 5, 2026 at 8:41 AM
【本日公開】CSSで文字の縁取りについて少し深堀りします。-webkit-text-strokeが潰れる理由と、paint-orderで安定して制御する実践的な方法を解説。デザイン再現で悩むフロントエンド・エンジニアにおすすめ:CSSでの文字縁取りを考える - 文字縁取りの基本 www.codegrid.net/articles/202... #codegrid
CSSでの文字縁取りを考える | 前編 文字縁取りの基本
文字の縁取りは、CSSでは意外と悩みがちです。太さを変えると文字が潰れたり、ブラウザごとに見え方が違ったり。この記事では縁取り文字を安定して制御する考え方と実践的な表現テクニックを整理します。
www.codegrid.net
February 5, 2026 at 8:40 AM
【本日公開】AIでコードを書く時代、価値は「実装」ではありません。仕事をどう仕組みに落とし、楽に・速く・高品質に回すか。組織で効くプロフェッショナルの思考を整理しました:AI時代のプロフェッショナル - 組織に貢献するプロフェッショナル www.codegrid.net/articles/202... #codegrid
AI時代のプロフェッショナル | 後編 組織に貢献するプロフェッショナル
後編では組織の中のプロフェッショナルに焦点を当てます。どのような立ち位置であるのか、どのようなスキルが求められるのか、考えてみます。
www.codegrid.net
February 5, 2026 at 8:39 AM
【 障害復旧 】ログインできない障害は2月2日23:10より発生しておりましたが、先ほど18:45に復旧し、正常にログインできることを確認いたしました。お待たせして大変申し訳ありませんでした。
February 3, 2026 at 10:13 AM
【 障害調査中 】現在、CodeGridにログインできない状態になっております。原因を調査中です。ご不便をおかけして、大変申し訳ありません。詳細がわかり次第、ご報告いたします。
February 3, 2026 at 1:50 AM
【先週公開】CodeGridの最新記事はこちら!
🔸Google Fontsで学ぶWebフォントの基本 Webフォントが表示されるまで
🔸AIエージェントのススメ コンテキスト圧縮でペラペラのドキュメントが誕生
🔸CSS Custom Highlight APIで行う文字スタイル変更 実践編
codegrid.net/issues/664/
#codegrid
第664号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
February 2, 2026 at 12:01 AM
【本日公開】CodeGrid今週の公開記事はこちら!
🔸Google Fontsで学ぶWebフォントの基本 Webフォントが表示されるまで
🔸AIエージェントのススメ コンテキスト圧縮でペラペラのドキュメントが誕生
🔸CSS Custom Highlight APIで行う文字スタイル変更 実践編
codegrid.net/issues/664/
#codegrid
第664号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
January 29, 2026 at 8:18 AM
【本日公開】「選択したテキストをハイライト表示」という機能を、DOM操作ではなくCSS Custom Highlight APIを使う方法で実装します:CSS Custom Highlight APIで行う文字スタイル変更 - 実践編:選択した箇所を強調する www.codegrid.net/articles/202... #codegrid
CSS Custom Highlight APIで行う文字スタイル変更 | 後編 実践編:選択した箇所を強調する
CSS Custom Highlight APIを使って、ユーザーが選択したテキスト範囲にラベルを付けてハイライトし、クリックで削除できるインタラクティブなアプリケーションを作ります。実装を段階的に解説していきます。
www.codegrid.net
January 29, 2026 at 8:17 AM
【本日公開】AIは文章をつくるのもうまいはずだから「プロジェクト情報をすべて読み、いい感じにまとめたドキュメントをつくるのだ!」と命令したのに…うまくいきません。その理由は?:AIエージェントのススメ - コンテキスト圧縮でペラペラのドキュメントが誕生 www.codegrid.net/articles/202... #codegrid
AIエージェントのススメ | 第4回 コンテキスト圧縮でペラペラのドキュメントが誕生
今回からは、案件のドキュメントを作らせようとしたらまったく上手くいかなかったという失敗談です。失敗の原因には「コンテキスト」というAIエージェントの概念が関わっています。
www.codegrid.net
January 29, 2026 at 8:15 AM
【本日公開】Webフォント、なんとなく使っていませんか? Google Fontsを例にフォントの読み込みやDevToolsでの確認方法まで整理。シリーズ後半ではNext.jsによる最適化についても解説予定です:Google Fontsで学ぶWebフォントの基本 - Webフォントが表示されるまで www.codegrid.net/articles/202... #codegrid
Google Fontsで学ぶWebフォントの基本 | 第1回 Webフォントが表示されるまで
まずはGoogle Fontsを例にWebフォントがどのように読み込まれ、ブラウザのページ上に表示されるのか、その過程を追ってみます。
www.codegrid.net
January 29, 2026 at 8:15 AM
【イベント登壇】
1/29のDIST.52 「今から始めるClaude Code超入門」に、ピクセルグリッドの高津戸が登壇します!
高津戸のセッション内容は「Docusaurusと一緒に何でもできるClaude Code」ですよ〜

dist.connpass.com/event/380900/
DIST.52 「今から始めるClaude Code超入門」 (2026/01/29 19:00〜)
# 概要 生成AIによる開発支援は、今や「AIとチャットする」段階から「AIエージェントと共に作る」段階へと劇的な進化を遂げています。 先の2025年、Anthropic社からリリースされた「Claude Code」は、その筆頭として大きな注目を集めています。単なるコード生成にとどまらず、プロジェクト全体の構造を深く理解したうえで、コードの記述・ビルド・テスト、さらにはエラー解決までの思考プロ...
dist.connpass.com
January 26, 2026 at 3:37 AM
【先週公開一覧】CodeGrid最新の3本はこちら!

🔸行く2025年、来る2026年 HTML/CSS、Web標準編:前編
🔸検索UI search要素を用いた検索フォームのマークアップ
🔸Floating UI Reactで作るUIコンポーネント コンボボックスUI:JSX実装と操作性の向上

codegrid.net/issues/663/
#codegrid
第663号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
January 26, 2026 at 12:00 AM
【本日公開】検索UIのマークアップの基本をあらためて整理。search要素を中心に、検索フォームのマークアップ原則や判断ポイント、注意点を解説。実装の再入門やおさらいに!:検索UI、実装のおさらい - search要素を用いた検索フォームのマークアップ www.codegrid.net/articles/202... #codegrid
検索UI、実装のおさらい | search要素を用いた検索フォームのマークアップ
search要素を中心に検索UIにまつわる要素を整理し、現時点での原則的なマークアップをおさらいします。実装時の判断ポイントや注意点についても解説しています。
www.codegrid.net
January 22, 2026 at 9:40 AM
【本日公開一覧】CodeGrid今週公開の3本はこちら!

🔸行く2025年、来る2026年 HTML/CSS、Web標準編:前編
🔸検索UI search要素を用いた検索フォームのマークアップ
🔸Floating UI Reactで作るUIコンポーネント コンボボックスUI:JSX実装と操作性の向上

codegrid.net/issues/663/
#codegrid
第663号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
January 22, 2026 at 9:35 AM
【本日公開】絞り込みの代替キーワードも利用できるコンボボックスUIを作成します。Floating UI Reactは、見た目の変更も可能で、HTML仕様にないUIもつくれるUIライブラリです:Floating UI Reactで作るUIコンポーネント - コンボボックスUI:JSX実装と操作性の向上 www.codegrid.net/articles/202... #codegrid
Floating UI Reactで作るUIコンポーネント | 最終回 コンボボックスUI:JSX実装と操作性の向上
前回までに解説したFloating UI Reactを使ったセレクトUIの作り方を元に、コンボボックス(絞り込み入力付きセレクト)を実装する方法を紹介します。
www.codegrid.net
January 22, 2026 at 9:35 AM
【本日公開】HTML/CSS関連の座談会、まずはInterop、Baseline、Web Componentsなどから話していきます。さらに、Masonry Layout、text-autospace、Invoker Commandsなど、注目している仕様もチェック!:行く2025年、来る2026年 - HTML/CSS、Web標準編:前編 www.codegrid.net/articles/202... #codegrid
行く2025年、来る2026年 | 第5回 HTML/CSS、Web標準編:前編
今回と次回の2回にわたって、HTML/CSS、Web標準、ブラウザの動向について座談会形式で振り返ります。前編ではHTML/CSS全般について話していきます。
www.codegrid.net
January 22, 2026 at 9:34 AM
【先週公開一覧】CodeGrid先週公開の3本はこちら!
🔸行く2025年、来る2026年 AI時代のフロントエンド開発動向編
🔸CSS Custom Highlight APIで行う文字スタイル変更 前編:利用用途例と基本的な使い方
🔸「形」から入るデザイン入門 文章を形に変換するヒント

codegrid.net/issues/662/
#codegrid
第662号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
January 19, 2026 at 12:00 AM
【本日公開】文章の要件を、どうUIの形に落とし込むか。ボタンや図形、余白に込められた意図を読み解き、伝わる画面を設計するヒントを解説します。仕様書とデザインの橋渡しに!:「形」から入るデザイン入門 - 文章を形に変換するヒント www.codegrid.net/articles/202... #codegrid
「形」から入るデザイン入門 | 文章を形に変換するヒント
デザインの要件は多くが文章で提示されます。この記事では、それらの文章をどのように「形」で表していくのか、その過程を追い、うまく形に変換するための、いくつかのヒントを提示します。
www.codegrid.net
January 15, 2026 at 9:03 AM
【本日公開一覧】CodeGrid今週公開の3本はこちら!
🔸行く2025年、来る2026年 AI時代のフロントエンド開発動向編
🔸CSS Custom Highlight APIで行う文字スタイル変更 前編:利用用途例と基本的な使い方
🔸「形」から入るデザイン入門 文章を形に変換するヒント

codegrid.net/issues/662/
#codegrid
第662号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
codegrid.net
January 15, 2026 at 9:02 AM