Portfolio

CSSとは?

CSSとは「Cascading Style Sheets」の略で、文書の見た目を装飾するための言語。CSSファイルを保存するときの拡張子は「.css」。 試しにCSSを切ってみると違いがわかる。すごい白紙のようになる。


CSSを適用させる方法

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

  1. <link rel="stylesheet" href="./css/○○.css">

個人的にこれが1番多い気がする。その理由も大方ついていて、例えばXBP.cssというファイル1つさえあれば複数のhtmlに読み込ませることができ、一括でファイル管理ができるからだ。
2つ目はCSSファイルを作らずにheadタグ内にstyleタグを使って直接書き込む方法。これは他のHTMLに反映されないので私は特定のページだけを変えたいときに使っている。
3つ目はタグ内に直接書き込む方法。これは手間がかかりますがここのh1タグだけデザインを変えたい!というときに使える。


CSSの文法

CSSにも文法というものがある。以下を例に見てみよう。
h1 { color : red ; }

これがCSSの基本文法だ。これはh1タグの色を赤にする指示である。まずh1がセレクターというもので変更する対象を指定する。他にもidやclassを指定できたり応用するとolタグ内のliタグやid,classを指定することができる。
次にプロパティーだ。これはなにを変えるかである。この例文の場合は色を選択している。他にもサイズや余白などが変えられる。プロパティーを書き込んだ後:を打つ必要がある。
最後は値。これはプロパティーを何に変えるかを指示している。ここではわかりやすくredとしているが#をつけて16進数で選ぶことも可能。むしろそのほうが多い。これはいちばん最後に;を打つ必要がある。