コンテンツにスキップ

ヘッダーを作ってみよう

あなたのサイトはさまざまなデバイスで表示されます。複数の画面サイズに対応可能なページナビゲーションを作成しましょう！

ここで学ぶことは...

  • ナビゲーションコンポーネントを含んだサイトのヘッダーを作成する
  • ナビゲーションコンポーネントをレスポンシブにする

やってみよう - 新しいヘッダーコンポーネントを作成する

  1. 新しいヘッダー（Header）コンポーネントを作成してみましょう。既存のNavigation.astroコンポーネントをインポートし、<header>要素の中にある<nav>要素の中で使用します。

    コードを表示

    src/components/にHeader.astroという名前のファイルを作成します。

    ---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>

やってみよう - ページを更新する

  1. 各ページで、既存の<Navigation/>コンポーネントを新しいヘッダーに置き換えます。

    コードを表示

    ---
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>

  2. ブラウザのプレビューを開き、ヘッダーがすべてのページに表示されていることを確認します。まだ見た目は変わりませんが、開発者ツールを使用してプレビューを検査すると、ナビゲーションリンクの周りに<header>や<nav>などの要素があることがわかります。

レスポンシブスタイルを追加する

  1. Navigation.astroを更新して、ナビゲーションリンクを制御するためのCSSクラスを追加します。既存のナビゲーションリンクをnav-linksというクラスとmain-menuというidをもつ<div>で囲みます。

    ---
---
<div id="main-menu" class="nav-links">
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>
</div>

  2. global.cssに以下のCSSスタイルをコピーします。これらのスタイルは以下のことをおこないます。

    • モバイル向けにナビゲーションリンクをスタイリングして配置する
    • 大きな画面サイズに対して異なるスタイルを定義するために@mediaクエリを使用する

    :::tip[モバイルファーストなデザイン]最初は小さい画面サイズのデザインから始めましょう！小さい画面サイズはシンプルなレイアウトが必要です。その後、スタイルを調整して大きなデバイスに対応します。複雑な場合のデザインから始めてしまうと、それをまたシンプルにするための努力が必要になります。:::

    html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* ナビゲーションのスタイル */

.nav-links {
  width: 100%;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d0950;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }
}

ウィンドウのサイズを変更して、異なる画面幅で異なるスタイルが適用されていることを確認してください。@mediaクエリの使用により、ヘッダーは画面サイズに対してレスポンシブになりました。

チェックリスト

参考

貢献する コミュニティ スポンサー