初めてのWebアプリ開発：HTML・CSS・JavaScriptって何？

プログラミング

今日はWebアプリ開発の基礎となる三つの言語、HTML・CSS・JavaScriptについて初心者の方にもわかりやすく解説します。これからWeb開発を始めたい方は、ぜひ参考にしてみてください。

Webサイトの3つの柱

Webサイトやアプリを作る際には、主に以下の3つの技術が使われています：

  1. HTML – サイトの「構造」を作る
  2. CSS – サイトの「見た目」を整える
  3. JavaScript – サイトに「動き」をつける

これらは、家を建てるときに例えると理解しやすいかもしれません。HTMLは家の骨組み、CSSはインテリアや壁紙、JavaScriptは電気や水道のような機能を提供するものです。それでは、一つずつ詳しく見ていきましょう。

HTML：Webページの骨組み

HTMLとは「HyperText Markup Language」の略で、Webページの基本構造を定義する言語です。

HTMLの特徴

  • テキストや画像、リンクなどの「コンテンツ」をブラウザに表示するための指示書
  • 「タグ」と呼ばれる<>で囲まれた記号を使って要素を定義する
  • Webページの基本的な構造とコンテンツを定義する

簡単なHTMLの例

<!DOCTYPE html>
<html> 
<head>
    <title>私の最初のウェブページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これは私の初めてのHTMLページです。</p>
    <img src="cat.jpg" alt="かわいい猫の写真">
    <a href="https://example.com">リンク例</a>
</body>
</html>

この例では：

  • <h1> は見出し（大きい文字のタイトル）
  • <p> は段落
  • <img> は画像
  • <a> はリンク

を表しています。

CSS：デザインの魔法

CSSとは「Cascading Style Sheets」の略で、HTMLで作った骨組みに色や形、配置などのデザインを施す言語です。

CSSの特徴

  • HTMLの要素に「どのように見せるか」の指示を出す
  • 色、サイズ、フォント、配置など見た目に関するすべてを制御できる
  • 1つのCSSファイルで複数のHTMLページのデザインを一括管理できる

簡単なCSSの例

body {
    font-family: "ヒラギノ角ゴ Pro W3", sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
    color: #333333; /* テキストの色を明示的に指定 */
}

h1 {
    color: #ff6600;
    text-align: center;
    font-size: 2em; /* より視覚的に目立つようにフォントサイズを指定 */
    margin-bottom: 20px; /* 見出しの下にスペースを追加 */
}

p {
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 15px; /* 段落の下にスペースを追加 */
}

img {
    max-width: 100%;
    height: auto; /* 高さを自動で調整 */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: block; /* 画像をブロック要素として扱い、余計なスペースを取り除く */
    margin: 0 auto; /* 中央に配置 */
}

この例では：

  • 全体の背景色とフォントを設定
  • 見出しを中央揃えでオレンジ色に
  • 段落のフォントサイズと行間を設定
  • 画像に角丸と影を追加

JavaScript：動きと対話性を加える

JavaScriptは、Webページに動きや対話性を与えるプログラミング言語です。

JavaScriptの特徴

  • ユーザーの操作に応じて内容を変更したり、動きをつけたりできる
  • サーバーとデータをやり取りして画面を更新する非同期通信が可能
  • 計算、条件分岐、繰り返し処理など、通常のプログラミング機能も備えている
  • モダンなWebアプリに不可欠な技術

簡単なJavaScriptの例

// ボタンがクリックされたときの処理
document.getElementById('myButton').addEventListener('click', function() {
    // メッセージを表示
    alert('ボタンがクリックされました！');
    
    // 見出しのテキストを変更
    document.querySelector('h1').textContent = 'JavaScriptですごい！';
    
    // 背景色をランダムに変更
    const randomColor = generateRandomColor();
    document.body.style.backgroundColor = randomColor;
});

// ランダムな色を生成する関数
function generateRandomColor() {
    // 16進数でランダムな色コードを生成
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

この例では：

  • ボタンがクリックされたら、アラートメッセージを表示
  • 見出しのテキストを変更
  • ページの背景色をランダムな色に変更

3つの技術がどう連携するか

実際のWebサイトでは、これら3つの技術が連携して働きます：

  1. HTMLでコンテンツの構造を作り
  2. CSSでデザインを整え
  3. JavaScriptで動きや機能を追加する

例えば、ショッピングサイトなら：

  • 商品リストや詳細ページの構造はHTML
  • レイアウトやカラースキーム、商品画像の表示方法はCSS
  • 「カートに追加」ボタンや商品フィルター機能はJavaScript

始めるための次のステップ

Webアプリ開発を始めるには：

  1. 基本を学ぶ：HTML、CSS、JavaScriptの基本文法を一つずつ学びましょう
  2. 小さなプロジェクトから始める：簡単な自己紹介ページや趣味のサイトを作ってみましょう
  3. 実際のコードを見る：他の人が作ったWebサイトのコードを「検証」機能で見てみましょう
  4. オンライン学習リソースを活用する：無料の学習サイトやチュートリアルがたくさんあります

まとめ

  • HTML：Webページの「構造」と「内容」を定義
  • CSS：Webページの「見た目」と「レイアウト」を整える
  • JavaScript：Webページに「動き」と「対話性」を追加

これら3つの技術を学ぶことで、あなたもWebアプリケーションの開発への第一歩を踏み出すことができます。最初は難しく感じるかもしれませんが、少しずつ学び、実践していくことで確実に力がついていきます。

Web開発の世界へようこそ！楽しいコーディングライフをお祈りします！