サイト模写を通じたWeb開発学習: CSS, HTML, JavaScriptの活用法

Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用、そしてJavaScriptによる動的な機能の追加に焦点を当てています。

## **HTMLの基礎**

HTMLはウェブページの骨組みを構築するための言語です。HTMLを書く際には、**`<div>`**、**`<header>`**、**`<nav>`**などのタグを使用して、ページの構造を定義します。模写したサイトでは、ハンバーガーメニューを含むレイアウトが特徴でした。以下はその基本的なHTML構造です。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サイト名</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav>
      <div id="hamburger-menu">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">コンタクト</a></li>
      </ul>
    </nav>
  </header>
  <!-- 本文やその他の要素 -->
  <script src="script.js"></script>
</body>

</html>
```

## **CSSでの装飾**

CSSを用いることで、HTMLで定義したウェブページの見た目を装飾できます。IDやクラスを利用することで、特定のHTML要素をターゲットにし、それらにスタイルを適用することが可能です。例えば、ハンバーガーメニューとその項目にスタイルを適用するCSSは以下のようになります。

```css
#hamburger-menu {
    cursor: pointer;
    position: absolute; /* メニューをページの左上に配置 */
    top: 0;
    left: 0;
    width: 50px; /* 正方形のサイズを指定 */
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 中の線（span要素）を中央に配置 */
    align-items: center; /* 中央寄せ */
}

#hamburger-menu span {
    display: block;
    width: 30px; /* 線の幅を指定 */
    height: 3px;
    margin: 2px 0; /* 上下の線の間隔 */
    background-color: #333;
}

nav ul {
    list-style: none;
}

nav li {
    padding: 10px;
}
```

## **JavaScriptで動的なサイトを作る**

JavaScriptを使用すると、ウェブサイトにインタラクティブな機能を追加できます。下記では、ハンバーガーメニューをクリックするとメニュー項目が表示される動きを実装しました。以下のJavaScriptコードは、ハンバーガーメニューのクリックイベントに応じて、メニュー項目の表示・非表示を切り替える機能を示しています。

```javascript
// ハンバーガーメニューの要素を取得
let hamburgerMenu = document.getElementById('hamburger-menu');

// ハンバーガーメニューがクリックされたときに実行される関数を設定
hamburgerMenu.addEventListener('click', function() {
    // ナビゲーションメニューの要素を取得します。
    let menu = document.querySelector('nav ul');
    
    // メニューが現在表示されているかどうかをチェック
    if (menu.style.display === 'block') {
        // もしメニューが表示されていれば、それを非表示にする
        menu.style.display = 'none';
    } else {
        // もしメニューが非表示なら、それを表示
        menu.style.display = 'block';
    }
});
```

### **ステップ1: HTML要素を選択する**

まず、JavaScriptを使用して操作するHTML要素を選択する必要があります。この例では、**`id`**属性が**`hamburger-menu`**であるハンバーガーメニューの**`div`**タグと、メニュー項目を囲む**`ul`**タグを操作します。

```javascript
let hamburgerMenu = document.getElementById('hamburger-menu');
let menu = document.querySelector('nav ul');
```

### **ステップ2: イベントリスナーを追加する**

次に、ハンバーガーメニューがクリックされたときに動作するイベントリスナーを追加します。**`addEventListener`**メソッドを使用して、クリックイベントに対する関数を設定します。

```javascript
hamburgerMenu.addEventListener('click', function() {
    // ここにクリック時の処理を記述
});
```

### **ステップ3: 条件に応じてメニューの表示・非表示を切り替える**

イベントリスナー内で、メニュー項目が現在表示されているかどうかを判定し、その状態に応じて表示または非表示を切り替えます。**`style.display`**プロパティを使用して、**`ul`**タグの表示状態を**`'block'`**（表示）または**`'none'`**（非表示）に設定します。

```javascript
hamburgerMenu.addEventListener('click', function() {
    if(menu.style.display === 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
});
```

このコードは、ハンバーガーメニューをクリックするたびに、**`menu`**（**`ul`**タグ）の表示状態を切り替えます。もし**`menu`**が表示されている（**`style.display`**が**`'block'`**）場合は、それを非表示に（**`'none'`**）します。そうでなければ、表示（**`'block'`**）にします。

### **まとめ**

JavaScriptを用いることで、ウェブサイトに対してユーザーのインタラクションに応じた動的な変更を加えることが可能です。上記の通り、基本的なイベントの扱い方、条件分岐、そしてDOM（Document Object Model）の操作方法を学びました。これらの知識を用いて、さらに複雑な機能を実装するしていきたいと思います。