01 / 05
ページを組み立てる
INPUT · スライド
CSSファイルを読みこむ
02 / 05
つなぐのは link タグ
HTMLとCSSは、勝手にはつながらない。<head> の中に <link> タグを書いて「このCSSを使う」と伝える必要がある。
<link> も終了タグのないタグだよ。
<head> <meta charset="utf-8"> <title>まなびや食堂</title> <link rel="stylesheet" href="style.css"></head>03 / 05
link の2つの属性
<link> には属性が2つ必要だよ。
rel="stylesheet"… つなぐ相手の種類。「これはスタイルシートだ」と伝えるhref="style.css"… つなぐ相手の場所。リンクのhrefと同じ書き方
どちらか片方でも足りないとCSSは効かない。
<link rel="stylesheet" href="style.css">04 / 05
効かないときはまずファイル名
CSSが効かないときの原因でいちばん多いのが、href のファイル名ちがい。
style.css と styles.css、css/style.css と style.css——1文字ちがうだけで読みこめない。エラーは出ず、ただ何も起きないのがやっかいなところだよ。
05 / 05
この演習の進め方
このアプリのプレビューは、index.html と style.css を自動でつないで見せている。だから <link> を書かなくても色は変わって見えるよ。
でも本物のファイルでは <link> がないとCSSは効かない。ここでは書き方を手に覚えさせるのが目的だから、判定は <link> の行もちゃんと見ているよ。