【CSS】CSSの書き方
CSSを用いてのHTMLをスタイリングしていきます。
CSSを書く場所
CSSは一般的に外部ファイルとしてHTMLに読み込ませます。
その場合headの中に、以下のように記述します。
<link rel="stylesheet" href="style.css">
また、直接CSSをheadの中に書き込むこともできます。
<head> <meta charset="UTF-8"> <title>CSSの練習</title> <style> h1 { color: red; } </style> </head>
CSSの基本的な記述方法
CSSの基本的な書き方は、セレクタ、プロパティ、値の順に書き込みます。
例:
h1 { color: red; }
上記の内容だととh1の文字色を赤に指定するという意味になります。
セレクタの書き方
セレクタをより具体的に書くことによって、部分的にスタイルを適応させることができます。
先に親となる親要素を書き、跡に子となる子要素を書きます。
h1 span{ color: red; }
上記の内容だと、h1の中にあるspanの文字色を赤に指定すると言う意味になります。
IDやクラスを使用する書き方
HTML内でIDやクラスを指定することで、直接その要素にスタイルを適応させることができます。
HTML内での指定
HTML内にIDとクラスを書くには、それぞれの開始タグの中に「id」と「class」を埋め込みます。例:
<div id="header"> <h1 class="caption">テスト</h1> </div>
CSS内での指定
CSS内にIDとクラスを書くには、IDは「#」クラスは「.」を付け加えます。例:
#header h1.caption{ color: red; }