ファイルの扱い

Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的にサーバにアップロードする前に、すべてのコンテンツを正しいものにする必要があります。ファイルの扱いでは、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。

コンピュータ上で Web サイトがあるべき場所

自分のコンピュータ上の Web サイトでローカルに作業している時、関連するすべてのファイルを、サーバ上に公開されたWeb サイトのファイル構造のミラーである単一のフォルダに保持する必要があります。このフォルダは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダの中、またはハードディスクのルートなどに置いてください。

  1. Web サイトプロジェクトを保存する場所を選択してください。ここでは web-projects (またはそれに類するもの) という新しいフォルダを作成します。これはWeb サイトのプロジェクト全てを保持するところです。
  2. この最初のフォルダの中に、最初の Web サイトを格納する別のフォルダを作成します。それを test-site (またはもっと想像力のあるもの) と呼びましょう。

大文字と空白の除外

この記事を通して、フォルダやファイルに空白のない全て小文字で名前を付けるよう求めていることに気が付くでしょう。その理由は次の通りです。

  1. 多くのコンピュータ、特にウェブサーバでは、大文字と小文字が区別されます。例えば、あなたの Web サイトの test-site/MyImage.jpg に画像を置いて、別のファイルから画像を test-site/myimage.jpg として呼び出せば、それは動作しないかもしれません。
  2. ブラウザー、ウェブサーバ、プログラミング言語は、空白の扱いが一貫していません。例えば、ファイル名に空白を使用すると、システムによってはそのファイル名を 2 つのファイル名として扱うことがあります。サーバによっては、ファイル名の空白を "%20" (URI の空白の文字コード) に置き換えるので、リンクが壊れてしまう結果になります。 my_file.html のように単語をアンダースコアで区切るよりは、 my-file.html のようにハイフンで区切る方がよいでしょう。

簡単に言えば、ファイル名にはハイフンを使うべきです。Google の検索エンジンはハイフンを単語の区切りとして扱いますが、アンダースコアはそうしません。このような理由から、少なくとも自分で判断できるようになるまでは、フォルダやファイルの名前を空白のない小文字にして、ダッシュで区切った方がいいでしょう。そうすれば、転んで道路に倒れることが少なくなるでしょう。

Web サイトはどのような構成にするべきか

次に、テストサイトがどのような構造を持つべきかを見てみましょう。私たちが作成する Web サイトプロジェクトで最も一般的なのは、 index の HTML ファイルと、画像、スタイルシート、スクリプトファイルを入れるフォルダです。作成してみましょう。

  1. index.html: このファイルには、一般的にあなたのホームページの内容、つまりあなたが最初にあなたのサイトに行ったときに見るテキストと画像が含まれています。テキストエディターを使用して、 index.html という名前の新しいファイルを作成し、test-site フォルダ内に保存します。
  2. images フォルダ: このフォルダにはサイトで使用するすべての画像を入れます。 test-site フォルダの中に images という名前のフォルダを作成します。
  3. styles フォルダ: このフォルダには、コンテンツのスタイルを設定するための CSS コード(例えばテキストと背景色の設定など)を入れます。 test-site のフォルダの中に styles というフォルダを作成します。
  4. scripts フォルダ : このフォルダには、サイトにインタラクティブ機能を追加するために使用されるすべての JavaScript コード(クリックされたときにデータを読み込むボタンなど)が含まれます。test-site のフォルダの中に scripts というフォルダを作成します。

: Windows では、既定で有効になっている既知のファイルの種類の拡張子を表示しないというオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、Windows エクスプローラーで [フォルダオプション...] オプションを選択し、[登録されている拡張子は表示しない] チェックボックスをオフにし、 [OK]をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、ウェブで検索してください。

ファイルパス

ファイルをお互いに呼び出すためには、ファイルパスを提供する必要があります。基本的には、あるファイルが別のファイルの場所を知っています。これを実証するために、 index.html ファイルに短い HTML を挿入し、Web サイトをどのような外見にするかの記事で選択した画像を表示させます。

  1. 以前に選択した画像を images フォルダにコピーします。
  2. index.html ファイルを開き、次のコードをファイルに挿入します。それが今のところ何を意味するのか気にしないでください。シリーズの後半で構造を詳しく見ていきます。
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. <img src="" alt="My test image"> という行は、ページに画像を挿入する HTML コードです。画像がどこにあるのかを HTML に伝える必要があります。画像は images ディレクトリ内にあり、 index.html と同じディレクトリにあります。ファイル構造の中で index.html からその画像に移動するのに必要なファイルパスは images/your-image-filename です。例えば、私たちの画像は firefox-icon.png と呼ばれ、ファイルパスは images/firefox-icon.png です。
  4. src="" コードの二重引用符の間の HTML コードにファイルパスを挿入します。
  5. HTML ファイルを保存し、ウェブブラウザ―に読み込みます (ファイルをダブルクリックします)。新しいウェブページに画像が表示されます。

地球の周りに燃える狐を表した firefox のロゴのみを表示した基本的なウェブサイトのスクリーンショット。

ファイルパスの一般的なルールは次の通りです。

  • 呼び出し元の HTML ファイルと同じディレクトリにある対象ファイルにリンクするには、ファイル名を使用します。例えば my-image.jpg
  • サブディレクトリ内のファイルを参照するには、パスの前にディレクトリ名とスラッシュを入力します。例えば subdirectory/my-image.jpg
  • 呼び出し元の HTML ファイルの上階層のディレクトリ内にある対象ファイルにリンクするには、2 つのドットを記述します。例えば、 index.htmltest-site のサブフォルダ内にあり、my-image.jpgtest-site 内にある場合、 ../my-image.jpg を使用して index.html から my-image.jpg を参照できます。
  • 例えば ../subdirectory/another-subdirectory/my-image.jpg など、好きなだけ組み合わせることができます。

今のところ、これが知る必要があるすべてです。

: Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは¥記号を使用します。(例 : C:\windows)。これは HTML では使用できません。 Windows で Web サイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。

他にするべきこと

今のところは以上です。フォルダ構造は次のようになります。

macOS X の finder におけるファイル構造。 images フォルダーに画像が入っており、 scripts と styles フォルダーは空で、あと index.html がある

このモジュール