くくりさん
レンタルサーバー「くくり」のキャラクター。(本当は、とあるホスティングサービスの中の人)お仕事用のWebサイトやメールアドレスを初めて作る方向けに、役に立つ情報を発信します!
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
![](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/a4104f4acb1fec47166abda37a0920be.jpeg?w=728&ssl=1)
ホームページはHTMLやCSSで作られていると聞きますが、そもそもHTMLとCSSって何ですか?
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
HTMLとCSSのことですね。
今回は、初心者でもわかるHTMLとCSSの違いと使い方をお伝えしますね。
Contents
HTMLとCSSの違いとは?
![HTMLとCSSはマークアップ言語](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/aomidori0I9A8962_TP_V.jpg?resize=728%2C485&ssl=1)
HTMLとCSSの違いとは何でしょうか?
まず、あなたがいつも見ているホームページやブログなどのウェブページは、HTMLとCSSなどのマークアップ言語からできています。
HTMLとCSSはどちらもマークアップ言語ですが、それぞれ役割があります。
HTMLやCSSなどのマークアップ言語を、簡単に家作りに例えると
HTMLは、ホームページの骨組み(外装)を作ります。
CSSは、ホームページの装飾(内装)を作ります。
![HTML&CSSの説明①](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/b3d416c090a830a19df9883b857ffa00.jpg?resize=728%2C266&ssl=1)
HTMLとは?
HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するためのマークアップ言語です。
例えば、ホームページの各箇所に「ここが見出しですよ、そこは段落ですよ、画像ですよ」とHTMLで位置づけします。
HTMLは、ウェブページの骨組みを決める役割を持っています。
HTML(エイチティーエムエル、 Markup Language)
![HTML&CSSの説明②](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/98df007709741b5071c3cb8a48d11dae.jpg?resize=728%2C199&ssl=1)
CSSとは?
CSS(シーエスエス、Cascading Style Sheets)とは、ウェブページの装飾(スタイル)を指定するためのマークアップ言語です。
CSSは、HTMLと組み合わせて使用します。
HTMLでホームページの見出しや段落、画像の配置がきまると、「この見出しは太字の赤で、そこの段落の背景はグリーンで、画像の大きさは・・・」とCSSで見栄え良くします。
CSSは、HTMLをどのように装飾するか、といったウェブページの装飾を指定する役割を持っています。
CSS(シーエスエス、Cascading Style Sheets)
![HTML&CSSの説明③](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/fe2ebdd5a70b7930e669f490011ad2c7.jpg?resize=728%2C198&ssl=1)
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
![](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/a4104f4acb1fec47166abda37a0920be.jpeg?w=728&ssl=1)
HTMLとCSSの種類とポイントをおさえよう
![HTMLとCSSのポイント](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/aomidoriIMGL1213_TP_V.jpg?resize=728%2C485&ssl=1)
ホームページなどのウェブページは、HTMLやCSSなどのマークアップ言語でできています。
それでは、ホームページのページのソースからHTMLとCSSとはどんなものかを見てみましょう。
右クリックして「ソースの表示」でページのソースを見ることもできますし、【F12】でも見ることが可能です。
ページのソースの見方は「ホームページのソースの見方。初心者でも簡単にソースが書ける方法」の記事でも紹介しています。
![ソースの表示③](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2019/01/123ebba9682adc256a1744d7b7eae6bb.jpg?resize=728%2C402&ssl=1)
上の画像の右側が「ページのソース」になります。
文字やアルファベットや記号だらけですね。
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に装飾の指定をしたので、ブラウザにそのように表示されました。
![](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/a4104f4acb1fec47166abda37a0920be.jpeg?w=728&ssl=1)
こんなふうにHTMLとCSSを使って作られていたんですね。
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
少しでも仕組みがわかると自分が作りたいホームページをつくることができますよ。
同じHTMLなのにCSSでがらりと変わる
![同じHTMLに違うCSSをあてる](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/aomidoriIMGL1192_TP_V.jpg?resize=728%2C485&ssl=1)
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の書き方](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/9c0850a9d30341ee26ad0c78cea6ec37.jpg?resize=728%2C577&ssl=1)
ブラウザ画面ではこのように表示されます。
![HTML&CSSの書き方①](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/40ca500c1adc881fadbe34ff8b69cf8f.jpg?resize=728%2C412&ssl=1)
次にCSSを書いていきます。
このHTMLに2つの違うCSSをあてることで、次のように変わります。
![HTML&CSSの書き方②](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/fac654a73169d4315593c13592a97925.jpg?resize=728%2C410&ssl=1)
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を入れます。
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の書き方④](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/8d250dce08be9e794cb4e5085399cfb2.jpg?resize=728%2C587&ssl=1)
同様に、<style></style>の中に、次のCSSを入れます。
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の書き方⑤](https://i2.wp.com/kukuli-blog.com/wp-content/uploads/2019/03/a7fd9ee5ae249967a0af16f7fa0cc37d.jpg?resize=728%2C585&ssl=1)
このように、同じHTMLであっても、CSSによってデザインがガラリと変わります。
自分好みのホームページをカスタマイズしたいのなら、HTMLとCSSについていろいろ勉強してみるのもいいですよね。
まとめ
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
![](https://i0.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/9eda66c79f64f09870c0b3096b9bb0cf.jpeg?w=728&ssl=1)
HTMLだけでは単なる骨組みですが、CSSで装飾することでいろんな見せ方ができるんですね。
HTMLとCSSの違いや使い方はなんとなくわかりましたが、書き慣れるまでに時間がかかりそうです。
HTMLやCSSなどのマークアップ言語を皆さん使いこなせているのでしょうか?
![](https://i1.wp.com/kukuli-blog.com/wp-content/uploads/2018/07/d624bfd709197e861012edbaf1df32ea.jpg?w=728&ssl=1)
HTMLとCSSなどのマークアップ言語を使いこなせるといろんなことができるようになりますが、そのような専門知識がなくてもホームページを作る方法はあります。
ただ、HTMLとCSSの違いや役割を覚えておくと、自分らしいホームページを作る手助けになりますよ。