ヘッダーを作ってみよう
あなたのサイトはさまざまなデバイスで表示されます。複数の画面サイズに対応可能なページナビゲーションを作成しましょう!
ここで学ぶことは…
- ナビゲーションコンポーネントを含んだサイトのヘッダーを作成する
- ナビゲーションコンポーネントをレスポンシブにする
やってみよう - 新しいヘッダーコンポーネントを作成する
セクションタイトル: やってみよう - 新しいヘッダーコンポーネントを作成する-
新しいヘッダー(Header)コンポーネントを作成してみましょう。既存の
Navigation.astro
コンポーネントをインポートし、<header>
要素の中にある<nav>
要素の中で使用します。コードを表示
src/components/
にHeader.astro
という名前のファイルを作成します。src/components/Header.astro ---import Navigation from './Navigation.astro';---<header><nav><Navigation /></nav></header>
やってみよう - ページを更新する
セクションタイトル: やってみよう - ページを更新する-
各ページで、既存の
<Navigation/>
コンポーネントを新しいヘッダーに置き換えます。コードを表示
src/pages/index.astro ---import Navigation from '../components/Navigation.astro';import Header from '../components/Header.astro';import Footer from '../components/Footer.astro';import '../styles/global.css';const pageTitle = "ホームページ";---<html lang="ja"><head><meta charset="utf-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" /><meta name="viewport" content="width=device-width" /><meta name="generator" content={Astro.generator} /><title>{pageTitle}</title></head><body><Navigation /><Header /><h1>{pageTitle}</h1><Footer /></body></html> {pageTitle} {pageTitle}