CSSとは？これを読めば初心者でも必ずCSSが書ける！
web開発
2016/06/06
web開発
WEBプログラミングを学習し始めると、HTMLの次にCSSを学習するというのが一般的です。
今回の記事は、HTMLは大体理解できたけど、CSSはまだ全くわからないという人のために、「CSSとは？」「CSSって何なの？」という疑問を解消して頂ける内容となっています。
本記事の特徴は、「プログラミングの学習サイトなどは、専門用語が多く使われていて分かりにくい」と感じている人でも理解できるように専門用語を使わずに解説していることです。
また、最後には自分でCSSを記述して、ブラウザに表示させるというCSS体験もご用意しました。この記事を読み終えた頃には「CSSとは？」という疑問は無くなっているでしょう。ぜひ最後までお読みください。
CSSとは？（初心者向け）
この章では、「CSSとは？」について専門用語を使わずに画像と共に解説していきます。
ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。
CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。
※HTMLやタグについては「HTMLとは？これを読めば初心者でも必ずHTMLが書ける！」をお読みください。
わかりやすいように画像で見ていきます。図１はHTMLだけを使ったブラウザです。そこにCSSを付け加えることで、図２のようにすることができます。
[図１]:HTMLだけの場合
[図２]:HTMLにCSSを付け加えた場合
つまり、CSSとは、HTMLに色や大きさや背景などを加えて見栄えを良くするものということになります。
CSSの書き方
この章ではCSSの書き方を紹介します。CSSの書き方はとてもシンプルで簡単です。それではさっそく解説していきます。
CSSはHTMLのタグの「何を」「どうするのか」を記述しています。
この関係性を図にまとめると以下のようになります。
また、この図に登場する、CSSを適応したいタグ（上図ではh1）のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「値」と呼びます。（下図参照）
プロパティと値は「{ }」で囲んであげることにだけ注意してください。そこだけ気を付ければ、CSSの書き方は難しくはないでしょう。
CSSを体験しよう！
以上から、CSSとは何なのかについておおよそ理解できてきたと思います。
ここからは、実際にCSSを記述してもらい、ブラウザに結果を表示させてみるということを体験していただきます。
簡単なのでぜひ以下の手順に沿ってCSSを体験してみて下さい。
【手順】
１．Windowsに標準搭載されているメモ帳を開きます。(macの場合はsublime textというエディタがオススメです。こちらからダウンロードしてください。)
２．まずは以下のようなHTMLをメモ帳(sublime text)に記述します。
<html>
<head>
<link rel=”stylesheet”href=”test.css”>
</head><body>
<h1>CSSを体験しよう！</h1><p>CSSでは、タグ・プロパティ・値を記述します。</p>
</body>
</html>
※<head>にある<link rel=”stylesheet”href=”test.css”>は、「test.css」というCSSファイル（後で作成します）をこのHTMLファイルに埋め込みますという宣言です。<link rel=”stylesheet”href=”ファイル名”>の「ファイル名」のところに読み込みたいCSSファイルを記述します。
３．左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。（sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。）
４．すると、以下の画面が出てくるので、
①「デスクトップ」をダブルクリック
②ファイル名を「sample.html」にする（拡張子が「.html」であればファイル名は何でもかまいません。）
③ファイルの種類を「すべてのファイル」にする。（sublime textの場合はここは無視して大丈夫です。）
④「保存」をクリック
５．すると、保存先であるデスクトップに下の画面が表示されます。（※Google Chromeではなく、Internet Exploreなどブラウザのアイコンで表示される場合もあります。）
これをダブルクリックすると…
ブラウザに自分で記述したHTMLが表示されているのが確認できました。
次はいよいよCSSファイルを作成して、このHTMLの見栄えを変えていきます。
６．再びメモ帳を開き、先ほど作成したHTMLの見栄えを変更するコードを記述してみましょう。
※background-colorプロパティは、文字に背景を付けるためのプロパティです。
※font-sizeプロパティは文字の大きさを指定するためのプロパティです。
７．先ほどと同様に「ファイル」⇒「名前を付けて保存」を選択します。（sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。）
８．すると、以下の画面が出てくるので、
①「デスクトップ」をダブルクリック
②ファイル名を「test.css」にする（拡張子が「.css」であればファイル名は何でもかまいません。）
③ファイルの種類を「すべてのファイル」にする。（sublime textの場合はここは無視して大丈夫です。）
④「保存」をクリック
９．すると、保存先であるデスクトップに下のようなCSSファイルが作成されます。
１０．そしてもう一度、HTMLファイルを作成したときにデスクトップに現れたブラウザを表示してみましょう。以下をダブルクリックします。
１１．すると、先ほど記述したCSSが反映されました。
いかがでしたか？今回で、CSSとは？という疑問は解消されたのではないでしょうか。
udemyでも多くのCSSに関する講座がありますのでぜひ学習してみてください。
