#codegrid_ws
LightNews LightNews
codegrid.net
【ワークショップ】
CodeGrid執筆陣による、ワークショップ開催決定！

メイン講師は小山田 @yomotsu.bsky.social
100ページ超えの充実テキストと、手厚いサポートで初学者も安心です。

「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 5月23日（金）13時〜（オフラインで開催）
www.codegrid.net/workshops/20...

#codegrid #codegrid_ws
CodeGrid ワークショップ2025春 | CodeGrid
Astro×GitHub×Cloudflareで学ぶモダンなWeb開発
www.codegrid.net
April 10, 2025 at 8:56 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-ws.bsky.social
CodeGridワークショップ 第3回を開催します。
現場での実装や設計のリアルを、ワークショップで実践的に共有します。

今日は教科書の一部を少しだけお見せします！

🔗 www.codegrid.net/workshops/20...
🗓️開催日時：11/21(金)

#codegrid #codegrid_ws
November 6, 2025 at 3:22 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
【ワークショップ準備進行中！】
5/23開催のCodeGridワークショップには、100ページ超えのオリジナルテキストが紙とPDFで用意されます。
ただいま、表紙のデザイン検討中〜。どちらにしよう!?
表紙も内容も、まだまだこのあと詰めていきますよ！
www.codegrid.net/workshops/20...
 #codegrid #codegrid_ws
「Astro×GitHub×Cloudflareで学ぶ モダンなWeb開発」というタイトルの技術書の表紙の2つの案。1つ目は、背景は白とグリーンの2トーンで、中央にキーボードを打つ手のイラストが描かれている。上部には著者名、下部には出版社「CodeGrid」のロゴがある。裏表紙には目次と簡単な紹介文が掲載されている。 2つ目は、検索バー風のデザインに黄色の「モダンな」タグがついている。背景は薄いグレー。キーボードを打つ手のイラストが中央に描かれており、著者名と出版社「CodeGrid」のロゴが配置されている。裏表紙には目次と紹介文があり、黒い端末アイコンが添えられている。
April 11, 2025 at 9:25 AM
codegrid.net
【イベント】
CodeGrid執筆陣から直接学べる、モダンなWeb開発を体験するワークショップ開催です💥
参加者募集中！

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

🗓️ 5月23日（金）13時〜（オフラインで開催）
🪑 東京表参道
www.codegrid.net/workshops/20...
#codegrid #codegrid_ws
CodeGrid ワークショップ2025春 | CodeGrid
Astro×GitHub×Cloudflareで学ぶモダンなWeb開発
www.codegrid.net
April 7, 2025 at 11:58 PM
codegrid.net
【ワークショップ準備進行中！ 】
5/23のCodeGridワークショップのオリジナルテキストは100ページ超え！
校正用の見本が届いたので、チェックを進めますよー🧐

#codegrid #codegrid_ws

ワークショップ参加は、まだまだ受付中😀
www.codegrid.net/workshops/20...
April 24, 2025 at 3:00 AM
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
【ワークショップ情報】
前回の参加者の全員（アンケート回答者）が、「他の人におすすめしたい！」と言ったワークショップが再び開催されます。
申し込みは今日まで！

「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ワークショップが、再び開催されます！

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

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

120ページ超えのオリジナル製本版テキストと、ピクセルグリッドの現役エンジニアによるワークショップ。
参加申し込みは7月22日までです！

www.codegrid.net/workshops/20...
#codegrid #codegrid_ws
Astro × GitHub × Cloudflareで学ぶモダンWeb開発：2025夏 | CodeGrid ワークショップ | CodeGrid
初学者にフォーカスした定員10名の少人数で、しっかり学べる4時間のワークショップです。
www.codegrid.net
June 27, 2025 at 6:57 AM
codegrid-ws.bsky.social
【ワークショップ情報】
春と夏に引き続き、好評いただいているCodeGridワークショップが、再び開催されます！

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

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

120ページ超えのオリジナル製本版テキストと、ピクセルグリッドの現役エンジニアによるワークショップ。これから学びたいと思っている方、ぜひご検討ください。
参加申し込みは11月13日までです！

codegrid.net/workshops/20...
#codegrid #codegrid_ws
Astro × GitHub × Cloudflareで学ぶモダンWeb開発：2025秋 | CodeGrid | CodeGrid
初学者にフォーカスした定員10名の少人数で、しっかり学べる4時間のワークショップです。
codegrid.net
September 19, 2025 at 7:03 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開催のワークショップ「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-ws.bsky.social
CodeGridワークショップの前回の参加者の声をお届け！
参加申し込みは11月13日まで

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

codegrid.net/workshops/20...
#codegrid #codegrid_ws
Astro × GitHub × Cloudflareで学ぶモダンWeb開発：2025夏 | CodeGrid ワークショップ | CodeGrid
初学者にフォーカスした定員10名の少人数で、しっかり学べる4時間のワークショップです。
codegrid.net
November 5, 2025 at 3:49 AM
codegrid.net
【ワークショップ情報】
5/23のCodeGridワークショップ「Astro×GitHub×Cloudflareで学ぶモダンなWeb開発」の「Astro」って何🤔 と思った方は、こちらの無料記事をどうぞ👍
www.codegrid.net/articles/202...

まだまだ、ワークショップ参加は受付中ですよ〜🗓️
www.codegrid.net/workshops/20...

#codegrid #codegrid_ws
Astro技術解説座談会 | 前編 Astroの特徴を知る
AstroというWebフレームワークをざっくり知りたい、また、Astroの特徴や機能について、技術選定に役立つ知識を持っておきたい人のために、エンジニアが座談会形式で解説します。
www.codegrid.net
April 30, 2025 at 8:24 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ワークショップ 2025 春の参加申込を開始しました🚀
テーマは「Astro × GitHub × Cloudflareで学ぶモダンWeb開発」
10名の少人数で手を動かしながら、じっくり学べます。
先着順ですので、お早めに！
www.codegrid.net/workshops/20...
ご参加、お待ちしております☺️
#codegrid_ws
April 4, 2025 at 8:30 AM
codegrid.net
【ワークショップ情報】
「CodeGridのワークショップ 2025 秋」が、11月21日に開催されます！

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

www.codegrid.net/workshops/20...
#codegrid #codegrid_ws
Astro × GitHub × Cloudflareで学ぶモダンWeb開発：2025秋 | CodeGrid | CodeGrid
初学者にフォーカスした定員10名の少人数で、しっかり学べる4時間のワークショップです。
www.codegrid.net
September 19, 2025 at 7:02 AM