「HTMLとCSSをゼロから学べる完全ガイド｜Webページ作成の基本」

こんにちは、SouDogです。

今回は、これからこれからWebデザインを学ぶ方に向けてHTMLとCSSに関しての基本的な内容を紹介していきます。

はじめに

ステップ1：HTMLの基礎を理解しよう
ステップ2：CSSの基礎を理解しよう
ステップ3：実践的な学習を進める
- (1) プロジェクトを作ろう
- (2) 学習リソースを活用する
ステップ4：次のステップ

はじめに

HTMLとCSSは、Webサイトを作るための2つの基本的な技術です。HTMLはWebページの骨組みや構造を作り、CSSはその見た目やデザインを担当します。これらを学ぶことで、自分だけのWebページを作成できるようになります。

本ガイドでは、初心者の方がつまずきにくいように、ステップバイステップで学べるように解説していきます。

ステップ1：HTMLの基礎を理解しよう

(1) HTMLって何？

HTML（HyperText Markup Language）は、Webページの構造を作成するための言語です。簡単に言うと、Webページの「骨組み」を作るために使います。HTMLを使うことで、Webページにタイトル、段落、画像、リンク、リストなどを表示できます。

(2) 最初に覚える基本タグ

HTMLの文書は「タグ」で構成されています。タグは通常、開くタグ（例：<h1>）と閉じるタグ（例：</h1>）のペアで使います。以下は最も基本的なタグです。

タグ	用途	書き方例
`<html>`	HTML文書の開始・終了	`<html>...</html>`
`<head>`	ページ情報の記述	`<head>...</head>`
`<title>`	ページタイトルの指定	`<title>ページタイトル</title>`
`<body>`	ページの内容本体	`<body>...</body>`
`<h1>`～`<h6>`	見出し（`h1`が最も大きい）	`<h1>見出し</h1>`
`<p>`	段落	`<p>これは段落です。</p>`
`<a>`	リンク	`<a href="https://example.com">リンク</a>`
`<img>`	画像	`<img src="画像URL" alt="説明">`
`<ul>` `<li>`	箇条書きリスト	`<ul><li>項目1</li></ul>`

(3) 練習：最初のHTMLページを作ろう

まずは、自分のPCでHTMLファイルを作成してみましょう。以下の手順で実践します。

テキストエディタを開く

Windowsの場合：「メモ帳」
Macの場合：「テキストエディット」

以下のコードを入力

<!DOCTYPE html>
<html>
<head>
    <title>私の最初のWebページ</title>
</head>
<body>
    <h1>こんにちは！</h1>
    <p>これは私の最初のWebページです。</p>
    <a href="https://www.example.com">リンクをクリック！</a>
</body>
</html>

ファイルを「index.html」という名前で保存
保存したファイルをブラウザで開く

Chrome、Edgeなどのブラウザで「index.html」を開くと、Webページが表示されます！

ステップ2：CSSの基礎を理解しよう

(1) CSSって何？

CSS（Cascading Style Sheets）は、HTMLで作ったWebページの見た目をデザインするための言語です。色、フォント、レイアウトの調整、背景画像の設定など、さまざまなデザインを適用できます。

(2) CSSの基本構造

CSSは、セレクタ、プロパティ、値の組み合わせで記述します。

セレクタ：どの要素にスタイルを適用するか
プロパティ：変更したいデザインの種類
値：そのデザインの内容

例: 文字の色を赤にするCSS

h1 {
    color: red; /* 文字色を赤にする */
}

(3) CSSの適用方法

CSSをHTMLに適用する方法は3種類あります。

方法	説明	記述例
インラインCSS	HTMLタグ内に直接記述	`<h1 style="color: red;">見出し</h1>`
内部CSS (styleタグ)	HTML内で`<style>`タグを使って記述	`<style> h1 { color: red; } </style>`
外部CSS (ファイル)	CSSを別ファイルに保存し、HTMLで読み込む	`<link rel="stylesheet" href="style.css">`

初心者には「内部CSS」がおすすめですが、慣れてきたら「外部CSS」に挑戦しましょう。

(4) 基本的なCSSプロパティ

以下のプロパティを覚えると、簡単なデザインが可能になります。

プロパティ	用途	例
`color`	文字色の指定	`color: blue;`
`font-size`	文字サイズの指定	`font-size: 20px;`
`background-color`	背景色の指定	`background-color: yellow;`
`margin`	外側の余白を設定	`margin: 10px;`
`padding`	内側の余白を設定	`padding: 20px;`
`border`	枠線を設定	`border: 1px solid black;`

(5) 練習：CSSを使って装飾してみよう

以下のコードをHTMLファイルに追加して、CSSでデザインを変更してみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>CSSの練習</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
            font-size: 36px;
            text-align: center;
        }
        p {
            color: #333;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>CSSの練習</h1>
    <p>CSSで背景色や文字のスタイルを変更できます！</p>
</body>
</html>

保存後、ブラウザで開くと、背景色や文字の色が変更されているのが確認できます。