CodeGrid

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 🔸CSS Anchor Positioning入門 第1回 CSS Anchor Positioningの基本とanchor()関数 🔸Webサイトのアクセス制御 公開前サイトのアクセス制限の手法 🔸SVGフィルタで拡張するCSSの表現 第2回 SVGフィルタの仕組みと色の制御 codegrid.net/issues/673/ #codegrid

【無料公開】 CSSの`attr()`関数が大きく進化しました🎉 従来は疑似要素の`content`プロパティのみの対応でしたが、任意のCSSプロパティで使えるように。属性値を型として解釈する指定や、フォールバック値の設定方法まで、拡張された構文の基本をわかりやすく解説します codegrid.net/articles/2026-… #codegrid #css 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます

【Tips】 JSONのimport文、使ってはいけないケースがあります⚠️ ・静的インポートはエラーハンドリングができない ・モジュールとして読み込まれたJSONはキャッシュされ、ページリロードまで更新・破棄されない（GCの対象外） 大量データや更新頻度の高いJSONには不向きです。設定ファイルなど「小さく静的なJSON」に限定して使うのがベストプラクティスです👍️ #codegrid #javascript

【本日公開】「この要素の下辺を基準に配置」をCSSだけで書けるanchor()関数。calc()との組み合わせやフォールバック指定まで、CSS Anchor Positioningの基本を解説します：CSS Anchor Positioning入門 - CSS Anchor Positioningの基本とanchor()関数 codegrid.net/articles/2026-… #codegrid

【本日公開】SVGフィルタで色を扱うには2つの方法があります。CSSに近い感覚で使えるfeFloodと、より高度な色操作ができるfeColorMatrix、それぞれの得意なことを知っておきましょう：SVGフィルタで拡張するCSSの表現 - SVGフィルタの仕組みと色の制御 codegrid.net/articles/2026-… #codegrid

【本日公開】関係者だけにサイトを見せる場合の手法として、Basic認証・サイトパスワード保護・IPアドレス制限・アカウント認証の4つを比較。Vercel・Cloudflare・Netlifyの対応状況もまとめています：Webサイトのアクセス制御 - 公開前サイトのアクセス制限の手法 codegrid.net/articles/2026-… #codegrid

Claude Clodeの隠しコマンド、`/buddy `は試しました!? 社内スタッフからは、EMUSHROOM、DUCK、RABBIT、GOOSE、DRAGON…などなどの報告が上がっていますよ！

【Tips】 APIから受け取る日時がUTC基準の場合、 日時文字列の末尾に Z を付けることで UTC基準のDateオブジェクトを生成できます。 new Date('2025-11-01T09:45:25Z') +09:00 や Z の指定が、タイムゾーン起因の バグを防ぐ簡単な一手です⚠️ #codegrid #javascript

【Tips】 -webkit-text-stroke で文字が潰れる問題は paint-order で解決できます -webkit-text-stroke: 4px black; paint-order: stroke fill; これで「線→塗り」の順で描画され、塗りが縁取りの内側への食い込みを覆い隠してくれます。2024年からChromiumも対応し、主要ブラウザで使えるようになりました。 #codegrid #css

【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸Google Fontsで学ぶWebフォントの基本 最終回 next/font/googleの詳細設定 🔸思想からみるメタフレームワークの選び方 第2回 Astroの思想を読む 🔸Convex入門 第2回 Convexの開発環境の構築とデータの取得 codegrid.net/issues/672/ #codegrid

【無料公開】 「AIがコードを書くなら、プログラミングを覚える必要はない」という声があります。でも、本当にそうでしょうか？ AIはプロフェッショナルの「責任」と「信頼」を引き受けられない——そんな視点から、AI時代に求められるスキルと考え方を論じます。学び続けることの意味を改めて考えさせられる記事です✨ codegrid.net/articles/2025-… #codegrid 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます

昨日公開されたCodeGridの記事「Astroの思想を読む | 思想からみるメタフレームワークの選び方」では、「バージョンが刻んだ思想」としてAstroの各バージョンを読み解き、v6についても触れていますよ！ codegrid.net/articles/2026-…

3月10日にリリースされたAstro 6.0の、マイナーアップデート6.1がリリースされています。 画像最適化の制御性の向上、マークダウン設定オプションの拡充、および国際化（i18n）に対応するためのフックの更新 、などが含まれているようです。

【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 🔸Google Fontsで学ぶWebフォントの基本 最終回 next/font/googleの詳細設定 🔸思想からみるメタフレームワークの選び方 第2回 Astroの思想を読む 🔸Convex入門 第2回 Convexの開発環境の構築とデータの取得 codegrid.net/issues/672/ #codegrid

【本日公開】開発環境のサーバーも立ち上げ不要。Convexのクラウド開発スタイルのシンプルさを、実際のコードを通じて紹介します：Convex入門 - Convexの開発環境の構築とデータの取得 codegrid.net/articles/2026-… #codegrid

【本日公開】コンテンツサイトになぜJavaScriptランタイムを大量に届けるのか。Astroの問題意識を辿ると、アイランドアーキテクチャとサーバーファーストの原則が一貫した設計思想として理解できます：思想からみるメタフレームワークの選び方 - Astroの思想を読む codegrid.net/articles/2026-… #codegrid

【Tips】 ES2025からJSONファイルを直接読み込めるようになりましたが、その最大のメリットは「JavaScriptを実行する前に読み込める」こと💁‍♀️ Fetch APIだとJS実行時に初めてリクエストが走るため、ファイルの存在は実行してみないとわかりません。import文なら依存解決の段階でエラーが出るので、「JSONが確実にある」前提でアプリを設計できます👍 #codegrid #javascript

【Tips】 SVGアイコンをstrokeで表現するとき、fillの明示に要注意です⚠️ fillの初期値はblack（#000） なので、fillを指定しないと図形の内側が黒で塗りつぶされてしまいます。 strokeだけで表現したいアイコンには必ずfill="none"を指定しましょう😀 #codegrid #svg

【細心公開一覧】CodeGrid先週公開の3本はこちら！ 🔸現場で読み解く、ソフトウェアの原理原則 第1回 まとめてよいコードと、まとめてはいけないコード 🔸SVGフィルタで拡張するCSSの表現 第1回 SVGフィルタの基本と表現例 🔸AIエージェントのススメ 第7回 技術知識の重要性 codegrid.net/issues/671/ #codegrid

【無料公開】 フレームワークがWebフォントを自動最適化してくれているけど、実際に何をしているのかわかりますか？🤔 `preconnect`や`crossorigin`がなぜ必要なのか、日本語フォントでwoff2がたくさん読み込まれる理由など、「なんとなく使っている」から「仕組みから説明できる」状態へ。Google Fontsを例に、ブラウザの処理フローを丁寧に解説します codegrid.net/articles/2026-… #codegrid #css #webfont 📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます