ユニット3の導入 - コンポーネント
.astro
ファイルと.md
ファイルによりウェブサイトのページ全体を生成できるようになったので、AstroコンポーネントでHTMLの小さな部品を作成して再利用しましょう!
このユニットでは、ウェブサイト全体で共通する要素のコードを再利用するために、Astroコンポーネントを作成する方法を学びます。
作成するものは以下となります。
- ページへのリンクのメニューを表示するナビゲーションコンポーネント
- 各ページの下部に表示されるフッターコンポーネント
- フッターで使用される、プロフィールページへとリンクするソーシャルメディアコンポーネント
- モバイルデバイスでナビゲーションを切り替えるためのインタラクティブなハンバーガーコンポーネント
その過程で、CSSとJavaScriptを使用して、画面サイズやユーザーの入力に反応するレスポンシブデザインを実現します。