CSSの基本について

CSSとは「Cascading Style Sheets」の略で、文書の見た目を装飾するための言語です。CSSファイルを保存するときの拡張子は「.css」です。

試しにCSSを切ってみると違いがわかると思います。すごい白紙のようになります。

CSSを適用させる方法はいくつかあります。1つ目はheadタグ内でcssファイルを読み込ませる方法です。その場合以下のように書きます。

個人的にこれが1番多い気がします。その理由も大方ついていて、例えばXBP.cssというファイル1つさえあれば複数のhtmlに読み込ませることができ、一括でファイル管理ができるからです。

2つ目はCSSファイルを作らずにheadタグ内にstyleタグを使って直接書き込む方法です。これは他のHTMLに反映されないので私は特定のページだけを変えたいときに使ってます。

3つ目はタグ内に直接書き込む方法です。これは手間がかかりますがここのh1タグだけデザインを変えたい!というときに使えます。

CSSにも文法というものがあります。以下を例に見てみます。

h1 { color : red ; }

これがCSSの基本文法です。これはh1タグの色を赤にする指示です。まずh1がセレクターというもので変更する対象を指定します。他にもidやclassを指定できたり応用するとolタグ内のliタグやid,classを指定することができます。

次にプロパティーです。これはなにを変えるかです。この例文の場合は色を選択しています。他にもサイズや余白なども変えられます。最後に：を打っておきます。

最後は値です。これはプロパティーを何に変えるかを指示します。ここではわかりやすくredとしていますが#をつけて16進数で選ぶこともできます。なんならそのほうが多いです。これは最後に;を打ちます。