CSSの基本について
10/2 2023
デザイン演習Ⅰ・Ⅱ
CSSとは?
CSSとは「Cascading Style Sheets」の略で、文書の見た目を装飾するための言語。CSSファイルを保存するときの拡張子は「.css」。 試しにCSSを切ってみると違いがわかる。すごい白紙のようになる。
CSSを適用させる方法
CSSを適用させる方法はいくつかある。1つ目はheadタグ内でcssファイルを読み込ませる方法。その場合以下のように書く。
- <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進数で選ぶことも可能。むしろそのほうが多い。これはいちばん最後に;を打つ必要がある。