HTMLだけでは黒色の文字が並ぶ質素な見た目になる。これを装飾するのがCSS。
head要素からCSSを呼び出す
CSSファイルを呼び出すためには、head要素内に以下のような記述をします。
<link rel=”stylesheet” href=”○○○.css”>
link要素
link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載する。rel属性、href属性と一緒に使用するのが一般的。
rel属性
rel属性はRelation（関係）の略で、参照先のファイルが現在のファイルとどのような関係であるのかを表す。属性値には決められたキーワードを記載する。（例：”stylesheet”というキーワードを指定することでCSS（Cascading Style Sheets）を参照すること）
href属性
href属性はHyper Referenceの略で、参照先の外部ファイルの場所を明らかにする。
属性値にはファイルの場所、ファイル名を記載する（例：”○○○.css”）。
CSSの基本的な記述
body {
color : #fff;
}
セレクタ
上記の「body」にあたるもの。CSSによる装飾を、どのHTMLのどの部分に適用するかを選択するための記述。
プロパティ
上記の「color」にあたるもの。セレクタで指定したHTMLの「何を変えるのか」を選択するための記述。色やフォント、文字の大きさ、枠など。colorは文字の色を変える。記載は順不同。
値
プロパティで設定する内容を決めるための記述。文字色を決めるプロパティであれば、値でどのような色にするのかを決める。
※プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）をつける。
いろいろ指定してみる
● colorプロパティ
h1 {
color : #fff;
}
この場合は h1要素の文字色を白くする。
指定方法：whiteをカラーコードで表記すると#ffffffとなる（#fffでも可）。
●font-sizeプロパティ
font-sizeプロパティとは文字の大きさを指定するプロパティ。
p {
font-size : 24px;
}
＊remという指定方法もある。
「root em」の略でルート要素（html 要素）の font-size を基準とする単位。原則的にはルート要素のフォントサイズの既定値は 16px なので、ルートの font-size を弄っていない場合は 1rem=16px となる。
class属性とclassセレクタ
<p> おはよう </p>
<p> こんにちは </p>
<p> こんばんは </p>
「おはよう」だけ装飾したい場合はclass属性とclassセレクタを使う。
class属性
<p class = “first-text”>
class属性：HTML要素に対して個別に名前を指定することができる属性（上記：class）
class属性の属性値はclass名という（上記：”first-text”）
<p class = “first-text”> おはよう </p>
<p> こんにちは </p>
<p> こんばんは </p>
classセレクタ
HTMLで指定したclass名をCSSのセレクタとして使用する。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述する。
.first-text {
color: blue;
}
「おはよう」となる。
id属性とidセレクタ
class属性とclassセレクタ以外にも、特定の要素を装飾する方法がid属性とidセレクタ。
id属性
<p id = “second-text”>
id属性：HTML要素に対して個別に名前を指定することができる属性（上記：id）
id属性の属性値はid名という（上記：”second-text”）
※1つのページ内で、同じid名を複数のHTML要素に付与しない！
<p class = “first-text”> おはよう </p>
<p id = “second-text”> こんにちは </p>
<p> こんばんは </p>
classセレクタ
HTMLで指定したid名をCSSのセレクタとして使用する。idセレクタを指定する場合は、「#id名」の形でCSSファイルに記述する。
#second-text {
color: red;
}
「こんにちは」となる。
テキストの一部にCSSを指定
テキストの一部だけに、CSSを指定する要素が、span要素。
<p class = “first-text”> おはよう </p>
<p id = “second-text”> こんにちは </p>
<p> こん<span class = “red”>ばん</span>は </p>
classセレクタで .redと記載すると「こんばんは」となる。
最後に：idとclassの使い分け
例：
- JavaScriptをかける目印として使う
- ページ内リンクのアンカーとして使う
- CSSの詳細度（優先度）はclassよりもidの方が高い（その特徴を利用して使用する）
基本的にCSSによるデザインにはclassを使い、idはスタイルには絡まないただの目印とする。
コメント