ウェブサイトの仕組みを知ろう！HTMLとCSSの基本

ウェブサイトを作るには、基本となる「HTML」と「CSS」という2つの言語を理解することが大切です。本記事では、子供から大人まで分かりやすく、ウェブサイトの仕組みやHTML・CSSの役割について解説していきます。

1 ウェブサイトの仕組みとは？
2 HTMLとは？
- 2.1 HTMLの基本構造
  - 2.1.1 HTMLタグとは？
3 CSSとは？
- 3.1 CSSの基本
- 3.2 CSSの適用方法
4 HTMLとCSSを組み合わせてみよう！
5 まとめ

ウェブサイトの仕組みとは？

ウェブサイトは、インターネット上で表示されるページのことです。私たちが普段使っているGoogleやYahoo!、YouTubeなどのサイトも、すべてウェブサイトの一種です。

ウェブサイトは、主に以下の3つの要素で構成されています。

HTML（エイチティーエムエル） – ウェブページの構造を作る言語
CSS（シーエスエス） – ウェブページのデザインや見た目を整える言語
ブラウザ – ウェブサイトを表示するソフト（ChromeやSafariなど）

この3つが連携して動くことで、私たちはウェブサイトを閲覧することができるのです。

HTMLとは？

HTML（HyperText Markup Language：ハイパーテキスト・マークアップ・ランゲージ） とは、ウェブページの構造を作るための言語です。簡単に言うと、HTMLはページの「骨組み」を作る役割を持っています。

例えば、以下のようなものをHTMLで作ることができます。

見出し
段落
リスト
画像
リンク

HTMLの基本構造

HTMLのコードは、次のような基本構造になっています。

<!DOCTYPE html>
<html>
<head>
    <title>私の初めてのウェブページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはHTMLの基本的な例です。</p>
</body>
</html>

HTMLタグとは？

HTMLでは「タグ」と呼ばれるものを使って文章をマークアップ（構造化）します。

<h1>〜<h6>：見出し（大きさが異なる）
<p>：段落
<a>：リンク
<img>：画像
<ul> <ol> <li>：リスト

例えば、<h1>タグを使うと、大きな見出しを作ることができます。

<h1>これは見出しです</h1>

CSSとは？

CSS（Cascading Style Sheets：カスケーディング・スタイル・シート） とは、HTMLで作られたページの見た目を整えるための言語です。

例えば、以下のようなデザインを変更できます。

文字の色や大きさ
背景の色
レイアウト（位置や余白）

CSSの基本

CSSは、HTMLの要素にデザインを適用するために使います。基本的な書き方は次のようになります。

h1 {
    color: blue;
    font-size: 24px;
}

上記のコードは、<h1> タグの文字を青色にし、サイズを24pxにする設定です。

CSSの適用方法

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

1. HTML内に直接書く（インラインCSS）

<h1 style="color: red;">赤い見出し</h1>

2. HTMLの`<style>`タグ内に書く（内部CSS）

<head>
<style>
h1 {
    color: blue;
}
</style>
</head>

3. 外部ファイルとして読み込む（外部CSS）

<head>
    <link rel="stylesheet" href="style.css">
</head>

そして、style.cssファイルには以下のように記述します。

h1 {
    color: green;
}

このように、CSSを使うことで、ウェブページの見た目を自由にカスタマイズできます。

HTMLとCSSを組み合わせてみよう！

HTMLとCSSを組み合わせることで、シンプルなウェブページを作ることができます。

<!DOCTYPE html>
<html>
<head>
    <title>カラフルなウェブページ</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>ウェブサイトの仕組みを知ろう！</h1>
    <p>これはHTMLとCSSを組み合わせたページです。</p>
</body>
</html>

See the Pen HTMLとCSSを組み合わせてみよう！ by yuki (@yuki_web) on CodePen.

このコードでは、背景色をグレーにし、見出しを青色・中央揃えに、段落を緑色・18pxのサイズに設定しています。