【初心者向け】AstroでブログサイトをゼロからつくるHTML/CSS入門

本コースにはAIの使用が含まれています。

こんな悩みを持っていませんか？

• HTMLとCSSは書けるけど、次に何を学べばいいかわからない

• フレームワークに挑戦したいが、ReactやVueは難しそうで踏み出せない

• 自分のブログやポートフォリオサイトを自分で作りたい

• 写経するだけで終わってしまい、実力がついている気がしない

このコースはそういった方のために設計しました。

このコースの特徴

① 演習ファースト：読むだけで終わらない

各日は「説明動画 → 自力で演習 → 解説動画」の3ステップ構成です。手を動かすことで、本当に使えるスキルが身につきます。

② ブラウザだけで始められる

演習環境はStackBlitz（ブラウザ上の開発環境）を使います。Node.jsやエディタのインストールは不要。URLを開けばすぐ始められます。

③ 1日1テーマ・全10日間で完成

1日あたりの学習量を絞り、10日間かけてブログサイトを少しずつ完成させていきます。社会人や忙しい方でも無理なく進められるペース設計です。

カリキュラム

Day 1｜Astroを起動してHello Worldを作ろう

Day 2｜コンポーネントを作ってページを組み立てよう

Day 3｜レイアウトコンポーネントで共通部分を管理しよう

Day 4｜動的ルーティングで複数ページを自動生成しよう

Day 5｜スタイルを付けよう

Day 6｜Markdownでブログ記事を書こう

Day 7｜テンプレート構文を使いこなそう

Day 8｜データファイルで記事を管理しよう

Day 9｜404ページとナビゲーションを改善しよう

Day 10｜総合演習：ブログサイトを完成させよう

こんな方におすすめです

• HTMLとCSSの基礎があり、次のステップを探している方

• フレームワークを初めて学ぶ方（React・Vueの前段階として最適）

• ブログ・ポートフォリオサイトを自作したい方

• 写経ではなく、演習で実力をつけたい方

前提知識

• HTMLの基本タグ（h1・p・a・div など）を書いたことがある

• CSSで色や余白を変えたことがある

• JavaScriptの経験は不要です

修了後にできること

コース修了時には、以下をすべて備えたブログサイトが完成しています。

• コンポーネントによるUI管理

• Markdownで書いた記事ページ（動的ルーティングで自動生成）

• スコープ付きCSSによるスタイリング

• 404ページ・アクティブナビゲーション

そのままGitHub PagesやNetlifyに公開すれば、自分のブログ・ポートフォリオとして使えます。