コンテンツにスキップ

ユニット3の導入 - コンポーネント

.astroファイルと.mdファイルによりウェブサイトのページ全体を生成できるようになったので、AstroコンポーネントでHTMLの小さな部品を作成して再利用しましょう!

今立っている場所

チュートリアルのこの段階でのコードは、GitHubまたはStackBlitzで確認できます。

あなたのコードを上の例と比較してみてください。また、チュートリアルを始めたばかりであれば、StackBlitzでフォークして、ここからブラウザ上でコーディングを始めてください。

これから向かう場所

このユニットでは、ウェブサイト全体で共通する要素のコードを再利用するために、Astroコンポーネントを作成する方法を学びます。

作成するものは以下となります。

  • ページへのリンクのメニューを表示するナビゲーションコンポーネント
  • 各ページの下部に表示されるフッターコンポーネント
  • フッターで使用される、プロフィールページへとリンクするソーシャルメディアコンポーネント
  • モバイルデバイスでナビゲーションを切り替えるためのインタラクティブなハンバーガーコンポーネント

その過程で、CSSとJavaScriptを使用して、画面サイズやユーザーの入力に反応するレスポンシブデザインを実現します。

チェックリスト