アイテムの配置

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 73/76。

チャレンジ

簡単

シンプルな水平ナビゲーションバーを作成するために、flexboxを練習しましょう。CSSを使用して、以下の画像のデザインに合うようにメニューをスタイリングしてください。

以下の手順に従ってください：

ナビゲーションバーをflexコンテナとして設定します。
リンク間に間隔を追加します。
1. justify-content: space-around を使用して、リンクを均等に配置します。
ナビゲーションバーをスタイリングします。
1. 背景色を darkblue に設定します。
2. リンクの周囲にスペースを作るために、パディングを追加します。
ナビゲーションリンクをスタイリングします。
1. <a> 要素を選択します。
2. テキストの色を white に設定します。
3. デフォルトの下線を削除します。
4. フォントサイズを 18px に設定します。
5. より適切な間隔にするために、8px 15px のパディングを追加します。

自分で試してみよう

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>