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

HTMLとCSSの違い
この記事を書いている人

くくりさん

 

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

 

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

 

女性起業家
こんにちは。くくりさん。

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

 

くくり
はい。

HTMLとCSSのことですね。

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

 

 

HTMLとCSSの違いとは?

HTMLとCSSはマークアップ言語

 

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

 

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

 

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

 

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

 

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

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

 

HTML&CSSの説明①

 

 

HTMLとは?

 

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

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

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

 

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

HTML&CSSの説明②

 

 

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のポイント

 

ホームページなどのウェブページは、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でがらりと変わる

同じ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(クレセントイブ)というテキストエディタでは、次のように表示されます。

HTML&CSSの書き方

 

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

HTML&CSSの書き方①

 

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

 

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

HTML&CSSの書き方②

 

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

 

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

 

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

 

 

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

<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(クレセントイブ)というテキストエディタでは、次のように表示されます。

HTML&CSSの書き方④

 

同様に、<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(クレセントイブ)というテキストエディタでは、次のように表示されます。

HTML&CSSの書き方⑤

 

このように、同じHTMLであっても、CSSによってデザインがガラリと変わります。

 

自分好みのホームページをカスタマイズしたいのなら、HTMLとCSSについていろいろ勉強してみるのもいいですよね。

 

 

まとめ

 

くくり
HTMLとCSSの違いや使い方などをご紹介しましたが、どうですか?
女性起業家
はい。

HTMLだけでは単なる骨組みですが、CSSで装飾することでいろんな見せ方ができるんですね。

HTMLとCSSの違いや使い方はなんとなくわかりましたが、書き慣れるまでに時間がかかりそうです。

HTMLやCSSなどのマークアップ言語を皆さん使いこなせているのでしょうか?

くくり
そうですね。

HTMLとCSSなどのマークアップ言語を使いこなせるといろんなことができるようになりますが、そのような専門知識がなくてもホームページを作る方法はあります。

ただ、HTMLとCSSの違いや役割を覚えておくと、自分らしいホームページを作る手助けになりますよ。

 


『WEBはちょっと苦手。でも、簡単リーズナブルにホームページを作りたい!』と思うあなたへ▼▼▼

くくり