CSSとは?‥HTMLと組み合わせて使用される言語で、HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対し、CSSではそれらをどのように装飾するかを指定するものである。
要はCSSはページの見た目を整える役割で使われるのである。
CSSの主な書き方
①head要素内に<style>で書く。→どこの見た目を整えるのかの指定(この例では「h1」にする)。
→その次に文字の色を赤に変更したい場合は{color: red}とする。
因みにどこに(この場合は「h1」)を『セレクター』、どのような部分(この場合は「color: red;」)を『プロパティ』と呼ぶ。
しかし、これでは記述が長くなって、見にくくなる可能性が高くなる。
②<link>を使って、rel属性(リンク先に他の文書に対する関係を示すための属性)、その次にhref属性(リンク先を指定する属性))を適切なファイル名、URLをそれぞれに書く。
→VS CODEをしようした場合href属性のファイル名にマウスをホバー(かざす)と、command+クリックでそのファイルに行ける、という指示が出る。
→ファイルが存在しない場合、新しくファイルを作ることができ、コードを書いているページとは別にhref属性名の新規ページが作られる。
→上記の例を用いる場合、h1{color: red;}と同じく書けば、①と同じく対象部分での文字色が赤色に変更されているのがブラウザ上でわかる。
(※redと書かれている部分を「rgb」と置き換えると、青と赤と緑の三色を混ぜて色を表現することができる。)
因みに、セレクターは後に書かれたプロパティを優先的に表示させる。
また、colorを16進数で書きたい場合、color:の後に#(16進数のそれぞれの数字)を使う。
デベロッパーツールとは?‥書かれたコードがブラウザがどう解釈しているのか可視化できるツール。
macOSの場合、command+option+Iのショートカットで起動することができる。