HTMLとCSSとは？未経験者でもわかる超入門ガイド

コラム

2024.12.30

記事内に広告が含まれています。

インターネットで見ているWebサイトやブログ、ショッピングサイト――これらはすべて「HTML」と「CSS」を使って作られています。

この記事では、プログラミング未経験の方でも理解できるように、HTMLとCSSの基本とその役割についてわかりやすく解説します！

HTMLとは？

Webサイトの「骨組み」を作るもの

HTML（エイチティーエムエル）は、「HyperText Markup Language」の略で、Webページの「構造」を作るための言語です。
簡単に言うと、Webサイトの骨組みや内容そのものを作るのがHTMLです。

例えば：

見出し
文章
画像
リンク

これらはすべてHTMLを使って作られます。

HTMLの基本例

以下のコードで、簡単なWebページを作成できます：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのHTML</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これが私の初めてのWebページです。</p>
</body>
</html>

<h1>：大きな見出しを作るタグ
<p>：段落を作るタグ

これをブラウザで開けば、簡単なWebページとして表示されます！

CSSとは？

Webサイトの「デザイン」を整えるもの

CSS（シーエスエス）は、「Cascading Style Sheets」の略で、HTMLで作られた構造に色やレイアウトを加えるデザインツールです。
言い換えると、HTMLが「骨組み」なら、CSSはその骨組みを「見栄えよく整える服」のような役割です。

例えば：

背景色
文字の色やサイズ
レイアウト（横並びや中央揃え）

CSSの基本例

以下のコードで、HTMLにデザインを加えます：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのCSS</title>
    <style>
        body {
            background-color: #f0f8ff; /* 背景色を薄い青に */
            font-family: Arial, sans-serif; /* フォントを指定 */
        }
        h1 {
            color: #333; /* 見出しの色を濃いグレーに */
            text-align: center; /* 中央揃え */
        }
        p {
            color: #555; /* 段落の文字色を薄いグレーに */
            line-height: 1.6; /* 行間を広くする */
        }
    </style>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これが私の初めてのWebページです。</p>
</body>
</html>