ウェブ開発 (HTML, CSS, JS)
Web Development (HTML, CSS, JS) は、HTML、CSS、JavaScript などの主要な技術を使用して ウェブサイト と ウェブアプリケーション を作成する方法を紹介します。これは、現代のウェブデザインの基盤となる、HTML がコンテンツを構造化する方法、CSS がそれをスタイルする方法、JavaScript がインタラクティブ性を追加する方法を調べます。
ウェブ開発 (HTML, CSS, JS) の構成要素
このセクションでは、コア技術とその役割を分解します。
- HTML (構造): ウェブページのレイアウトとコンテンツを定義し、要素を整理するためにタグを使用します。
- CSS (スタイル): ウェブページの視覚的な外観を制御し、色、フォント、レイアウトなどを設定します。
- JavaScript (インタラクティブ): 動的な機能を追加し、ユーザーとのインタラクションやリアルタイム更新を可能にします。
- 技術の統合: HTML、CSS、JavaScript が連携して一貫性のあるウェブ体験を作成する方法。
ウェブ開発 (HTML, CSS, JS) の例
HTML (構造) の例
<h1>Welcome to My Site</h1>という HTML タグは、ページのタイトルを構造化し、メインのヘッダー を作成します。<div class="container">という HTML を使用すると、テキストなどのセクションのようなコンテンツをグループ化してスタイル付けやスクリプト処理を行うことができます。<form><input type="text" name="username"></form>という HTML フォームは、ユーザー入力（例：ユーザー名）を収集します。
CSS (スタイル) の例
- CSS コード
h1 { color: blue; }は、ヘッダー の色を 青色 に設定し、視覚的な魅力を高めます。 div.container { width: 80%; margin: auto; }という CSS を使用すると、コンテナ を中央揃えにし、幅を設定してクリーンなレイアウトを作成します。- CSS ホバー効果 (
button:hover { background-color: green; }) は、マウスをボタンの上にホバーすると、ボタンの色 を変更します。
JavaScript (インタラクティブ) の例
- JavaScript 関数 (
function toggleMenu() { menu.style.display = menu.style.display === "none" ? "block" : "none"; }) は、クリック時にメニューの表示/非表示 を切り替えます。 - JavaScript (
fetch("https://api.example.com/data").then(res => res.json()).then(data => console.log(data));) は、API データ を取得し、動的なコンテンツの更新を可能にします。
技術の統合の例
<button id="btn">Click Me</button>という HTML ボタンは、CSS (button { padding: 10px; }) でスタイル付けされ、クリックするとアラート メッセージを表示するように JavaScript で作成されます。- ウェブページ は、HTML を使用して写真ギャラリー を構造化し、CSS を使用してグリッドレイアウト を作成し、JavaScript を使用してクリックで拡大 機能を追加します。
<input type="email">という HTML フォームは、CSS (input { border: 1px solid gray; }) でスタイル付けされ、JavaScript を使用して送信前にメール形式を検証 します。