コンテンツにスキップ

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

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

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

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

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

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