世界の七不思議

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 34/35。

チャレンジ

簡単

世界の七不思議に関するミニ情報ページのHTMLが与えられています。あなたのタスクは以下の通りです：

サイドバーのスタイリング:
- 幅を 220px に設定してください。
- 好きな背景色を指定してください。
- 内側にパディングを追加してください。
サイドバーのリンク（<strong>a</strong> タグ）のスタイリング:
- デフォルトの青色を、サイドバーの背景に合う色に変更してください。
- ホバー時にわずかに異なる色合いになるホバーエフェクトを追加してください。
ドロップダウンメニューの追加:
- ドロップダウンボタンの後に、クラス名 dropdown-content を持つ div を追加してください。
- その中に、History、Maps、Gallery というリンクを追加してください。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Seven Wonders</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f9f9f9;
    }

    /* Notification Banner */
    .notification {
      background-color: #4CAF50;
      color: white;
      padding: 12px;
      text-align: center;
      font-weight: bold;
    }

    /* Layout */
    .container {
      display: flex;
      min-height: 100vh;
    }

    .sidebar h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .sidebar a {
      display: block;
      text-decoration: none;
      margin: 6px 0;
      padding: 5px;
      border-radius: 4px;
    }

    .sidebar a:hover {
      background: #444;
    }

    /* Dropdown in sidebar */
    .dropdown {
      margin-top: 15px;
    }

    .dropdown-btn {
      cursor: pointer;
      padding: 5px;
      display: block;
      background: #444;
      border-radius: 4px;
    }

    .dropdown-content {
      display: none;
      margin-top: 5px;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content a {
      padding-left: 15px;
      font-size: 14px;
    }

    /* Content */
    .content {
      flex: 1;
      padding: 30px;
      background: white;
    }

    .content h1 {
      margin-top: 0;
    }

    .content img {
      max-width: 100%;
      border-radius: 8px;
      margin: 15px 0;
    }

    /* Tooltip */
    .tooltip {
      position: relative;
      border-bottom: 1px dotted #333;
      cursor: help;
      color: #0077cc;
    }

    .tooltip-text {
      visibility: hidden;
      width: 160px;
      background-color: #33fbe6;
      color: #333;
      text-align: center;
      padding: 6px;
      border-radius: 6px;
      position: absolute;
      left: 105%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
    }
  </style>
</head>
<body>
  <!-- 通知バナー -->
  <div class="notification">
    New wonder discovered!
  </div>

  <div class="container">
    <!-- サイドバー -->
    <div class="sidebar">
      <h2>Seven Wonders</h2>
      <a href="#">Great Wall of China</a>
      <a href="#">Petra</a>
      <a href="#">Christ the Redeemer</a>
      <a href="#">Machu Picchu</a>
      <a href="#">Chichen Itza</a>
      <a href="#">Colosseum</a>
      <a href="#">Taj Mahal</a>

      <div class="dropdown">
        <span class="dropdown-btn">More Resources ▼</span>
        <!-- ここに dropdown-content を追加してください -->
        
      </div>
    </div>

    <!-- メインコンテンツ -->
    <div class="content">
      <h1>The Mausoleum at Halicarnassus</h1>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Mausoleum_at_Halicarnassus_by_Ferdinand_Knab_%281886%29_cropped.png" alt="Mausoleum">
      <p>
        The <span class="tooltip">Mausoleum
        <span class="tooltip-text">A grand tomb built for Mausolus, satrap of Caria.</span>
        </span> at Halicarnassus was one of the Seven Wonders of the Ancient World, built around 350 BCE in modern-day Turkey. It stood approximately 45 meters high and combined Greek, Egyptian, and Lycian architectural styles.
      </p>
    </div>
  </div>
</body>
</html>