ゼロプロ～Season2【Webアプリケーションの基礎編：2-2-1】HTML/CSSによる基本的なWebページ構築

Webアプリケーションを作成する第一歩は、HTMLとCSSを使って基本的なWebページを構築することです。本記事では、初心者でも理解しやすいように、HTMLとCSSの基本を図やコード例を交えて丁寧に解説します。

HTMLとCSSとは？
1. HTML（HyperText Markup Language）
2. CSS（Cascading Style Sheets）
HTMLの基本構造
1. HTML構造の解説
CSSの基本構文
1. CSS構文の解説
HTMLとCSSを組み合わせる
1. コード例
2. 出力イメージ
HTML/CSS学習のポイント
まとめ

HTMLとCSSとは？

HTML（HyperText Markup Language）

役割：Webページの「構造」を作る言語。
例：テキスト、画像、リンク、ボタンなどの配置を定義します。

CSS（Cascading Style Sheets）

役割：HTMLで作成した構造に「デザイン」を追加するための言語。
例：色、フォント、レイアウト、背景デザインなどを調整します。

HTMLの基本構造

HTMLは「タグ」と呼ばれる要素で構成されます。以下は、Webページの基本的な構造です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本的なWebページ</title>
</head>
<body>
    <h1>私の最初のWebページ</h1>
    <p>HTMLとCSSを使ってページを作成します。</p>
</body>
</html>

HTML構造の解説

タグ	説明
`<!DOCTYPE>`	HTML5であることを宣言するタグ
`<html>`	ページ全体を囲むタグ
`<head>`	ページのメタ情報（タイトルや文字コード）を定義
`<body>`	実際に表示する内容を記述する
`<h1>`	見出し1（最も重要な見出し）
`<p>`	段落テキスト

CSSの基本構文

CSSは、HTML要素の見た目をスタイル付けするために使用します。以下はCSSの基本的な構文です。

h1 {
    color: blue;           /* 文字色 */
    font-size: 24px;       /* 文字サイズ */
    text-align: center;    /* 中央揃え */
}

p {
    color: gray;           /* 段落の文字色 */
    line-height: 1.6;      /* 行間 */
}

CSS構文の解説

用語	説明
セレクタ	どのHTML要素にスタイルを適用するかを指定する
プロパティ	変更するスタイルの種類を指定する
値	プロパティに対する設定値

HTMLとCSSを組み合わせる

HTMLとCSSを組み合わせることで、見た目を整えたWebページを作成できます。

コード例

以下は、HTMLとCSSを使った簡単なWebページの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLとCSSの基本</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-top: 20px;
        }

        p {
            color: #666;
            font-size: 16px;
            line-height: 1.5;
            margin: 10px 20px;
        }

        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTMLとCSSの基本</h1>
        <p>これはHTMLとCSSを使ったシンプルなWebページの例です。</p>
        <p>スタイルを使ってデザインを整えることができます。</p>
    </div>
</body>
</html>

出力イメージ

+-------------------------------------------------+
|                    HTMLとCSSの基本              |
|                                                 |
|  これはHTMLとCSSを使ったシンプルなWebページの例です。  |
|  スタイルを使ってデザインを整えることができます。   |
+-------------------------------------------------+

HTML/CSS学習のポイント

HTMLの構造：ページの要素はタグで囲むことを理解しましょう。
CSSのスタイル：プロパティと値を指定して、デザインを調整します。
実践あるのみ：小さなページから作り、少しずつ要素を追加していきましょう。

まとめ

HTMLはWebページの骨格、CSSはそのデザインを決める重要な役割を持ちます。最初はシンプルなページから始めて、徐々にスタイルを追加しながら学習を進めていきましょう。

次回は「JavaScriptの基礎」をテーマに、動的なWebページの作成方法について解説します。お楽しみに！