CSSとは？初心者にもわかりやすくCSSの書き方を解説！

WEBプログラミングを学習し始めると、HTMLの次にCSSを学習するというのが一般的です。

今回の記事は、HTMLは大体理解できたけど、CSSはまだ全くわからないという人のために、「CSSとは？」「CSSって何なの？」という疑問を解消して頂ける内容となっています。

本記事の特徴は、「プログラミングの学習サイトなどは、専門用語が多く使われていて分かりにくい」と感じている人でも理解できるように専門用語を使わずに解説していることです。

また、最後には自分でCSSを記述して、ブラウザに表示させるというCSS実践の機会もご用意しました。この記事を読み終えた頃には「CSSとは？」という疑問は無くなっているでしょう。ぜひ最後までお読みください。

INDEX

CSSとは？初心者向けに解説！
CSS（スタイルシート）で出来ることは？
CSSセレクタの指定方法
CSSを実際に書いてみよう！
知っておきたい、CSS の基本プロパティとは？

CSSとは？初心者向けに解説！

CSSとはWebページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語です。読み方は「シーエスエス」です。

一般的にWebサイトはHTML（エイチティーエムエル）という言語で記述されており、これにスタイルシートを記述する言語であるCSSを適用することで、私達が普段見ているWebサイトが構成されています。

HTMLファイルにスタイル（CSSの記述）を含めることも可能ですが、そうしないのはホームページの文字や背景などを、ページ内で統一するためです。
例えば、ある企業のホームページにトップページと商品ページがあったとします。このとき、それぞれのページでHTMLを記述しますが、同じような見た目にしたい場合、2つのHTMLファイルに、デザインに関する同様の記述をする必要があり、余分な手間がかかります。

そこで見た目に関する共通の記述をCSSファイルとして記述し、それをHTMLに適用することで、複数のHTMLファイルに一貫したデザインを適用できます。

こうすることで、記述したソースコードが読みやすくなりますし、デザインを修正・変更したくなったときに、一括でメンテナンスができるようになります。

HTMLは <title> のように「< >」で囲まれた、「タグ」と呼ばれる部品が集まって構成されています。 <title>のタグはのように「/」を入れたタグとペアとなっており、それぞれ「開始タグ」「終了タグ」といいます。
タグで挟まれた部分を「要素」といい、要素をタグで挟むことで目印をつけています。

とすることで、『「HTMLの書き方」というタイトル（title）だ』ということを意味づけています。

※HTMLやタグについては「HTMLとは？初心者向けにタグの種類と使い方の基本を解説！」をお読みください。

図1はスタイルを記述せずにHTMLだけを記述したもの、図2はCSSでスタイル適用したものです。

[図１]:HTMLだけの場合

[図２]:HTMLにCSSを付け加えた場合

つまり、CSSとは、HTMLに色や大きさや背景などを加えて見た目を良くするものということになります。

＼文字より動画で学びたいあなたへ／

Udemyで講座を探す＞

CSS（スタイルシート）で出来ることは？

CSSはWebページに統一のデザインを適用するために記述します。

「sample_style1.css」という名前のスタイルシートにCSSを記述した場合、目的のHTMLファイルに「sample_style1.cssを適用する」記述を行うことで、そのデザインを適用できます。

2つ以上のスタイルシートを使いたい場合は、別に「sample_style2.css」というCSSファイルを用意してデザインの記述をしておけば、HTML側で読み込むCSSファイルの記述を書き換えるだけで、「sample_style1.css」と「sample_style2.css」を使い分けることができます。

CSSでは、文字の色や大きさ、フォント、背景色の変更などを記述します。

さらに、

文字や画像を左寄せにするか、中央揃えにするか
2段組みにするか
文字と文字の間隔はどれくらいにするか

等といったレイアウトの調整もCSSで行います。

また、CSSでアニメーションの記述も可能です。本格的に動的なWebサイトを作る場合はJavaScriptというスクリプト言語を使うことになりますが、

マウスがボタンの上に置かれたときに、ボタンの色を変更する
ラジオボタンやチェックボックスをユーザのクリックにあわせて表示する
数秒ごとに画像を切り替える

といった簡単なアニメーションならCSSの記述で行うことができます。

また、この図に登場する、CSSを適応したいタグ（上図ではh1）のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「値」と呼びます。（下図参照）

プロパティと値は「{ }」で囲んであげることにだけ注意してください。そこだけ気を付ければ、CSSの書き方は難しくはないでしょう。

CSSの文法についてより詳しく知りたい方は「図解で簡単CSSの書き方4つが初心者でも5分で理解できる！」を合わせてご覧ください

CSSセレクタの指定方法

セレクタは、プロパティ（例えば文字の色や大きさ）と値（赤や1インチなどプロパティの具体的な値）を適用する対象を記述するものです。

セレクタには要素名を記述することになります。

例えば、HTMLには見出しを定義するための要素としてh1、h2、…、h6があります。

h1のデザインを指定したい場合は、

のように、プロパティと値を「：」コロンで区切ります。

1つのセレクタに複数のプロパティと値を適用することもでき、

のように「；」セミコロンで区切ります。

同様に複数のセレクタに同じプロパティと値を適用することもでき、これをグループ化といいます。

セレクタのグループ化は「,」カンマで区切ります。

以上のようなHTMLがあった場合、<section>の中に<h2>と<ul>要素が含まれています。

このとき<section>を親要素、<h2>と<ul>を子要素といいます。

子要素のスタイルを指定する場合は

のように記述します。

のように「*」を使用することで、全ての要素をセレクタに指定することもできます。

CSSを実際に書いてみよう！

ここまでの解説で、CSSとは何なのかについておおよそ理解できてきたと思います。

ここからは、実際にCSSを記述してもらい、ブラウザに結果を表示させてみるということを体験していただきます。
簡単なのでぜひ以下の手順に沿ってCSSを書いてみてください。

【手順】

1．Windowsに標準搭載されているメモ帳を開きます。(macの場合はsublime textというエディタがオススメです。こちらからダウンロードしてください。)

2．まずは以下のようなHTMLをメモ帳(sublime text)に記述します。

&lt;html>
&lt;head>
&lt;link rel=”stylesheet”href=”test.css”>
&lt;/head>
&lt;body>
&lt;h1>CSSを体験しよう！&lt;/h1>
&lt;p>CSSでは、タグ・プロパティ・値を記述します。&lt;/p>
&lt;/body>
&lt;/html>

<html>

<head>

</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ファイルを記述します。

3．左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。（sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。）

4．すると、以下の画面が出てくるので、

①「デスクトップ」をダブルクリック

②ファイル名を「sample.html」にする（拡張子が「.html」であればファイル名は何でもかまいません。）

③ファイルの種類を「すべてのファイル」にする。（sublime textの場合、ここは無視して大丈夫です。）

④「保存」をクリック

5．すると、保存先であるデスクトップに下の画面が表示されます。（※Google Chromeではなく、Internet Exploreなどブラウザのアイコンで表示される場合もあります。）

これをダブルクリックすると…

ブラウザに自分で記述したHTMLが表示されているのが確認できました。

次はいよいよCSSファイルを作成して、このHTMLの見た目を整えていきます。

6．再びメモ帳を開き、先ほど作成したHTMLの見た目を変更するコードを記述してみましょう。

※background-colorプロパティは、文字に背景色を付けるためのプロパティです。

※font-sizeプロパティは文字の大きさを指定するためのプロパティです。

7．先ほどと同様に「ファイル」⇒「名前を付けて保存」を選択します。（sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。）　

8．すると、以下の画面が出てくるので、

①「デスクトップ」をダブルクリック

②ファイル名を「test.css」にする（拡張子が「.css」であればファイル名は何でもかまいません。）

③ファイルの種類を「すべてのファイル」にする。（sublime textの場合、ここは無視して大丈夫です。）

④「保存」をクリック

9．すると、保存先であるデスクトップに下のようなCSSファイルが作成されます。

10．そしてもう一度、HTMLファイルを作成したときにデスクトップに現れたブラウザを表示してみましょう。以下をダブルクリックします。

11．すると、先ほど記述したCSSが反映されました。

知っておきたい、CSS の基本プロパティとは？

ここからは、代表的なプロパティをご紹介します。プロパティの値もすべては紹介しきれませんので、詳しくはリファレンスをご参照ください。

プロパティ	color	要素で使用される文字の色を設定
値	カラーネーム	red、yellow、greenなど
	16進数表示	red、green、blueの明るさを、それぞれ2桁（00～ff）の16進数で表す例：#0afb12
	RGB表示	rgb( r, g, b ) RGBを0～255の10進数で表す例：rgb( 0, 0, 255 )
サンプルコード	h1 { color : red } h1{ color : #123abc }

プロパティ	font-size	要素内で使用されるフォントサイズを設定
値	絶対単位	in：インチ mm：ミリメートル　など例：120in
	相対単位	em：親要素の文字サイズ px：ピクセル　など例：1em、100px
	キーワード	smaller：親要素よりも1段階小さい larger：親要素よりも1段階大きい
サンプルコード	h1{ font-size : 10in } h1{ font-size: smaller }

プロパティ	text-align	文字列の行揃えを設定
値	left	左揃え
	right	右揃え
	center	中央揃え
	justify	ジャスティファイ
サンプルコード	h1{ text-align: left }

プロパティ	line-height	行の高さを設定する
値	実数値	例：20px
サンプルコード	p{ line-height; 20px } p{ font-size: 8px; line-height: 2 ; }　 →font-sizeの2倍の値になる

詳しくは「CSS line-heightの書き方3つを初心者向けに図で解説」をご覧ください

プロパティ	background-color	背景色を設定
値	色コードカラーネーム	colorを参照
サンプルコード	h1{ background-color: lightblue }

HTMLではそれぞれの要素がボックスと呼ばれる領域を生成しています。

上の図2で言えば、水色になっている部分はh1の要素が管理するボックス領域です。

ボックスはボーダー、パディング、内部領域で構成されており、ボックスとボックスの間にはマージンが設定されています。

これらの操作をするのが、margin、border、paddingです。

プロパティ	border	ボックスの境界線の設定
プロパティの詳細	border border-*	ボーダーの設定をする書式はborder: [線幅] [スタイル] [色]; *部分にtop, bottom, left, rightを入れることで個別に設定可能
	border-width border-*-width	ボーダーの幅を設定する
	border-style border-*-style	ボーダーのスタイルを設定する none, dotted, solidなどのスタイルがある
	border-color border-*-color	ボーダーの色を設定する
サンプルコード	h1{ border: 5px dotted blue } h1{ border-top-style: solid }

プロパティ	margin margin-*	他のボックスとの間隔を設定する *部分にtop, bottom, left, rightが入れることで個別に設定可能
値	実数値	例：5px
サンプルコード	h1, ul { margin: 20px } →h1とulのマージンを20pxにする

プロパティ	padding padding-*	パディング部分の設定をする *部分にtop, bottom, left, rightが入れることで個別に設定可能
値	実数値	例：2px
サンプルコード	h1{ padding: 10px } h1{ padding-bottom: 5px }

詳しくは「CSS paddingが初心者でもわかる！＋αの知識も紹介」をご覧ください

プロパティ	width	内部領域の幅を設定する
値	実数値	例：3px
サンプルコード	h1{ width: 100px }

プロパティ	height	内部領域の高さを設定する
値	実数値	例：4px
サンプルコード	h1{ height: 50px }

プロパティ	float	ボックスの浮動化を設定するボックスの配置を設定する
値	none	ボックスの配置を指定しない
	left	ボックスを左側に配置する
	right	ボックスを右側に配置する
サンプルコード	section img { float: left; }