Menu
Coddy logo textTech

リスト項目のスタイリング

Coddyの「ボトムナビゲーションバー - HTML/CSSプロジェクト」コースのレッスン 11/12。

リストアイテムのスタイリングを追加しましょう。これを使用することで、アイコンを適切に調整できるようになります。

challenge icon

チャレンジ

簡単

navigationクラスと順序なしリストのリストアイテム.navigation ul liを対象にします:

  1. heightとwidthを35pxに、marginを1remに設定します。
  2. paddingを0 1remに設定します。
  3. colorを好きな色に設定してください!(推奨:white
  4. border-radiusを50%に設定します。
  5. displayをflexに、align-itemsとjustify-contentをcenterに設定します。
  6. 以下のスタイリングを追加します:

    cursor: pointer;
    transition: all 0.2s linear;

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

ボトムナビゲーションバー - HTML/CSSプロジェクトのすべてのレッスン