CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行います。
<link href="CSS ファイルのパス名" rel="stylesheet" type="text/css">
HTML ファイル内に CSS を記述する時は、HTML ファイルの head タグ内（</head>の直前が良い）に以下の記述を行います。
HTML タグにインラインで記述する時は、スタイル（style）属性を使用して以下の記述を行います。
CSS では基本的に（意識して書く場合を除いて）空白や改行は無視されます。
以下の書き方は同一の解釈となりますが可読性が確保できるような書き方を行うように心がけてください。
p { font-size: 140%; font-weight: bold; color: red; }
p {
font-size: 140%;
font-weight: bold;
color: red;
}
Web ページのレイアウトを作るためには領域定義が必要です。領域の定義にはボックスモデルが適用されコンテンツ（content）、パディング（padding）、ボーダー（border）、マージン（margin）を組み合わせて領域が定義されます。
要素の内容であるコンテンツ（文字・図・写真など）の領域で領域のサイズは width プロパティ（幅）と height プロパティ（高さ）で指定します。
要素の内側の余白で padding プロパティで指定します。
要素の枠線で border プロパティで指定できます。
要素の外側の余白で margin プロパティで指定します。
ボックスモデルの表示ルールはタグの種類によって異なりますが display プロパティを使用することで変更可能です。
| インライン （display: inline;） | インラインブロック （display: inline-block;） | ブロック （display: block;） | |
|---|---|---|---|
| 主な用途 | 文章内 | 文章内・横並び | レイアウト・サイズ調整 |
| 主なタグ | a,strong,spanなど （テキスト分類） | imgなど （コンテンツ埋め込み） | h1,p,ul,li,divなど （セクション分類） （コンテンツ分類） |
| 並び方 | 横 | 横 | 縦 |
| 初期サイズ | 内容サイズ | 内容サイズ | 横は100%、縦は内容 |
| widthとheight | － | 指定可能 | 指定可能 |
| padding | 上下左右 *1 | 上下左右 | 上下左右 |
| margin | 左右のみ | 上下左右 | 上下左右 |
| line-height | 外側にかかる | 内側にかかる | 内側にかかる |
| text-align | － | 指定可能 | 指定可能 |
| vertical-align | 指定可能 | 指定可能 | － |
*1 余白はとってくれますが上下の要素の位置には影響しません。
* { プロパティ: 値; }アスタリスク（*）を指定すると、すべての要素に適用するスタイルを指定できます。
使用例
* { color: red; }
p * { color: red; }
要素名 { プロパティ: 値; }HTML の要素名（タグ名）を指定すると、その要素名に合致する要素に適用するスタイルを指定できます。
使用例
h1 { font-size: 140%; }
p { color: red; }
#id名 { プロパティ: 値; }ハッシュ（#）を付けて id 名を指定すると、その id 名に合致する要素に適用するスタイルを指定できます。
使用例
#box1 { font-size: 140%; }
div#box2 { color: red; }
.class名 { プロパティ: 値; }ピリオド（.）を付けて class 名を指定すると、その class 名に合致する要素に適用するスタイルを指定できます。
使用例
.text1 { font-size: 140%; }
p.text2 { color: red; }
セレクタ セレクタ { プロパティ: 値; }複数のセレクタをスペースで区切って指定すると、ある要素の配下にある要素にスタイルを指定できます。
使用例（HTML）
<div class="selector1">親
<div class="c1"> 子1
<p class="g1"> 孫1</p>
<p class="g2"> 孫2</p>
<p class="g3"> 孫3</p>
</div>
<div class="c2"> 子2
<p class="g1"> 孫1</p>
<p class="g2"> 孫2</p>
<p class="g3"> 孫3</p>
</div>
</div>
使用例（CSS）
.selector1 .g1 {
color: red;
}
孫1
孫2
孫3
孫1
孫2
孫3
使用例（CSS）
.selector1 .c2 .g1 {
color: red;
}
孫1
孫2
孫3
孫1
孫2
孫3
セレクタ > セレクタ { プロパティ: 値; }セレクタを大なり（>）で区切って指定すると、ある要素の直下にある要素にスタイルを指定できます。
使用例（HTML）
<div class="selector2">親
<div class="c1"> 子1
<div class="g1"> 孫1</div>
<div class="g2"> 孫2</div>
<div class="g3"> 孫3</div>
</div>
</div>
使用例（CSS）
.selector2 div {
color: black;
}
.selector2 div {
color: red;
}
使用例（CSS）
.selector2 div {
color: black;
}
.selector2 > div {
color: red;
}
セレクタ + セレクタ { プロパティ: 値; }セレクタをプラス（+）で区切って指定すると、ある要素に隣接している要素にスタイルを指定できます。
使用例（HTML）
<div class="selector3">親
<div class="c1"> 子1</div>
<div class="c2"> 子2</div>
<div class="c3"> 子3</div>
<div class="c4"> 子4</div>
<div class="c5"> 子5</div>
</div>
使用例（CSS）
.selector3 .c2 + div {
color: red;
}
セレクタ ~ セレクタ { プロパティ: 値; }セレクタにチルダ（~）で区切って指定すると、ある要素に後続している要素にスタイルを指定できます。
使用例（HTML）
<div class="selector4">親
<div class="c1"> 子1</div>
<div class="c2"> 子2</div>
<div class="c3"> 子3</div>
<div class="c4"> 子4</div>
<div class="c5"> 子5</div>
</div>
使用例（CSS）
.selector4 .c2 ~ div {
color: red;
}
ピクセル値で指定します。
使用例
<p style="width: 200px; font-size: 30px; background: pink; line-height: 1;">サンプル</p>
サンプル
親要素のサイズに対する割合を百分率（%）で指定します。
使用例
<div style="background: skyblue; line-height: 1;">親サンプル
<p style="width: 20%; font-size: 200%; background: pink; line-height: 1;">子サンプル</p>
</div>
子サンプル
親要素のサイズに対する割合（1em = 100%）を指定します。em は、フォントサイズの単位として使用されます。
使用例
<div style="font-size: 20px; background: skyblue; line-height: 1;">親サンプル
<p style="font-size: 2em; background: pink; line-height: 1;">子サンプル</p>
</div>
子サンプル
ルート（html タグ）のサイズに対する割合を指定します。rem は、フォントサイズの単位として使用されます。ルートのフォントサイズの初期値は、16px に設定されています。
使用例
<div style="font-size: 20px; background: skyblue; line-height: 1;">親サンプル
<p style="font-size: 2rem; background: pink; line-height: 1;">子サンプル</p>
</div>
子サンプル
画面の表示幅に対する割合（10vw = 画面幅の10%）を指定します。「width: 100vw;」と指定すると画面幅（スクロールバーを含む）と同じ大きさの領域が定義できます。
使用例
<p style="font-size: 3vw; background: pink; line-height: 1;">サンプル</p>
サンプル
画面の高さに対する割合（10vh = 画面の高さの10%）を指定します。「height: 100vh;」と指定すると画面の高さ（スクロールバーを含む）と同じ大きさの領域が定義できます。
使用例
<p style="font-size: 3vh; background: pink; line-height: 1;">サンプル</p>
サンプル
値を四則演算で計算します。
使用例
<div style=" background: skyblue; line-height: 1;">親領域
<p style="width: calc(100% - 40px); margin: 0 auto; background: pink; line-height: 1;">子領域</p>
</div>
子領域（両端に 20px のマージンを確保）
色およびグラデーションの指定方法は、以下の各種類があります。
カラーネーム指定は、black、red、lime、blue などのカラーネームで指定します。
カラーネーム指定の使用例を以下に示します。
#rgb 指定は、r が赤、g が緑、b が青を示します。それぞれの色の強さは 16 進数（0～f）で指定します。0 は無発色で、f は最大発色になります。
#rgb 指定の使用例を以下に示します。
#rrggbb 指定は、rr が赤、gg が緑、bb が青を示します。それぞれの色の強さを2桁の 16 進数で指定します。00 は無発色で、ff は最大発色になります。
#rrggbb 指定の使用例を以下に示します。
#rrggbbaa 指定は、rr が赤、gg が緑、bb が青、aa が透明度を示します。それぞれの色の強さを 2 桁の 16 進数で指定します。00 は無発色で、ff は最大発色になります。透明度は、00 は完全に透明、ff は完全に不透明になります。
#rrggbbaa 指定の使用例を以下に示します。
rgb(r,g,b) 指定は、r が赤、g が緑、b が青を示します。それぞれの色の強さを 10 進数（0～255）または百分率（0%～100%）で指定します。0（0%）は無発色で、255(100%)は最大発色になります。
rgb(r,g,b) 指定の使用例を以下に示します。
rgba(r,g,b,a) 指定は、r が赤、g が緑、b が青、a が透明度を示します。それぞれの色の強さを 10 進数（0～255）または百分率（0%～100%）で指定します。0（0%）は無発色で、255（100%）は最大発色になります。透明度は、0（0%）は完全に透明、1（100%）は完全に不透明になります。
rgba(r,g,b,a) 指定の使用例を以下に示します。
hsl(h,s,l) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）を示します。
hsl(h,s,l) 指定の使用例を以下に示します。
hsla(h,s,l,a) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）、a が透明度（Alpha）を示します。
hsla(h,s,l,a) 指定の使用例を以下に示します。
線形グラデーションの作成には、linear-gradient 関数を使用します。linear-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。
線形グラデーションの使用例を以下に示します。
放射グラデーションの作成には、rasial-gradient 関数を使用します。radial-gradient 関数は、以下のグラデーション情報をカンマ（,）で区切って複数指定することができます。
グラデーションの中心位置と大きさを指定します。グラデーションを円形にする時は「circle 大きさ at 中心位置」で指定し、楕円形にする時は「ellipse 大きさ at 中心位置」で指定します。大きさは、以下の値を指定します。closest-side を指定すると中心位置からボックスを囲む最近接の辺までの大きさになり、中心位置の初期状態は、縦 50%、横 50% の位置になります。中心位置は「横位置 縦位置」で指定します。位置は、ピクセル数（px）や比率（%）で指定することができます。
放射グラデーションの使用例を以下に示します。
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。
リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。
以下にリセット CSS のサンプルを示しますのでコーディングスタイルに合わせて適時変更してください。
CSS
@charset "utf-8";
/* Reset CSS */
*,*::before,*::after {
box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,article,section,header,footer,nav,aside,p,hr,ul,ol,li,dl,dt,dd,div,
main,em,strong,small,i,b,spantable,caption,tr,th,td,pre,label,input,textarea,select,button {
padding: 0;
margin: 0;
font-weight: normal;
line-height: 1.6;
word-wrap: break-word;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #333;
}
address,em,i {
font-style: normal;
}
strong,th,b {
font-weight: normal;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
opacity: 0.6;
}
セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。
| セレクタの種類 | 記述例 | 点数 |
|---|---|---|
| 全般セレクタ | すべての要素に適用 | 0点 |
| 要素名 | h1 p div span table など | 1点 |
| 疑似要素 | ::before ::after など | 1点 |
| 疑似クラス | :hover :nth-child(1) など | 10点 |
| class | .main-text .box など | 10点 |
| id | #title #sub など | 100点 |
| style属性 | <div style="font-size:140%;"> | 1000点 |
| !important | font-size: 140%!important; | 最優先 |
| セレクタの例 | 計算 | 合計点 |
|---|---|---|
| div#main p | 1（要素）+100（id）+1（要素） | 102点 |
| #main p.main-text | 100（id）+1（要素）+10（class） | 111点 |
| div#main p.main-text | 1（要素）+100（id）+1（要素）+10（class） | 112点 |
| div#main main p.main-text | 1（要素）+100（id）+1（要素）+1（要素）+10（class） | 113点 |
| table tr td.text | 1（要素）+1（要素）+1（要素）+10（class） | 13点 |
| h1 div span | 1（要素）+1（要素）+1（要素） | 3点 |
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。
