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