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まで無料公開】 npmを狙った攻撃が相次ぐ今だからこそ、確認しておきたい。 「依存をどう管理するか」「配布経路をどう守るか」「被害をどう小さくするか」、1年前の記事ですが、この考え方は変わりません。 Node.jsにおけるセキュリティの現状と対策 codegrid.net/articles/2025-n… 📖 CodeGridは有料メディアですが、この記事は11/6まで登録不要で無料で読めます #codegrid
3
19
1,038
【Tips】 ただし、dialogコンテンツ部分をクリックしたときに閉じてしまっては困ります。  ::backdropは擬似要素部分のみをクリック対象にしたい場合は、コンテンツを<div>でラップしたうえで、dialog直接のクリックのみを拾えば、::backdropをクリックしたという検知ができます。 #codegrid #javascript
171
【Tips】 dialog要素の::backdrop部分のクリックで閉じたい! dialogの::backdropは擬似要素です。 擬似要素には直接イベントリスナーを設定できませんが、dialog要素自体をクリック対象にすればその擬似要素へのクリックも検知できます。 #codegrid #javascript
2
5
438
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸CodeGrid 700号記念座談会 前編 2012〜2020年 ライブラリやツールが担った役割は今どこに 🔸「ホーム画面に追加」でできること 第2回 プッシュ通知とアイコンバッジを使う 🔸AIエージェントのススメ 最終回 AIエージェントを使った開発のまとめ その2 codegrid.net/issues/700/?utm… #codegrid
219
【Tips】 セレクトボックスの選択肢は文字だけ…はもう過去の話👀 カスタマイズできるselectなら、optionの中にアイコンや英語名、在庫表示まで入れられます。チェックマークも::checkmarkで好きな絵文字に✨ option::checkmark {   grid-area: check;   content: ":white_check_mark:" } option:checked {   background-color: #CDEAEF; } #codegrid #css #html
1
3
366
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉 明日朝4時まで無料で読めます 🔸CodeGrid 700号記念座談会 前編 2012〜2020年 ライブラリやツールが担った役割は今どこに 🔸「ホーム画面に追加」でできること 第2回 プッシュ通知とアイコンバッジを使う 🔸AIエージェントのススメ 最終回 AIエージェントを使った開発のまとめ その2 codegrid.net/issues/700/?utm… #codegrid
1
1
302
【 本日公開・明日朝まで無料 】 CodeGridは本日700号目を配信しました🎉 この14年半を、Webの技術の変遷とともに振り返ります。 これまでの技術は今にどうつながっているのでしょうか。 ご自信の「あの時」と重ね合わせて振り返ってみてください。 codegrid.net/articles/2026-7… #codegrid
4
4
353
【本日公開・明日朝まで無料】プッシュ通知のためだけにネイティブアプリを作る必要はありません。インストールしたWebアプリで、通知の購読・サーバーからの送信・Service Workerでの表示を実装し、アイコンバッジまで使う方法を解説します:「ホーム画面に追加」でできること - プッシュ通知とアイコンバッジを使う codegrid.net/articles/2026-p… #codegrid
180
【本日公開・明日朝まで無料】jQueryやSass、webpackが担っていた役割は、今どこへ行ったのでしょうか。700号記念のエンジニアによる座談会・前編では、2012〜2020年を振り返り、その役割が標準機能や後のツールに引き継がれていった経緯をたどります:CodeGrid 700号記念座談会 - 2012〜2020年 ライブラリやツールが担った役割は今どこに codegrid.net/articles/2026-7… #codegrid
1
295
【本日公開・明日朝まで無料】開発者にとって、今は「ボーナスタイム」。でも、それは長くは続かない。開発するだけでは稼げない時代に、何で価値を出すのか、そして「作りたい」という意欲がなぜ何より大切なのかを考える、シリーズ最終回です:AIエージェントのススメ - AIエージェントを使った開発のまとめ その2 codegrid.net/articles/2025-a… #codegrid
179
【Tips】 npmのパッケージを、インストールもビルドもせずに試せます🎉 ESMで配信しているCDN(esm.shやjsDelivrなど)のURLを、そのまま`import`に書くだけです💡 CDNは混ぜずに1つに揃えると、依存パッケージの二重読み込みを防げます✨ #codegrid #javascript
1
275
【Tips】 `<script>`のいちばん外側で`const`を宣言すると、別の`<script>`とも名前がぶつかります⚠️ `type="module"`を付けると、宣言はそのscript要素の中だけのものになり、同じ名前を宣言してもエラーになりません✨ 即時実行関数(IIFE)で囲む必要もなくなります💡 #codegrid #javascript
3
345
【Tips Quiz】 正解は「B. 本文を最新の状態に書き換え、経緯はコメントに残す」でした。 本文は「現在の状態」、コメントは「経緯」と役割を分けます:memo: コメントを全部読まなくても、本文を見れば最新の状況がわかるようにしておくと、引き継ぎがぐっとラクになります😀 #codegrid #github
159
【Tips Quiz】 意外と知らないGitHub Issueの書き方をチェック! Issueで議論中に、最初の方針と変わったら、本文とコメントはどう扱うのがよい?🤔 A. 本文は起票時のまま残し、変更はコメントに追記する B. 本文を最新の状態に書き換え、経緯はコメントに残す C. 方針が変わったら新しいIssueを立て直す
1
1
329
【リニューアルのお知らせ】 CodeGridのサイトをリニューアルしました🎉 本文を読みやすく整え、ライト/ダークモードの切り替えに対応。 バックナンバーは月ごとに並ぶようになり、カテゴリーや過去の記事もアーカイブとして整理したので、読みたい記事にたどり着きやすくなっています。 今後もより読みやすくなるように機能を追加していく予定です。 お楽しみに‼️ codegrid.net/
6
350
【リニューアル作業終了のお知らせ 】 お知らせしておりましたCodeGridのリニューアル作業は完了しました。 サイトはアクセスできる状態ですので、どうぞご利用ください。 codegrid.net/ #codegrid
267
【リニューアル作業によるサイト停止のお知らせ】 本日10:30〜11:30までの予定で、予定しておりましたCodeGridリニューアルを行います。 そのため、この時間帯はサイトへのアクセスができません。 ご不便をおかけしますがご了承ください。 進行状況は随時、XとBlueskyでお知らせいたします。 #codegrid
346
【最新公開一覧】CodeGrid先週公開の3本はこちら🎉 🔸複数エージェントの使いこなし 前編 複数エージェントを使い分ける開発の現場 🔸Playwright MCPによるE2Eテストコードの生成 第2回 codegenでSPAのE2Eテストコードを記録する 🔸利用制限とつきあうAIコーディング モデルとエフォートの考え方 codegrid.net/issues/699/?utm… #codegrid
1
1
274
【本日公開・明日朝まで無料】 AIエージェントの利用制限で手が止まること、ありませんか? モデルもエフォートも「とりあえず最高設定」が正解とは限りません。 体験談を元に、使い分けるコツを紹介します。 codegrid.net/articles/2026-m… #codegrid
1
211
【本日公開・明日朝まで無料】 AIにE2Eテストを書かせたくても、複雑な管理画面では操作手順を書き出すのがひと苦労! Playwrightのcodegenなら、ブラウザで操作するだけでテストコードとして記録できます。 codegrid.net/articles/2026-p… #codegrid
200