プロジェクトごとにフォルダを分けよう

HTMLの実習で public_html というディレクトリ（フォルダ）を使いました。このディレクトリの直下にすべてのファイルを置いてもいいのですが，一般には，プロジェクトごとにディレクトリを分けます。ここでは，JavaScriptの演習をするために，public_html の中に例えば js というサブディレクトリ（サブフォルダ）を作って，その中でJavaScriptの実習をしましょう。

public_html

index.html
aaa.html
bbb.html
style.css

js

index.html
rollover.html
changetext.html
…….html

other

index.html
…….html

js というサブディレクトリを作ったら，その中にJavaScript実習で作った作品のお品書き（インデックス）のページを index.html という名前で作成します。内容は次のような感じです：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript実習</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../style.css">
</head>
<body>

<h1>JavaScript実習</h1>

<ul>
  <li><a href="rollover.html">絵の切り替え</a></li>
  <li><a href="changetext.html">文字の置き換え</a></li>
</ul>

</body>
</html>

style.css へのリンクが ../style.css となっていることに注意してください。../ は「一つ上のフォルダの中」という意味です。

トップの index.html のどこかに <a href="js/">JavaScript実習</a> などと書き込めば，トップからJavaScriptのお品書きのページにリンクできます。

逆に，JavaScriptのプロジェクト内から，一つ上の階層の「ホーム」にリンクするには，<a href="../">ホーム</a> のようにします。

また，同じ階層の index.html にリンクするには，<a href="./">お品書き</a> のようにします。このように，デフォルトのファイル名 index.html を省略すれば，URLが短くできます。