【初心者向け】CSSとは?CSSの基本をわかりやすくまとめ
2021.09.27
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ではタグに対して、プロパティと値を指定していくことで、好きなように見た目を変化させることが出来ます。