Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用、そしてJavaScriptによる動的な機能の追加に焦点を当てています。
HTMLの基礎
HTMLはウェブページの骨組みを構築するための言語です。HTMLを書く際には、<div>、<header>、**<nav>**などのタグを使用して、ページの構造を定義します。模写したサイトでは、ハンバーガーメニューを含むレイアウトが特徴でした。以下はその基本的な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は以下のようになります。
#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コードは、ハンバーガーメニューのクリックイベントに応じて、メニュー項目の表示・非表示を切り替える機能を示しています。
// ハンバーガーメニューの要素を取得
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**タグを操作します。
let hamburgerMenu = document.getElementById('hamburger-menu');
let menu = document.querySelector('nav ul');
ステップ2: イベントリスナーを追加する
次に、ハンバーガーメニューがクリックされたときに動作するイベントリスナーを追加します。**addEventListener**メソッドを使用して、クリックイベントに対する関数を設定します。
hamburgerMenu.addEventListener('click', function() {
// ここにクリック時の処理を記述
});
ステップ3: 条件に応じてメニューの表示・非表示を切り替える
イベントリスナー内で、メニュー項目が現在表示されているかどうかを判定し、その状態に応じて表示または非表示を切り替えます。style.displayプロパティを使用して、ulタグの表示状態を'block'（表示）または**'none'**（非表示）に設定します。
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）の操作方法を学びました。これらの知識を用いて、さらに複雑な機能を実装するしていきたいと思います。