CSSって何するためのものなんでしょう？！

簡単に言えば、webサイトなどのレイアウトや着色、装飾をするための言語なんです！！なので、スタイルシートと呼ばれたりもします。

まずは、CSSの基本構造を見てみましょう！！

セレクター{プロパティー:　値;}

上記が基本的なCSSの書き方になります。CSSを適用する場所を「セレクター」、どのような装飾をするかを示す場所を「プロパティー」、プロパティーにどれくらい、どんな装飾をしたいかを指定する場所を「値」で書きます。値の後ろには「;」セミコロンが付きます。文章でいう「。」みたいな物ですね！

例えば、<p>タグの文章の文字色を赤にしたい場合、

p { color: #ff0000; }

このように書くと<p>タグで書かれた文章が全て赤文字でかかれます。

htmlファイルのタグ内に直接スタイルを書き込むやり方を「インライン」と言います。

属性指定をする為に、style属性を使い、以下のように書きます。

<p style="color: #ff0000;">重要事項</p>

インラインと同じでhtmlファイル内にスタイルを書き込んでいくやり方を「インヘッド」もしくは、「内部参照」と言います。

このやり方は、htmlファイル内のhead要素内に「<style>~~</style>」を記述して、そのstyleタグ内にCSSを書き込んでいきます。

最後に一番一般的で推奨される外部参照のCSSのやり方を説明します。

言葉の通り、外からcssのスタイルを引っ張ってきて使用するということです。なので、自分が作っているhtmlファイルとは、別にcssファイルを作成して、適用したいファイルにリンクさせます。そのやり方は、下記の通りです。

この様にCSSのみのファイルを作る事で、複数ページのサイトやブログを作るときに、このファイルを併用してあげれば、ページ毎にスタイルを作らなくていいですし、もし、修正したい時もCSSファイルを修正するだけで、適用している全てのファイルも一瞬で直せるのでこのやり方が推奨されます。

CSSを書く際に注意しなければ行けないのが、適用優先度だったりするのですが、それは、次の記事で書かせて頂きます。