MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ファイルを扱う

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

ウェブサイトはコンピュータのどこにあるべきですか?

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

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

大文字とスペースを除いて

この記事では、フォルダやファイルの名前をすべてスペースを使わず小文字で指定してください。それの理由は :

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

これらの理由から、少なくとも、あなたが何をしているかを知るまでは、フォルダとファイル名をスペースなしの小文字で書くという習慣に入るのが最善です。そうすれば、問題が少なくなるでしょう。

ウェブサイトはどのような構成が必要ですか?

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

 

 

次に、テストサイトがどのような構造を持つべきかを見てみましょう。 私たちが作成するウェブサイトプロジェクトで最も一般的なのは、画像、スタイルファイル、スクリプトファイルを含むインデックスHTMLファイルとフォルダです。 これらを今作成しましょう:

 

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

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

ファイルパス

ファイルをお互いに呼び出すためには、ファイルパスを提供する必要があります。基本的には、あるファイルが別のファイルの場所を知っています。これを実証するために、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 ファイルを保存し、Web ブラウザにロードします (ファイルをダブルクリックします) 。新しい Web ページに画像が表示されます。

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

ファイルパスの一般的なルール :

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

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

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

何をすべきでしょうか?

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

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

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

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