HTMLとCSSの違いとは？初心者でもわかるHTMLとCSSの違いと使い方

この記事を書いている人

くくりさん

レンタルサーバー「くくり」のキャラクター。（本当は、とあるホスティングサービスの中の人）お仕事用のWebサイトやメールアドレスを初めて作る方向けに、役に立つ情報を発信します！

こんにちは。ホームページの運営と活用のヒントを分かりやすくお伝えするキャラクターの「くくり」です。

こんにちは。くくりさん。

ホームページはHTMLやCSSで作られていると聞きますが、そもそもHTMLとCSSって何ですか？

はい。

HTMLとCSSのことですね。

今回は、初心者でもわかるHTMLとCSSの違いと使い方をお伝えしますね。

Contents

1 HTMLとCSSの違いとは？
- 1.1 HTMLとは？
- 1.2 CSSとは？
2 HTMLとCSSの種類とポイントをおさえよう
- 2.1 HTMLの種類と例
- 2.2 CSSの種類と例
3 同じHTMLなのにCSSでがらりと変わる
4 まとめ

HTMLとCSSの違いとは？

HTMLとCSSの違いとは何でしょうか？

まず、あなたがいつも見ているホームページやブログなどのウェブページは、HTMLとCSSなどのマークアップ言語からできています。

HTMLとCSSはどちらもマークアップ言語ですが、それぞれ役割があります。

HTMLやCSSなどのマークアップ言語を、簡単に家作りに例えると

HTMLは、ホームページの骨組み（外装）を作ります。

CSSは、ホームページの装飾（内装）を作ります。

HTMLとは？

HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するためのマークアップ言語です。

例えば、ホームページの各箇所に「ここが見出しですよ、そこは段落ですよ、画像ですよ」とHTMLで位置づけします。

HTMLは、ウェブページの骨組みを決める役割を持っています。

HTML(エイチティーエムエル、 Markup Language)

CSSとは？

CSS（シーエスエス、Cascading Style Sheets）とは、ウェブページの装飾（スタイル）を指定するためのマークアップ言語です。

CSSは、HTMLと組み合わせて使用します。

HTMLでホームページの見出しや段落、画像の配置がきまると、「この見出しは太字の赤で、そこの段落の背景はグリーンで、画像の大きさは・・・」とCSSで見栄え良くします。

CSSは、HTMLをどのように装飾するか、といったウェブページの装飾を指定する役割を持っています。

CSS（シーエスエス、Cascading Style Sheets）

HTMLとCSSの違いと役割がわかりましたか？

「HTMLは骨組み」と「CSSは装飾」と、それぞれに役割があることはわかりました。

HTMLとCSSの種類とポイントをおさえよう

ホームページなどのウェブページは、HTMLやCSSなどのマークアップ言語でできています。

それでは、ホームページのページのソースからHTMLとCSSとはどんなものかを見てみましょう。

右クリックして「ソースの表示」でページのソースを見ることもできますし、【F12】でも見ることが可能です。

ページのソースの見方は「ホームページのソースの見方。初心者でも簡単にソースが書ける方法」の記事でも紹介しています。

上の画像の右側が「ページのソース」になります。

文字やアルファベットや記号だらけですね。

HTMLやCSSなどのマークアップ言語を簡単に家作りに例えると、次の通りです。

HTML・・・ホームページの骨組み（外装）
CSS・・・ホームページの装飾（内装）

ホームページを作るために、HTMLとCSSのそれぞれの種類やポイントをおさえておきましょう。

HTMLの種類と例

HTMLの種類

<h1>・・・見出しを置くときのタグ
<p>・・・段落を書くときのタグ
<div>・・・箱を作るときのタグ
<span>・・・文字の一部を装飾するときのタグ
<ol>・・・箇条書きを置くときのタグ

などなど

HTMLの例

【書き方】
<p>CSSを書こう</p>

【意味】
<段落>CSSを書こう</段落>

【ブラウザ表示】
CSSを書こう

HTMLだけなら「<p>CSSを書こう</p>」だけで、「CSSを書こう」がブラウザに表示されます。

今回は、この「<p>CSSを書こう</p>」という段落だけにCSSで装飾します。

この段落だけにCSSで装飾するためには、「<p>CSSを書こう</p>」の<p>に名前をつけます。

HTMLの例（段落に名前をつける）

【書き方】
<p class=”kukuli1”>CSSを書こう</p>

【意味】
<段落名前=”kukuli1”>CSSを書こう</段落>

【ブラウザ表示】
CSSを書こう

「CSSを書こう」という段落に”kukuli1”と名前をつけました。

この段階では、”kukuli1”の名前がついているHTMLをCSSでどのように装飾するかきめていないので、ブラウザの表示は「CSSを書こう」のままです。

CSSの種類と例

CSSの種類

color・・・色を決める
font-family・・・文字のフォントを決める
font-size・・・文字のサイズを決める
font-weight・・・文字の太さを決める
background・・・文字の背景画像や色を決める
などなど

CSSの例

【書き方】
.kukuli1{
font-size:24px;
color:red;
}

【意味】
「kukuli1」という名前の段落の{
フォントサイズは24pxです。
文字の色はredです。
}

【ブラウザ表示】
CSSを書こう

「kukuli1」という名前の段落のフォントサイズを24pxに、文字の色をredに装飾の指定をしたので、ブラウザにそのように表示されました。

ホームページのページのソースを見たとき、たくさんの文字やアルファベット、記号が並んでいて、正直見る気も失せていたんですよね～

こんなふうにHTMLとCSSを使って作られていたんですね。

HTMLとCSSの種類やポイントがわかると、徐々に見慣れてきます。

少しでも仕組みがわかると自分が作りたいホームページをつくることができますよ。

同じHTMLなのにCSSでがらりと変わる

CSSは、HTMLをどのような装飾（スタイル）にするかを決める役割をもつマークアップ言語です。

ということは、HTMLはいろんな着せ替えができるということです。

ここでは、同じHTMLに違うCSSをあててみましょう。

HTMLの書き方は「ホームページのソースの見方。初心者でも簡単にソースが書ける方法」の記事でも紹介していますので、細かい部分は省略させていただきます。

まず、無料で使えるCrescent Eve（クレセントイブ）というテキストエディタを使ってHTMLソースを書いていきます。

今回は、次のHTMLコードを使います。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<title>HTMLソースの書き方</title>
</head>

<body>
<h1>ホームページHTMLソースの書き方</h1>
<p>ホームページを一から作ろう</p>
<p class=”kukuli1″>HTMLを書こう</p>
<p class=”kukuli2″>CSSを書こう</p>
</body>

Crescent Eve（クレセントイブ）というテキストエディタでは、次のように表示されます。

ブラウザ画面ではこのように表示されます。

次にCSSを書いていきます。

このHTMLに2つの違うCSSをあてることで、次のように変わります。

CSSを設定するやり方はいくつかありますが、ここでは、HTMLの</body>の後に書き込んでいく方法をお伝えします。

まず、</body>の後に、<style></style>を追加してください。

このタグ内が、CSSとして認識されます。

<style></style>

<style></style>の中に、次のCSSを入れます。

h1 {
border-left: solid 8px #FFA02A;
background:#FFC778;
color:#FFFFFF;
}
p{
color:black;
}
.kukuli1{
font-size:20px;
color:orange;
}
.kukuli2{
font-size:24px;
color:red;
}

Crescent Eve（クレセントイブ）というテキストエディタでは、次のように表示されます。

同様に、<style></style>の中に、次のCSSを入れます。

h1{
border-bottom: solid 2px #FF027A;
border-left: solid 8px #FF027A;
background:#FFFFFF;
color:black;
}
p{
color:black;
}
.kukuli1{
font-size:20px;
color:orange;
}
.kukuli2{
font-size:24px;
color:red;
}

Crescent Eve（クレセントイブ）というテキストエディタでは、次のように表示されます。