Google ColabでWebフロントエンド・Astroを使ってみる ②HTML/CSS/JS基礎編

この記事でやること

Google Colabというと「Pythonを動かすノートブック」というイメージが強いと思います。ですが中身は一時的なLinux環境なので、Node.jsさえ入れてしまえば、フロントエンドのフレームワークであるAstroも普通に動かせます。

この記事では、ColabにAstroを立ち上げるところから始めて、そのままの流れでHTML・CSS・JavaScriptの最低限の書き方をおさらいし、最後にAstroの構文でそれらをまとめて使う、というところまで一気に見ていきます。

「HTML入門」「CSS入門」を個別にきっちりやるというよりは、Astroのページを書き換えながら手を動かして感覚をつかむための早見表、という位置づけです。後半はそのままチートシートとしても使える形にしてあります。

---

1. なぜColab + Astroなのか

普段Pythonの検証に使っているColabの環境の中で、そのままフロントエンドの動作確認までできると、環境構築の手間がかなり減ります。ローカルでNode.jsのバージョンを気にしたり、npm installで時間を溶かしたりせずに、ブラウザだけで「HTMLを書く→保存→即座にプレビュー」のループを回せるのが大きなメリットです。

対象読者

• HTML/CSS/JavaScriptを横断的にGoogle Colabで扱いたい人

なお、「Astroの環境構築がGoogle Colabでできることを知らない」という人は、下記記事を先におよみください。

すぐに使えるチートシートはこちら Google Colab版

すぐに実行して、試せるコードレシピはこちら。

学習用のヘルパー関数を用意する

毎回ファイルパスを指定してターミナルで保存し直すのは面倒なので、文字列で書いたAstroのコードをファイルに書き込んで、その場でプレビューまで表示してくれる関数を作っておきます。これ以降は、このastro_cell()にコードを渡すだけで結果を確認できます。

from pathlib import Path
from google.colab import output
import textwrap
import time

PROJECT_DIR = Path("/content/astro-colab")

def astro_cell(source: str, path: str = "src/pages/index.astro", port: int = 4321, wait: float = 1.0):
    target = PROJECT_DIR / path
    target.parent.mkdir(parents=True, exist_ok=True)
    target.write_text(textwrap.dedent(source).strip() + "\n", encoding="utf-8")

    # 書き込んだファイル名からAstroのルーティング先を自動で組み立てる
    # 例: lesson-01.astro -> /lesson-01, index.astro -> /
    route = "/" if target.stem == "index" else f"/{target.stem}"

    time.sleep(wait)
    output.serve_kernel_port_as_iframe(port, path=route)

これで準備は完了です。ここからは、このastro_cell()に色々なコードを流し込みながら、HTML・CSS・JavaScriptの基礎を思い出していきます。

---

2. 4つの技術の役割を整理する

書き始める前に、それぞれの技術が何を担当しているかを整理しておきます。ここが曖昧なまま書き始めると、「見た目を変えたいのにHTMLをいじってしまう」みたいな迷子になりやすいところです。

技術	役割	書くもの
HTML	構造	見出し、段落、リスト、リンク、ボタン
CSS	見た目	色、余白、枠線、レイアウト
JavaScript	値・処理	変数、配列、オブジェクト、条件分岐
Astro	HTML生成	JavaScriptの値をHTMLへ埋め込む

Astroの.astroファイルは、この4つを1ファイルの中でまとめて扱えるのが特徴です。ファイル上部の---で囲まれた部分（フロントマター）にJavaScriptを書き、その下のHTMLの中で{}を使ってその値を埋め込みます。

---
const title = "Hello Astro";
---

<h1>{title}</h1>

<style>
  h1 {
    color: blue;
  }
</style>

このシンプルな構造を頭に入れた上で、HTML→CSS→JavaScriptの順に最低限の書き方を見ていきます。

---

3. HTML最小チートシート

HTMLはページの「構造」を書くためのものです。基本形はシンプルで、タグで内容を挟むだけです。

<タグ名>内容</タグ名>

<h1>タイトル</h1>
<p>本文です。</p>

よく使うタグ

タグ	用途	例
<h1>	大見出し	<h1>タイトル</h1>
<h2>	中見出し	<h2>概要</h2>
<p>	段落	<p>本文</p>
<ul>	箇条書き	<ul>...</ul>
<ol>	番号付きリスト	<ol>...</ol>
<li>	リスト項目	<li>HTML</li>
<a>	リンク	<a href="/about">About</a>
<button>	ボタン	<button>送信</button>
<section>	意味のあるまとまり	<section>...</section>
<div>	汎用的なまとまり	<div>...</div>
<span>	文章中の一部	<span>NEW</span>

よく使う属性

属性	用途	例
href	リンク先	<a href="/about">About</a>
class	CSS用の名前	<p class="note">注意</p>
id	個別識別	<button id="save">保存</button>
disabled	無効化	<button disabled>送信</button>
target	リンクの開き方	<a target="_blank">...</a>

実際にAstroで書いてみる（Lesson 01）

ここまでの内容を、実際にastro_cell()経由でプレビューしてみます。まずは素直にHTMLだけのページです。

astro_cell("""
---
import '../styles/global.css';
const title = "Lesson 01: HTML";
---
<meta charset="utf-8" />
<h1>{title}</h1>
<p>まずはHTMLを書きます。</p>

""", path="src/pages/lesson-01.astro")

もう少しタグを増やして、見出し・リスト・リンクをまとめた例も見ておきます。

astro_cell("""
---
const title = "HTML基礎";
---

<meta charset="utf-8" />

<h1>{title}</h1>

<section>
  <h2>学ぶこと</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Astro</li>
  </ul>
</section>

<p>
  <a href="https://astro.build/" target="_blank">
    Astro公式サイトを見る
  </a>
</p>
""", path="src/pages/html-basic.astro")

<h1>でタイトル、<section>と<h2>で内容のまとまり、<ul>/<li>で箇条書き、<a href="">でリンクを表現しています。{title}の部分だけがAstro独自の書き方で、フロントマターの変数をHTMLに埋め込んでいます。

---

4. CSS最小チートシート

CSSはHTMLの見た目を変えるためのものです。基本形は「セレクタ { プロパティ: 値; }」の繰り返しです。

セレクタ {
  プロパティ: 値;
}

.card {
  padding: 16px;
  border: 1px solid #ccc;
}

部分	意味
.card	対象
padding	変えたい項目
16px	値

セレクタの種類

書き方	対象	例
p	すべての<p>	p { color: gray; }
.card	class="card"	.card { padding: 16px; }
#main	id="main"	#main { width: 800px; }
.card h2	.card内のh2	.card h2 { color: blue; }

実務では基本的にclassを使う場面がほとんどです。

<section class="card">
  <h2>HTML</h2>
</section>

.card {
  border: 1px solid #ccc;
}

よく使うプロパティ

プロパティ	用途	例
color	文字色	color: #ffffff;
background	背景	background: #0f172a;
font-size	文字サイズ	font-size: 20px;
font-weight	太字	font-weight: bold;
line-height	行間	line-height: 1.7;
margin	外側の余白	margin: 16px;
padding	内側の余白	padding: 16px;
border	枠線	border: 1px solid #ccc;
border-radius	角丸	border-radius: 12px;
display	並べ方	display: grid;
gap	要素間の隙間	gap: 16px;

marginとpaddingは混同しやすいので、役割の違いだけ押さえておきます。

プロパティ	位置	用途
margin	要素の外側	他の要素との距離
padding	要素の内側	枠線と中身の距離

Astroならではの書き方：フロントマターの変数をCSSに渡す（Lesson 02）

ここがAstroらしいポイントです。フロントマターで定義した値を、define:varsを使うことでそのままCSSの変数として使えます。デザインのテーマカラーなどをJavaScript側で一元管理したいときに便利です。

astro_cell("""
---
import '../styles/global.css';
const title = "Lesson 02: CSS";
const accent = "#2563eb";
---
<meta charset="utf-8" />
<h1>{title}</h1>
<p>フロントマターの変数を、スタイルの中でも使えます。</p>
<p class="accent">このテキストの色は変数から決まっています。</p>

<style define:vars={{ accent }}>
  .accent {
    color: var(--accent);
    font-weight: bold;
  }
</style>
""", path="src/pages/lesson-02.astro")

accentという1つの変数を書き換えるだけで、CSS側の色が連動して変わります。HTML・CSS・JSがバラバラのファイルではなく1つの.astroファイルに同居しているからこそ、こういう受け渡しが自然に書けます。

カードレイアウトの例

セレクタとプロパティを組み合わせて、よくあるカードUIを作ってみます。

astro_cell("""
---
const title = "CSS基礎";
---

<meta charset="utf-8" />

<h1>{title}</h1>

<div class="cards">
  <section class="card">
    <h2>HTML</h2>
    <p>ページの構造を書く。</p>
  </section>

  <section class="card">
    <h2>CSS</h2>
    <p>ページの見た目を整える。</p>
  </section>

  <section class="card">
    <h2>JavaScript</h2>
    <p>ページに処理を加える。</p>
  </section>
</div>

<style>
  body {
    background: #0f172a;
    color: #e5e7eb;
    font-family: sans-serif;
    line-height: 1.7;
  }

  h1 {
    color: #93c5fd;
  }

  .cards {
    display: grid;
    gap: 16px;
  }

  .card {
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 12px;
    padding: 16px;
  }

  .card h2 {
    color: #facc15;
  }
</style>
""", path="src/pages/css-basic.astro")

display: gridとgapでカードを並べ、.cardという1つのクラスを3つの<section>に使い回しています。同じスタイルを繰り返し書かなくていいのが、classを使う一番の利点です。

---

5. JavaScript最小チートシート

JavaScriptは値や処理を書くためのものです。Astroでは、.astroファイル上部の---の中に素直にJavaScriptを書けます。

---
const title = "JavaScript基礎";
---

<h1>{title}</h1>

基本の値

種類	例
文字列	"HTML"
数値	100
真偽値	true / false
配列	["HTML", "CSS"]
オブジェクト	{ title: "HTML", level: 1 }

変数はconstで定義し、{}でHTML側に埋め込みます。

const title = "HTML入門";
const count = 3;

<h1>{title}</h1>
<p>{count}件あります。</p>

配列と map()

配列をそのままHTMLに展開したいときはmap()を使うのが定番パターンです。

const languages = ["HTML", "CSS", "JavaScript"];

<ul>
  {languages.map((language) => (
    <li>{language}</li>
  ))}
</ul>

実際にAstroで書いてみる（Lesson 03）

astro_cell("""
---
import '../styles/global.css';
const title = "Lesson 03: 配列とmap";
const fruits = ["りんご", "みかん", "ぶどう"];
---
<meta charset="utf-8" />
<h1>{title}</h1>
<p>配列の中身を、リストとして描画します。</p>

<ul>
  {fruits.map((fruit) => (
    <li>{fruit}</li>
  ))}
</ul>
""", path="src/pages/lesson-03.astro")

fruitsという配列の要素数を変えても、コード自体は書き換える必要がありません。<li>を3つ手打ちするのではなく、「配列の中身をどう描画するか」という1つのルールだけを書く、というのがReactやVueなどモダンなフロントエンドに共通する考え方です。

オブジェクトと、配列 + オブジェクトの組み合わせ

実際のWebページでは、単なる文字列の配列よりも、オブジェクトの配列を扱う場面のほうが多くなります。

const lessons = [
  { title: "HTML", description: "構造を書く" },
  { title: "CSS", description: "見た目を整える" },
  { title: "JavaScript", description: "処理を書く" },
];

{lessons.map((lesson) => (
  <section>
    <h2>{lesson.title}</h2>
    <p>{lesson.description}</p>
  </section>
))}

値の取り出しは.で行い、lesson.titleのように書きます。

条件分岐

表示・非表示を切り替えたいときによく使う2つの書き方です。

書き方	用途
condition ? A : B	trueならA、falseならB
condition && A	trueのときだけAを表示

<p>{isPublished ? "公開中" : "下書き"}</p>

{isNew && (
  <span>NEW</span>
)}

---

6. HTML / CSS / JavaScriptをまとめて使う

ここまでの要素を1ページに集約すると、「記事一覧」のようなよくあるUIパターンになります。オブジェクトの配列をmap()で展開し、条件付きで「NEW」バッジを出し分けている点に注目してください。

astro_cell("""
---
const title = "HTML / CSS / JavaScript基礎";

const articles = [
  {
    title: "HTML基礎",
    category: "HTML",
    description: "見出し、段落、リスト、リンクを扱う。",
    isNew: true,
  },
  {
    title: "CSS基礎",
    category: "CSS",
    description: "色、余白、枠線、カードデザインを扱う。",
    isNew: false,
  },
  {
    title: "JavaScript基礎",
    category: "JavaScript",
    description: "変数、配列、オブジェクト、条件分岐を扱う。",
    isNew: true,
  },
];
---

<meta charset="utf-8" />

<h1>{title}</h1>
<p>AstroでHTML / CSS / JavaScriptの基礎をまとめて確認します。</p>

<div class="cards">
  {articles.map((article) => (
    <section class="card">
      <p class="category">{article.category}</p>
      <h2>{article.title}</h2>
      <p>{article.description}</p>

      {article.isNew && (
        <span class="badge">NEW</span>
      )}
    </section>
  ))}
</div>

<style>
  body {
    background: #0f172a;
    color: #e5e7eb;
    font-family: sans-serif;
    line-height: 1.7;
  }

  h1 {
    color: #93c5fd;
  }

  .cards {
    display: grid;
    gap: 16px;
    margin-top: 24px;
  }

  .card {
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 12px;
    padding: 16px;
  }

  .category {
    color: #facc15;
    font-size: 14px;
    font-weight: bold;
  }

  .card h2 {
    margin-top: 0;
  }

  .badge {
    display: inline-block;
    background: #2563eb;
    color: white;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
  }
</style>
""", path="src/pages/frontend-basic.astro")

このコード1つの中に、これまで見てきた要素がすべて詰まっています。

部分	技術	内容
<h1> / <p> / <section>	HTML	ページ構造
class="card"	HTML	CSS用の名前
.card / .badge	CSS	classへのスタイル指定
background / padding / border	CSS	見た目の調整
const articles = [...]	JavaScript	配列
{ title: "...", isNew: true }	JavaScript	オブジェクト
articles.map(...)	JavaScript	配列をHTMLに変換
article.isNew && (...)	JavaScript	条件付き表示
{article.title}	Astro	値の埋め込み

articles配列に新しい記事を1つ足すだけで、カードも自動的に1枚増えます。HTMLを手で複製する必要がない、というのがこの書き方の一番のメリットです。

---

まとめ

以上、Google Colabを用いてAstroを動かす方法を、構文ルール中心に解説しました。

Webフロントエンドの中でも、AstroはHTML/CSS/JS の基本・原点を大切にするフレームワークなので、Google Colabで詳細に構造分析するアプローチと、非常に相性がよいと思います。