本日は、CSSの基礎の部分を記事にまとめてみたい
と思います。
CSS
ブラウザに映す情報を決める言語がHTML。
HTMLに装飾を加えるための言語がCSS。
HTMLで作った骨組みに肉付けをしていく感じ。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テストサイト</title>
</head>
<body>
<h1>
見出し
</h1>
<p>
段落①
</p>
<p>
段落②<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>
上記のHTMLにCSSで装飾していく。
head要素からCSSを呼び出す
まず、上記のファイルにCSSファイルを呼び出す記述を行う。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テストサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
見出し
</h1>
<p>
段落①
</p>
<p>
段落②<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>
<link ①rel="stylesheet" ②href="style.css">
(①参照先のファイルとの関係性)（②参照先のファイルの場所）
■link要素
link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載する。rel属性、href属性と一緒に使用するのが一般的。
■rel属性
rel属性は、参照先のファイルが現在のファイルとどのような関係であるのかを明らかにする。
属性値には決められたキーワードを記載。
今回は”stylesheet”というキーワードを指定することでCSS（Cascading Style Sheets）を参照することを表している。
■href属性
href属性は、参照先の外部ファイルの場所。
属性値には、ファイル名を記載する。
CSSの記述について
①.body {
②background-color:③red;
}
①セレクタ ②プロパティ ③値
■セレクタ
セレクタとは、CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述。
■プロパティ
プロパティとはセレクタで指定したHTMLの「何を変えるのか」を選択するための記述。
■値
プロパティで設定する内容を決めるための記述。プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力する。
上記のコードの意味は、bodyセレクタの背景色を赤色に変えると言うもの。
このように、背景色、文字色、文字サイズ、要素同士の余白など様々なプロパティが
用意されていて変えることができる。
class属性とclassセレクタについて
```HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>テストサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
見出し
</h1>
<p>
段落①
</p>
<p>
段落②<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>
上記のコードの段落①と段落②は同じp要素だが、段落①の部分だけ装飾したい場合。
class属性とclassセレクタが登場する。
■class属性
class属性とはHTML要素に対して個別に名前を指定することができる属性。
class属性の属性値をclass名という。
<p ①class=②"first-message">
段落①
</p>
①class属性 ②class名
class名をセレクタと指定して、装飾することができる。
■classセレクタ
HTMLで指定したclass名をCSSのセレクタとして使用することができる。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述する。
.first-message {
color: red;
}
これで、段落①だけがの文字色が赤色になった。
classセレクタを使うことによって、特定のHTMLだけに装飾をすることができる。
つまり、要素に名前をつけてあげることによって、その名前の部分だけを装飾できる
ようになると言うこと。
id属性とidセレクタについて
class属性とclassセレクタの他にも、特定の要素を装飾する方法がある。
それが、id属性とidセレクタ。
■id属性
id属性とは特定のHTML要素のみに対して、名前を指定することができる属性。
id属性の属性値をid名という。
id属性には「1つのページ内で、同じid名を複数のHTML要素に付与しない」という慣例が存在する。ブラウザに関連する他の言語が、想定した挙動にならない場合があるためとのこと。
「1つのページ内には、同じid名を持つHTML要素が存在しない」ように命名を気をつける。
<p ①id=②"second-message">
段落②
</p>
①id属性(属性) ②id名(属性値)
CSSではid名をセレクタと指定して、装飾することができる。
■idセレクタ
HTMLで指定したid名をCSSのセレクタとして使用することができる。idセレクタを指定する場合は、「#id名」の形でCSSファイルに記述する。
# second-message {
color: blue;
}
idセレクタを使うことによって、特定のHTMLだけに装飾をすることができる。
classセレクタは「.」、idセレクタは「#」を先頭につける。
以上がCSSの基礎の中の基礎部分。
色々な用語が出てきて頭が混乱しますね。