何をする書き方？
HTMLからCSSを読むにはlink、JavaScriptを読むにはscriptを使います。ファイルを分けると、どこを直せばよいかが分かりやすくなります。deferを付けた外部スクリプトは、HTMLの解析が終わってから実行されます。
基本の形
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>rel読み込むファイルの関係を指定。href / srcファイルの場所を指定。defer外部JSをHTML解析後に実行。短い例で確かめる
index.html
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>結果
CSSとJavaScriptを読み込みます。
準備・実行方法を確認する
テキストエディターで index.html を作り、UTF-8で保存します。ファイルをブラウザーで開くと表示を確認できます。変更したら保存して再読み込みしてください。
もう少し詳しいコードを見る
index.html
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
<title>小さなサイト</title>
</head>結果
同じフォルダーのstyle.cssとapp.jsを読み込みます。このheadの設定だけでは、画面に文章は表示されません。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「CSS・JavaScriptをつなぐ」の書き方はどれ？
少し変えてみよう
style.css に body { color: navy; } と書き、本文の文字色が変わるか確認します。
つまずいたら、ここを確認
読み込めないときは、フォルダーの位置を確認します。別フォルダーなら css/style.css のような相対パスが必要です。
自分の言葉でメモ
記録はこのブラウザーに保存されます。