We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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

大文字と空白の除外

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

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

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

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

次に、テストサイトがどのような構造を持つべきかを見てみましょう。私たちが作成するウェブサイトプロジェクトで最も一般的なのは、 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 を挿入し、ウェブサイトをどのような外見にするかの記事で選択した画像を表示させます。

  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 がある

 

このモジュール内の文書

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3, mfuji09, T.Ukegawa
最終更新者: Uemmra3,