CSSとは”Cascading Style Sheets”の略で、HTMLで作成したWebサイトの見た目を装飾するための言語で、文字の大きさや色、画像のサイズや配置、余白などが設定でき、見た目のデザインを美しく整えることが出来ます。
具体的にはHTMLで書いた文章「<P>pタグの文章</P>」と記述した場合、ブラウザーには「ｐタグの文章」と表示されます。これに「p { color: red; }」というCSSコードを記述して、HTMLの文章に適用させると「Pタグの文章」と赤字で表示します。色の指定「red」での例ですが、文字の太さや大きさも自由に変えることが出来ます。
“Visual Studio Community”にCSSを書いてみる
以前の記事「HTMLファイルの作成」で使った「index.html」のファイルにCSSを書いてみます。
以前使用した「index.html」
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ステーキハウス</title>
<meta name="description"content="日本で一番美味しい「お肉」の店"/>
</head>
<body>
<h1>サービスランチ</h1>
<p>サーロインステーキ300ｇ</p>
<a href="https://www.google.co.jp/"target=”_blank”><img src="images/steak.jpg" alt="ステーキ" /></a>
</body>
</html>
ブラウザー表示
↑↑の「index.html」の<head>内にCSSを書いてみます。
Visual Studio Communityの画面
「index.html」にCSSを追記
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ステーキハウス</title>
<meta name="description"content="日本で一番美味しい「お肉」の店"/>
<style>
p {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<h1>サービスランチ</h1>
<p>サーロインステーキ300ｇ</p>
<a href="https://www.google.co.jp/"target=”_blank”><img src="images/steak.jpg" alt="ステーキ" /></a>
</body>
</html>
ブラウザー表示
「サーロインステーキ300ｇ」の文字が40PXの赤で表示されます。
このように「<p>サーロインステーキ300ｇ</p>」という文字に「p { color: red; font-size: 40px; }」（色：レッド、文字サイズ：40PX）というCSSコードを適用させると、ブラウザーに表示される文字が変化するのです。
CSSの基本的な専門用語
↓↓が今回「index.html」に付加えたCSSコード。図下のCSSコード（ｐから｝まで）のことを「規則セット」（規則とも呼ぶ）といいます。
セレクター（Selector）
先頭にある「p」をセレクターと呼び、HTMLの要素名です。これはCSSでスタイル付けするHTMLの要素を指定するもので、そのときにスタイル付けしたい要素にセレクターを変更します。なお、数種類の要素に同じスタイル付けする場合は「,」(カンマ）で区切ります。【例：p,div{………..}】
セレクターの後には中括弧（{}）で囲む必要があり、中括弧（{）から中括弧（}）を宣言ブロックと呼び、セレクターも含めたものを、規則セットと呼びます。
プロパティ（Property)
HTMLの要素にどのような影響を与えたいのか指定するもので、この例では「color」（色）、「font-size」（文字の大きさ）を指定しています。プロパティには、これ以外にもたくさんの種類があり、与えたい影響を考えてプロパティを選択します。
プロパティ値（Property value)
プロパティ値（値ともいう）は、影響を与えたい種類（色や大きさなど）をプロパティで選択したものに対して、具体的にスタイルを指定するもので、「color: red;」の場合プロパティで文字の色を変えるという指定をして、プロパティ値で赤とスタイル付けしているのです。
宣言（Declaration）
「color: red;」のようにプロパティとプロパティ値の１つの纏まりを宣言といいます。宣言の書き方には決まりがあり、プロパティの右側にコロン（:）を付けてプロパティと値をぶんりします。宣言の最後にセミコロン（;）をつけることで複数の宣言を区切ることが出来ます。
宣言が１つの場合は最後にセミコロン（;）を付けなくてもCSSは機能しますが、基本は宣言の最後にセミコロン（;）を付けます。
CSS規則セットを書く場所（宣言方法）
HTMLで作成したWebページにCSSを適用させるために、規則セットを書く場所は大きく分けて３か所あります。
今回、説明した例のように「index.html」の<head>内にCSSを書く方法を「内部スタイルシート」と呼び、この他に「外部スタイルシート」と「インラインスタイル」があります。
次回は、この３種類の宣言方法について説明します。
