プログラミング

HTMLとCSSでウェブページ作成

最終更新： 22/04/2025
1 分の読み

HTMLとCSSの基礎: 初めてのウェブページをデザインする方法

ウェブデザインの第一歩として、HTMLとCSSの基本を理解し、最初のウェブページを作成することは非常に有益です。HTML（HyperText Markup Language）はウェブページの構造を作成するための言語であり、CSS（Cascading Style Sheets）はそのデザインやレイアウトを設定するための言語です。この記事では、HTMLとCSSを使用して、初心者でも簡単に理解できるように、最初のウェブページを作成する手順を説明します。

関連記事

1. HTMLの基本

HTMLは、ウェブページの構造を定義するために使います。HTMLは、タグと呼ばれる特別なコードで囲まれたテキストや画像、リンクなどを表示します。まず、基本的なHTMLの構成要素について学びましょう。

1.1 HTML文書の基本構造

HTML文書は次のような基本的な構成を持っています。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の最初のウェブページtitle>
head>
<body>
    <h1>こんにちは、ウェブページへようこそ！h1>
    <p>これは私の最初のウェブページです。HTMLを使って作成しました。p>
body>
html>

  • : これはHTML5の文書タイプ宣言で、ブラウザにこのページがHTML5形式であることを伝えます。

  • タグ: HTML文書全体を囲むタグです。

  • タグ: メタデータ（ページタイトルや文字エンコーディングなど）を含むセクションです。

  • タグ: ウェブページに実際に表示されるコンテンツを含む部分です。

  • タグ: 大見出しを表示するためのタグです。

  • タグ: 段落を作成するためのタグです。

1.2 基本的なタグ

  • 〜

    : 見出しタグ。数字が小さくなるほど見出しの重要度が低くなります。

  • : 段落タグ。テキストを段落として表示します。

  • : リンクを作成します。

  • : 画像を表示します。

2. CSSの基本

CSSは、HTML要素の外観を変更するために使います。これにより、フォントサイズや色、配置などを調整することができます。CSSを使ってウェブページを魅力的にする方法を学びましょう。

2.1 CSSの基本構造

CSSは、セレクター、プロパティ、値の組み合わせで構成されています。以下の例を見てみましょう。

css
h1 {
    color: blue;
    font-size: 36px;
}

p {
    font-family: Arial, sans-serif;
    color: green;
}

  • h1: セレクター。h1タグにスタイルを適用します。

  • color: プロパティ。要素の色を設定します。

  • font-size: フォントのサイズを設定します。

  • font-family: フォントの種類を設定します。

2.2 CSSの適用方法

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

  1. インラインCSS: HTMLタグ内に直接CSSを記述する方法です。

html
<h1 style="color: red;">こんにちは！h1>

  1. 内部CSS: