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

https://www.codegrid.net/
Posts Replies Media Videos
codegrid.net
【9月の記事ランキング】
秋の気配がやっと見えてきた10月。CodeGridで9月に人気を集めた記事をご紹介します。

#1 現場で役立つ、SVGアイコン調整術
www.codegrid.net/series/2025-...

#2 AIエージェントのススメ
www.codegrid.net/series/2025-...

（続）
October 1, 2025 at 12:02 AM
codegrid.net
【ワークショップ情報】
前回の参加者の全員（アンケート回答者）が、「他の人におすすめしたい！」と言ったワークショップが再び開催されます。
申し込みは今日まで！

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜

codegrid.net/workshops/20...
#codegrid_ws
「今回のワークショップは他の人におすすめしたいですか？」という円グラフ」8件の回答とある。 青い円グラフで、100％「はい」となっている。
July 22, 2025 at 3:00 AM
codegrid.net
【ワークショップ情報】
CodeGridワークショップのテキストはこのボリューム。
参加申し込みは7月22日までです！

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道

codegrid.net/workshops/20...
#codegrid #codegrid_ws
ワークショップで使うテキストの写真。暑さが8mmほどある、きちんとした製本版の書籍。
July 21, 2025 at 8:16 AM
codegrid.net
【ワークショップ情報】
CodeGridワークショップは、少人数で質問しやすい雰囲気です。
参加申し込みは7月22日まで！

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道

codegrid.net/workshops/20...
#codegrid #codegrid_ws
CodeGridワークショップの様子。会議室のような場所で、1つの机に向かい合って講師1名と参加者が7名並んで座っている。壁にはモニタがあり、コードやWebサイトが表示あれている。
July 20, 2025 at 11:00 AM
codegrid.net
【ワークショップ情報】
CodeGridワークショップの前回の参加者の声をお届け！
参加申し込みは7月22日までですよ〜。

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道

codegrid.net/workshops/20...
#codegrid #codegrid_ws
前回参加者の声を紹介 テキストの内容がとても丁寧でわかりやすかったです。 メンターさんとのスピンアウトの会話が特に学びになりました。 良いテキストがあるので、復習などが自分で行いやすい。 初めて、フレームワークというものに触れましたが、アレルギーを起こすことなくAstroのメリットを強く感じることができました。
July 19, 2025 at 12:01 PM
codegrid.net
【ワークショップ情報】

ワークショップのテキストでは、豊富な図版とコードで、ワークショップでの理解をしっかりサポートしますよ〜。

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」

🗓️ 8月1日（金）13時〜（オフラインで開催）
📷 東京：表参道
参加申し込みは7月22日まで！
codegrid.net/workshops/20...
#codegrid #codegrid_ws
ワークショップのテキストのPDF。以下の内容が書かれている。 ページの title を変更しよう Layout コンポーネント 先ほど編集した src/pages/index.astro では、 <Layout> という HTML にはないタグが使 われていました。 --- import PageHeader from '../components/PageHeader.astro'; import Layout from '../layouts/Layout.astro'; --- <Layout> <PageHeader /> <h1>ようこそ私のホームページへ</h1> </Layout> この <Layout> もまた、PageHeaderと同様に、コンポーネントです。 ただし、「ページ自体の 構造」として、ページ内に一度しか登場しない特別なコンポーネントで「レイアウトコンポーネ ント」と呼ばれています。先ほど作ったPageHeaderのような汎用コンポーネントとは少しだけ 役割が異なります。 Layout コンポーネントは、 title や meta タグ、外部 CSS ファイルの読 み込みなど、Web サイト内の複数のページに共通する部分をまとめておくためのものです。 Layout コンポーネントの役割 Astroで環境を準備した際、最初から用意されている Layout コンポーネントの中身を見てみま しょう。冒頭で import (読み込み)している、 src/layouts/Layout.astro を開きます。 VS Code では、 import 文の箇所を右クリックし、 定義へ 移動 を選択すると、参照先ファイルを開けて便利です。 ファイルを開いてみると、 src/layouts/Layout.astro の中身は次のようになっています。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
July 18, 2025 at 9:09 AM
codegrid.net
【ワークショップ情報】
CodeGridワークショップでは、130ページ超えのオリジナル製本版テキストで進行します。
その内容を、少しチラ見せ！

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」

🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道

参加申し込みは7月22日まで！

codegrid.net/workshops/20...
#codegrid #codegrid_ws
ワークショップのテキストの一部のPDF。内容は以下が書かれている。 はじめに CodeGrid ワークショップ 2025 にようこそ！ 体験できる技術 このワークショップでは、Astro を使った Web サイト制作、コードの管理、公開（デプロイ）までの流れを体験していきます。 - Astro で Web サイトを開発する - トップページを作成する - ヘッダーのコンポーネント（パーツ）を個別に作成する - レイアウト機能で title タグや meta タグを管理する - 2 ページ目を作成する - GitHub でコードを管理する - Cloudflare Pages で自動デプロイする このテキストで使用しているツール ワークショップではツールの以下のバージョンを使用しています。 - Astro v5.x - GitHub Desktop Version 3.4.18（macOS 版） - Node.js v22.14.0 - なお、ツールや画面などは仕様やデザインが変更される可能性があります。 Astro: Webサイト制作のためのフレームワーク 一般的に Web サイトは複数ページで構成され、それらのページはインターネットで公開されます。 Astro は、次のような機能があります。 - 使い回す共通パーツを 1 カ所で管理 - 複数ページをテンプレート化して一括管理 - ブログなどの複数ページコンテンツの一括管理 Web サイトの開発を効率化できる機能が備わった、Web サイト制作のためのフレームワークです。 実際にさまざまな Web サイトでも使われています 。 （2025 年 4 月時点） - IKEA - Netlify - SmartHR 採用サイト - 集英社採用サイト - CodeGrid 1. https://astro.build/ 2. https://astro.build/showcase/ 3. https://www.ikea.com 4. https://www.netlify.com 5. https://recruit.smarthr.co.jp 6. https://www.shueisha.co.jp/saiyo 7. https://www.codegrid.net
July 18, 2025 at 9:08 AM
codegrid.net
【ワークショップ情報】
CodeGridワークショップで使用する、オリジナルテキストの目次をチラ見せ…👀
これでも、目次の半分なのですよ！

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京、表参道駅周辺
codegrid.net/workshops/20...
見開きの目次の項目が並んでいる。目次の内容は以下。 はじめに…6 体験できる技術…6 Astro を始めよう…10 ターミナルで好きなディレクトリに移動…10 ターミナルで Astro プロジェクトの置き場所に移動…10 Astro プロジェクトの作成…13 Astro プロジェクトを VS Code で開く…15 Astro サイトの動作確認…18 GitHub でコードを管理しよう…22 コードの変更履歴の重要性…22 Astro プロジェクトを GitHub Desktop で開く…22 GitHub Desktop でコミット…26 GitHub にリポジトリを作る…27 作成されたリポジトリの確認…28 Astro のコードに触れよう…30 Astro の仕組み…30 Astro プロジェクトのディレクトリ構造…31 トップページを編集してみる…33 ページの部品を作ろう…35 コンポーネントのファイルを作る…35 ヘッダーコンポーネントを実装する…36 補足：VS Code の再読み込み…37 ページにヘッダーを配置する…38 SVG ロゴ画像を表示する…41 ここまでの作業をコミットしよう…44 GitHub Desktop でコミット…44 GitHub リポジトリにプッシュ…45 ページの title を変更しよう…48 Layout コンポーネント…48 Layout コンポーネントの役割…49 子要素を表示する slot…50 日本語サイトの場合の修正…52 独自の属性を設定する props…52 Layout にヘッダーを統合する…56 コミット…57 Cloudflare Pages にデプロイしよう…58 ダッシュボードにログインする…58 ダッシュボードからデプロイを設定する…58 別のページも作ってみよう…63 about ページの作成…63 Layout 側でのスタイル調整…65 PNG 画像と Astro の自動最適化…67 お好みで横並びに…71 トップページにリンクを追加…73 デプロイしたサイトを更新しよう…75 ブログのコンテンツ管理について考えよう…76 各記事ページをどう増やしていくか…76 コンテンツだけ分けて管理する…76
July 11, 2025 at 12:00 AM
codegrid.net
【ワークショップ情報】
CodeGridワークショップでは、前回も大好評だった120ページ超えのオリジナル製本版テキストを使ってじっくり学びます。参加申し込みは7月22日までですので、お早めに！

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京、表参道駅周辺
www.codegrid.net/workshops/20...
ワークショップテキストの写真。背表紙がつくほどの、厚みがあるA5版のテキスト。『Astro×GitHub×Cloudflareで学ぶモダンなWeb開発』というタイトルと、キーボードに手が添えられているイラストが表示にある。
July 10, 2025 at 8:03 AM
codegrid.net
【6月の記事ランキング】
梅雨はどこへ!? の7月が始まりました！ CodeGridで6月に人気があった記事はこちら。

#1 安定して使えるようになった最新メディアクエリー
www.codegrid.net/series/2025-...

#2 FormDataによるフォーム送信
www.codegrid.net/series/2025-...

（続）
6月の記事ランキング Top 5 #1 安定して使えるようになった最新メディアクエリー #2 FormDataによるフォーム送信 #3 OkLCh色空間による新しい色指定 #4 キャリアを支えた本たちを語る #5 Filloutを使ったフォーム作成
July 1, 2025 at 1:30 AM
codegrid.net
【5月の記事ランキング】
関東地方も梅雨入り間近☔ !? CodeGridで5月に人気があったシリーズはこちら！

#1 はじめてのWebアプリケーションデザイン
www.codegrid.net/series/2025-...)

#2 イマドキの画像配信方法
www.codegrid.net/series/2025-...

（続）
5月の記事ランキング Top5 1. はじめてのWebアプリケーションデザイン 2. イマドキの画像配信方法 3. JSXで実装するUIライブラリに依存しないコンポーネント 4. 執筆スタイルガイドを考える 5. JavaScriptの正規表現構文
June 2, 2025 at 1:00 AM
codegrid.net
【イベント】
CodeGridパーティーの会場は、道から入って少し奥になります。
この看板を持った2人がご案内で出ています〜。
#codegrid13th
看板を持った2人
May 23, 2025 at 9:41 AM
codegrid.net
【イベント】
CodeGridパーティーは18:40開場です！
お待ちしております〜
#codegrid13th
会場の入り口
May 23, 2025 at 9:33 AM
codegrid.net
【イベント締め切り迫る】
CodeGrid 13周年パーティーの参加締切は、5/16の21時までとなります‼️
え!? まだ申し込んでいない！ という人は急げ〜🏃

会場は地下鉄表参道B3出口より徒歩4分 「ふくい南青山291」です。お待ちしています〜

🗓️ 5月23日（金）19時〜

www.codegrid.net/events/13/
パーティー会場のふくい南青山291の入口。ガラスの窓とドアで、メニュー表などが出ている。
May 13, 2025 at 9:00 AM
codegrid.net
【イベント】
5/23のCodeGrid13thパーティーでは、CodeGrid執筆者も楽しみにみなさまをお待ちしております〜。執筆者の声を一部お届け！
あ、今年はLT大会も復活ですよ〜。

ご参加、お待ちしております😊

codegrid.net/events/13/
#codegrid13th　#codegrid
4人のスタッフの声がアイコンと共に並んでいる。 中野 祐人 Jamstackエンジニア 最近はAIの進歩にビビっています。一緒に慰め合い活路を見出しましょう 近藤 彩 デザイナー いろんなデザインのお話できたら嬉しいです！今年もかわいいTシャツを用意していますよ〜 小山田 晃浩 フロントエンド・エンジニア デザイントークン、UIコンポーネント、Tailwind CSS（賛否）などの話題でお話したいです 森 大典 フロントエンド・エンジニア 要件定義や運用にまつわるドキュメントづくりの工夫といった、開発現場の生の声を聞けたら嬉しいです
May 8, 2025 at 8:13 AM
codegrid.net
【イベント】
GWも終わっちゃったよ…とお嘆きの方、次のお楽しみに5/23のCodeGridパーティーはいかがでしょう。Webについても、それ以外も、楽しくお話しませんか？
会場の「ふくい南青山291」で、おいしいお食事とお飲み物で、お待ちしています〜。

www.codegrid.net/events/13/
会場となるふくい南青山291の様子。ガラス張りの明るい店内で、窓に沿ってテーブルがある。中央に背の高いハイテーブルが用意されている。天井が高く、開放的な雰囲気。
May 7, 2025 at 4:30 AM
codegrid.net
【ワークショップ準備進行中！ 】
5/23のCodeGridワークショップのオリジナルテキストは100ページ超え！
校正用の見本が届いたので、チェックを進めますよー🧐

#codegrid #codegrid_ws

ワークショップ参加は、まだまだ受付中😀
www.codegrid.net/workshops/20...
April 24, 2025 at 3:00 AM
codegrid.net
【ワークショップ講師ご紹介】
5/23開催のワークショップ「Astro×GitHub×Cloudflareで学ぶモダンなWeb開発」の講師の小山田（ @yomotsu.bsky.social ）と中野（ @yuto343.net ）が、先日は進行の練習中……。声をかけると、きりっとポーズしてくれました😆

www.codegrid.net/workshops/20...
#codegrid #codegrid_ws
モニタの前に、右に講師の小山田、左に中野がいる。
April 24, 2025 at 1:01 AM
codegrid.net
【スタッフコメント】
CodeGrid執筆者、宇野（ @cancer6.bsky.social ）からの、CodeGrid13周年記念パーティーへのコメントです。

宇野の人気無料記事「いまどきの配列操作」はこちら！
www.codegrid.net/articles/202...

5/23にお待ちしております〜。
codegrid.net/events/13/

#codegrid #codegrid13th
宇野 陽太 フロントエンド・エンジニア 設計の話とかをするのが好きです。それ以外のことでも楽しくお話できたら嬉しいです
April 22, 2025 at 12:30 AM
codegrid.net
【イベントスタッフコメント】
CodeGrid執筆者、高津戸からの、CodeGrid13周年記念パーティーへのコメントです！

高津戸の人気無料公開記事はこちら！
www.codegrid.net/articles/202...
5/23のパーティーでお待ちしております〜。
www.codegrid.net/events/13/

#codegrid #codegrid13th
高津戸 壮 テクニカルディレクター 最近は主にリモートで、同業種の社外の人と会話することも少なくなったみたいに感じられている方、フラっと遊びに来て頂ければと思います🙏
April 21, 2025 at 8:55 PM
codegrid.net
【イベントスタッフコメント】
「CSS Gridサブグリッド入門」記事が人気の坂巻（ @geckotang.bsky.social ）からの、CodeGrid13周年記念パーティーへのコメントです！
5/23のパーティーへのご参加、お待ちしております〜

www.codegrid.net/articles/202...
www.codegrid.net/events/13/

#codegrid #codegrid13th
坂巻翔大郎 フロントエンド・エンジニア HTML、CSS、アクセシビリティ、ポケカ、スト6（当方モダンジュリ）とか色々と好きなことについて話しましょう…！
April 21, 2025 at 3:00 AM
codegrid.net
【CodeGridパーティースタッフコメント】
「知っておきたい、CSS Nesting仕様」記事が人気の矢倉（ @myakura.bsky.social ）からは、
「マークアップとかCSSとか話したい方、しましょう」

5月23日のCodeGridパーティーでお待ちしています！
www.codegrid.net/events/13/
www.codegrid.net/articles/202...
#codegrid #codegrid13th
CodeGrid13周年パーティー Webに関わるみんなと楽しむ年に一度のパーティー
April 17, 2025 at 11:01 AM
codegrid.net
【ワークショップ準備進行中！】
5/23のCodeGridワークショップ「stro×GitHub×Cloudflareで学ぶモダンなWeb開発」の、オリジナルテキスト（100ページ超え！）の作成も進行中！📕
目次をちら見せいたします👀 （でも、目次はこれで全部じゃないのですよ〜！）
buff.ly/3W9ukSL
#codegrid #codegrid_ws
目次の見開きページ。内容は次のようになっている。 はじめに 体験できる技術 Astro を始めよう ターミナルで好きなディレクトリに移動 ターミナルで Astro プロジェクトの置き場所に移動 Astro プロジェクトの作成 Astro プロジェクトを VS Code で開く Astro サイトの動作確認 GitHub でコードを管理しよう コードの変更履歴の重要性 Astro プロジェクトを GitHub Desktop で開く GitHub Desktop でコミット GitHub にリポジトリを作る 作成されたリポジトリの確認 Astro のコードに触れよう Astro の仕組み Astroプロジェクトの構造 トップページを編集してみる 全ページ共通のコードをまとめよう Astroコンポーネント Layout コンポーネントの役割 子要素を表示する slot 日本語サイトの場合の修正 独自の属性を設定する props Astro × GitHub × Cloudflare で学ぶモダン Web 開発 ページの部品を作ろう コンポーネントのファイルを作る ヘッダーコンポーネントを実装する 補足:VS Codeの再読み込み ページにヘッダーを配置する SVGロゴ画像を表示する ここまでの作業をコミットしよう GitHub Desktop でコミット GitHub リポジトリにプッシュ Cloudflare Pages にデプロイしよう ダッシュボードにログインする ダッシュボードからデプロイを設定する 別のページも作ってみよう about ページの作成 Layout 側でのスタイル調整 PNG 画像と Astro の自動最適化 お好みで横並びに トップページにリンクを追加 デプロイしたサイトを更新しよう ブログのコンテンツ管理について考えよう 各記事ページをどう増やしていくか コンテンツだけ分けて管理する blogコレクションを作ろう Markdownとフロントマター 発展:フロントマターのデータ形式を保証する
April 16, 2025 at 12:00 AM
codegrid.net
【イベント準備ちら見せ】
5/23のCodeGrid13周年パーティーの会場は、「ふくい南青山291」。福井県産のおいしいものが提供されています。
こちらは、「いちほまれ」のおにぎりセットと山菜めんたいパスタ。どちらもパーティーでいただける予定！
www.codegrid.net/events/13/
#codegrid #codegrid13th
白い皿に盛られためんたい山菜パスタ。ちぎったのりがちらされており、山菜とめんたいこが絡んでいる。 赤い楕円形のお弁当箱に、おにぎりとゆで卵、里芋の煮っころがし、唐揚げが入っている。味噌汁が沿えられている。
April 15, 2025 at 7:25 AM
codegrid.net
【イベント準備ちら見せ】
5/23のCodeGrid13周年記念パーティーでは、LTが復活！
今日はスタッフで会場の下見をしてきました。飲食スペースのとなりのこの場所で、LTの予定ですよ！

LT申込みもまだまだ受付中です。
www.codegrid.net/events/13/
 #codegrid #codegrid13th
モダンな木製インテリアのショップまたはギャラリースペースで、白いスウェットを着たピクセルグリッドのスタッフが、前方のノートパソコンの方向を指差しながら話している様子。人物は笑顔で、カウンターにはノートパソコンとマウス、バッグが置かれている。天井には丸い照明がぶら下がっており、壁には大きなディスプレイモニターが設置されている。
April 11, 2025 at 9:28 AM