CSS実践(1) 「インライン」「内部参照」「外部参照」

5881 ワード
外部参照 CSS 初心者 内部参照 インライン CSS テキストリンク

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) 「色の指定」「背景」「ボックスモデル」に続く。