【初心者向け】CSSとは？CSSの基本をわかりやすくまとめ

CSSとは？

CSSとは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略称です。
Webウェブページのスタイルを指定するための言語になります。

つまり、HTMLにて表示させた情報を装飾するために使用します。

⇒ HTMLとは？はこちら

なぜCSSを使用するのか？

HTMLタグを使ったHTMLファイルは、下記のようなテキストで表示されます。

See the Pen
HTML基本構造 by homari (@homariweb)
on CodePen.

かなりシンプルな普通のテキストですね。そこで、文字の色を変えたり、文字大きさを変えたりなど、見やすいようにHTMLタグを装飾していくのがCSSの役割です。

では、どのようにCSSで装飾させていくのかを説明します。

CSSの書き方

CSSは「どのHTMLタグ」の「何を」「どのようにするか」で記述します。

まずは簡単に、下記のHTMLタグで囲ったテキストをCSSで装飾してみます。

<h1>見出し</h1>
<p>テキストテキストテキスト</p>

今回は、この<h1>タグで囲んだ「見出し」というテキストの文字色を赤に変更します。

h1 {
　color: #ff0000;
}

・「どのHTMLタグ」＝ h1（要素）
・「何を」＝ color（文字色）
・「どのようにするか」= #ff0000（赤色）

というわけで、<h1>タグで囲ったh1要素の「見出し」の文字色が赤色に変わりました。

See the Pen
見出しのテキストを赤色に by homari (@homariweb)
on CodePen.

ちなみに、それぞれを下記のように「セレクタ」、「プロパティ」、「値」と呼びます。

では、上記のタグに更にCSSを追加で指定してみます。

h1 {
　color: #ff0000;
　background: #00ff00;
}

h1要素に、CSSプロパティ「background（背景色）」の値を「#00ff00（青色）」にする記述を追加しました。

p {
　font-size: 20px;
}

更に、p要素に「font-size（文字の大きさ）」を「20px」にする記述を追加します。

See the Pen
CSSで変更 by homari (@homariweb)
on CodePen.

それぞれ適応されましたね。

このように、CSSではタグに対して、プロパティと値を指定していくことで、好きなように見た目を変化させることが出来ます。