1. はじめに
本記事では、CSSの
「インライン」「内部参照」「外部参照」
について記載する。
また、以下は要素の文字色を変えるという前提で進めていく。
2. インラインでCSSを記述
インラインとは？
HTMLタグに直接CSSを書き込むやり方。タグ内に直接記述する。
【サンプル】
index.html
<h1 style="color: #ff0000">初めてのCSS</h1>
【表示例】
3. 内部参照
内部参照とは？
headタグにまとめてCSSを書き込む形式。
【サンプル】
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初めてのCSS</title>
<style>
h1 {
color: #00aa00;
}
</style>
</head>
【表示例】
4. 外部参照
外部参照とは？
・外部に作ったCSSファイルを参照する方式。
・HTML内でlinkタグを記載し、CSSファイルを読み込む。
・「一時的にCSSの検証がしたい」といった場合に使うことが多い。
※<title>タグの下に記述するのが一般的である。
【HTML内での紐付け】
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初めてのCSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
【サンプル】
styles.css
h1 {
color: #0000aa;
}
【表示例】
5.トラブルシューティング
CSSに限ることなく、コーディングをする際にありがちなトラブルシューティングを以下に記載する。
ファイルは保存しているか？
VSCodeの自動保存をするか、こまめに保存する癖をつける。
CSSファイルがCSSフォルダ内に正しく保存されているか？
外部参照で記載したlinkタグのhref以降のCSSファイル名にドラッグし、 ⌘+ダブルクリックでファイルを作成できる。
スペルミスは無いか？
Tabキーの補完を積極的に実施する。
セミコロンの記述漏れはないか？
VSCodeの拡張機能:Prettierをフォーマッタ設定し、 shift+⌘+fで自動整形できるようにする。
意図しない、全角文字や全角スペース
Google日本語入力でスペースキーを半角設定にしたり、拡張機能を使用し全角文字を可視化する。
6. 優先順位
①インライン > 内部参照 > 外部参照
②同一ファイル内では上から下へと評価される。
7. おわりに
次項:CSS実践(2) 「色の指定」「背景」「ボックスモデル」に続く。