Sublime TextでCSSファイルを作る
①CSSファイルの1行目には「@charset "UTF-8"」と書く。
これはコードの文字化けを防ぐためのもので、これより先にCSSのコードを書いてしまうとエラーになってしまう。
必ず先頭に書く。
くま子の実態_style.css@charset "UTF-8"; ←1行目に書く
body {
background-color: #fee; ←背景をピンク色に指定
}
h1 {
color: #0bd; ←水色の指定
}
P {
font-size: 20px; ←文字サイズを
} 20pxに指定②CSSファイルを保存する。
CSSファイルに「.css」と拡張子をつけて保存する。CSSファイルのルールはHTMLファイルのルールと同じ。
③Sublime TextでHTMLファイルを作るで作成したHTMLファイルの<head>内に「<link rel="stylesheet" href="style.css">」と追加してCSSファイルを読み込ませる(CSSを適用させる方法)。
HTMLファイルにCSSファイルを読み込ませる<!doctype html>
<html lang="ja">
<head> ←<head>内に追加する。
<meta charset="UTF-8">
<title>くま子の実態</title>
<meta name="description" content="くま子の好きなもの、日々の生活をご紹介">
<link rel="stylesheet" href="くま子の実態_style.css"> ←上記をここに追加する。
<body>
<h1>くま子の一日</h1>
<p>ひたすらアープラノートをいじっています。</p>
</body>
</head>
</html>④Webブラウザで開く。
修正前
結果
なぜか背景がピンクにならない。なんで～？？？