CodeGrid (@CodeGrid) header
CodeGrid (@CodeGrid) profile picture

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

Joined September 2011
Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)Photo by CodeGrid (@CodeGrid)
11/6まで無料公開中です。まだの方はぜひ ‼️ nitter.gq/CodeGrid/status/211715…
【期間限定・11/6まで無料公開】 npmを狙った攻撃が相次ぐ今だからこそ、確認しておきたい。 「依存をどう管理するか」「配布経路をどう守るか」「被害をどう小さくするか」、1年前の記事ですが、この考え方は変わりません。 Node.jsにおけるセキュリティの現状と対策 codegrid.net/articles/2025-n… 📖 CodeGridは有料メディアですが、この記事は11/6まで登録不要で無料で読めます #codegrid
1
382
【 本日公開・明日朝まで無料 】 先週、700号を迎えたCodeGrid🎉 の、この14年半を、Webの技術の変遷とともに振り返った後編です。 「あの時」、あなたはどんなことを考え、どんなことに取り組んでいたでしょうか。 codegrid.net/articles/2026-7…
213
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます 🔸CodeGrid 700号記念座談会 後編 標準機能の充実からAIの時代へ 🔸Intl.Segmenterで文字と単語を正しく分割する 後編 文字数カウントから検索まで 🔸Playwright MCPによるE2Eテストコードの生成 最終回 codegenの記録を保守性の高いテストコードに codegrid.net/issues/701/?utm… #codegrid
1
288
【本日公開・明日朝まで無料】見た目の1文字を1文字としてカウントしたい。そんな悩みをIntl.Segmenterで解決します。文字数カウント、単語単位の折り返しや絞り込み、文単位の処理をコード付きで紹介します:Intl.Segmenterで文字と単語を正しく分割する - 文字数カウントから検索まで、日本語の実用例 codegrid.net/articles/2026-i… #codegrid
1
196
【本日公開・明日朝まで無料】IE11のサポートが終わり、ブラウザ標準機能が充実してきます。基本的なUIはブラウザが、作業はAIが受け持つ時代へ。かつて現場を支えた技術の知識や考え方は、今どう活きているのでしょうか。座談会の後編です:CodeGrid 700号記念座談会 - 2020〜2026年 標準機能の充実からAIの時代へ codegrid.net/articles/2026-7… #codegrid
176
【本日公開・明日朝まで無料】codegenで記録したテストコードを、Claude Codeのスキルで保守しやすく仕上げます。ロケーターを壊れにくく補正し、テスト内容をtest.step()で準備・本題・後片付けに分けます:Playwright MCPによるE2Eテストコードの生成 - codegenの記録を、保守性の高いE2Eテストコードに仕上げる codegrid.net/articles/2026-p… #codegrid
1
183
【期間限定・11/6まで無料公開】 npmを狙った攻撃が相次ぐ今だからこそ、確認しておきたい。 「依存をどう管理するか」「配布経路をどう守るか」「被害をどう小さくするか」、1年前の記事ですが、この考え方は変わりません。 Node.jsにおけるセキュリティの現状と対策 codegrid.net/articles/2025-n… 📖 CodeGridは有料メディアですが、この記事は11/6まで登録不要で無料で読めます #codegrid
3
1
19
1,463
【Tips】 ただし、dialogコンテンツ部分をクリックしたときに閉じてしまっては困ります。  ::backdropは擬似要素部分のみをクリック対象にしたい場合は、コンテンツを<div>でラップしたうえで、dialog直接のクリックのみを拾えば、::backdropをクリックしたという検知ができます。 #codegrid #javascript
179
【Tips】 dialog要素の::backdrop部分のクリックで閉じたい! dialogの::backdropは擬似要素です。 擬似要素には直接イベントリスナーを設定できませんが、dialog要素自体をクリック対象にすればその擬似要素へのクリックも検知できます。 #codegrid #javascript
2
5
448
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸CodeGrid 700号記念座談会 前編 2012〜2020年 ライブラリやツールが担った役割は今どこに 🔸「ホーム画面に追加」でできること 第2回 プッシュ通知とアイコンバッジを使う 🔸AIエージェントのススメ 最終回 AIエージェントを使った開発のまとめ その2 codegrid.net/issues/700/?utm… #codegrid
225
【Tips】 セレクトボックスの選択肢は文字だけ…はもう過去の話👀 カスタマイズできるselectなら、optionの中にアイコンや英語名、在庫表示まで入れられます。チェックマークも::checkmarkで好きな絵文字に✨ option::checkmark {   grid-area: check;   content: ":white_check_mark:" } option:checked {   background-color: #CDEAEF; } #codegrid #css #html
1
3
372
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます 🔸CodeGrid 700号記念座談会 前編 2012〜2020年 ライブラリやツールが担った役割は今どこに 🔸「ホーム画面に追加」でできること 第2回 プッシュ通知とアイコンバッジを使う 🔸AIエージェントのススメ 最終回 AIエージェントを使った開発のまとめ その2 codegrid.net/issues/700/?utm… #codegrid
1
1
306
【 本日公開・明日朝まで無料 】 CodeGridは本日700号目を配信しました🎉 この14年半を、Webの技術の変遷とともに振り返ります。 これまでの技術は今にどうつながっているのでしょうか。 ご自信の「あの時」と重ね合わせて振り返ってみてください。 codegrid.net/articles/2026-7… #codegrid
4
4
358
【本日公開・明日朝まで無料】プッシュ通知のためだけにネイティブアプリを作る必要はありません。インストールしたWebアプリで、通知の購読・サーバーからの送信・Service Workerでの表示を実装し、アイコンバッジまで使う方法を解説します:「ホーム画面に追加」でできること - プッシュ通知とアイコンバッジを使う codegrid.net/articles/2026-p… #codegrid
183
【本日公開・明日朝まで無料】jQueryやSass、webpackが担っていた役割は、今どこへ行ったのでしょうか。700号記念のエンジニアによる座談会・前編では、2012〜2020年を振り返り、その役割が標準機能や後のツールに引き継がれていった経緯をたどります:CodeGrid 700号記念座談会 - 2012〜2020年 ライブラリやツールが担った役割は今どこに codegrid.net/articles/2026-7… #codegrid
1
303
【本日公開・明日朝まで無料】開発者にとって、今は「ボーナスタイム」。でも、それは長くは続かない。開発するだけでは稼げない時代に、何で価値を出すのか、そして「作りたい」という意欲がなぜ何より大切なのかを考える、シリーズ最終回です:AIエージェントのススメ - AIエージェントを使った開発のまとめ その2 codegrid.net/articles/2025-a… #codegrid
181
【Tips】 npmのパッケージを、インストールもビルドもせずに試せます🎉 ESMで配信しているCDN(esm.shやjsDelivrなど)のURLを、そのまま`import`に書くだけです💡 CDNは混ぜずに1つに揃えると、依存パッケージの二重読み込みを防げます✨ #codegrid #javascript
1
279
【Tips】 `<script>`のいちばん外側で`const`を宣言すると、別の`<script>`とも名前がぶつかります⚠️ `type="module"`を付けると、宣言はそのscript要素の中だけのものになり、同じ名前を宣言してもエラーになりません✨ 即時実行関数(IIFE)で囲む必要もなくなります💡 #codegrid #javascript
3
347
【Tips Quiz】 正解は「B. 本文を最新の状態に書き換え、経緯はコメントに残す」でした。 本文は「現在の状態」、コメントは「経緯」と役割を分けます:memo: コメントを全部読まなくても、本文を見れば最新の状況がわかるようにしておくと、引き継ぎがぐっとラクになります😀 #codegrid #github
160
【Tips Quiz】 意外と知らないGitHub Issueの書き方をチェック! Issueで議論中に、最初の方針と変わったら、本文とコメントはどう扱うのがよい?🤔 A. 本文は起票時のまま残し、変更はコメントに追記する B. 本文を最新の状態に書き換え、経緯はコメントに残す C. 方針が変わったら新しいIssueを立て直す
1
1
331