---
title: ファイルの扱い
slug: Learn/Getting_started_with_the_web/Dealing_with_files
tags:
  - Beginner
  - CodingScripting
  - Files
  - HTML
  - 'l10n:priority'
  - theory
  - website
  - ガイド
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>

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

<h2 id="Where_should_your_website_live_on_your_computer" name="Where_should_your_website_live_on_your_computer">コンピュータ上で Web サイトがあるべき場所</h2>

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

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

<h2 id="An_aside_on_casing_and_spacing" name="An_aside_on_casing_and_spacing">大文字と空白の除外</h2>

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

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

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

<h2 id="What_structure_should_your_website_have" name="What_structure_should_your_website_have">Web サイトはどのような構成にするべきか</h2>

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

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

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

<h2 id="File_paths" name="File_paths">ファイルパス</h2>

<p>ファイルをお互いに呼び出すためには、ファイルパスを提供する必要があります。基本的には、あるファイルが別のファイルの場所を知っています。これを実証するために、<code>index.html</code> ファイルに短い HTML を挿入し、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどのような外見にするか</a>の記事で選択した画像を表示させます。あるいは、コンピュータ上またはウェブ上の既存の画像を自由に選択して、以下の手順で使用することができます。</p>

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

<p><img alt="地球の周りに燃える狐を表した firefox のロゴのみを表示した基本的なウェブサイトのスクリーンショット。" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>

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

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

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

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

<h2 id="What_else_should_be_done" name="What_else_should_be_done">他にするべきこと</h2>

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

<p><img alt="macOS X の finder におけるファイル構造。images フォルダーに画像が入っており、scripts と styles フォルダーは空で、あと index.html がある" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ul>
 <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
 <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li>
 <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
 <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
 <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
 <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
 <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li>
 <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li>
</ul>