ywork2020.com

Title

ホームページファイルについての基礎知識

目次 (INDEX)

ファイルの管理方法

フォルダの画像

ホームページのファイルを作成する前に、それを管理するためのフォルダーを作成しておきましょう。

フォルダーの作成場所は、あなたの管理しやすい場所で結構です。

フォルダーの名前もあなたが分かりやすいものが望ましいです。

もし、フォルダーの名前を決めかねているのなら、 [ web ] とか [ my-web ] という名前をつけておいてはいかがでしょうか。

目次に戻る

index.html ファイルの作成

htmlファイルの画像

ここでは OS を windows として手順を説明させていただきます。

  1. まず、windowsの標準のアクセサリからメモ帳を開きます。
  2. 次にファイルメニューから名前を付けて保存を選択します。
  3. ファイルの保存先を前項で作成したフォルダに設定します。
  4. ファイルの名前を index.html とします。
  5. 文字コードを UTF-8 とします。
  6. 以上の設定が終わったら保存します。
メモ帳のファイル保存画面

これでブラウザが規定値として一番最初に読み込むホームページのファイルの作成が完了しました。

目次に戻る

ウェブブラウザで index.html を表示する

ウェブブラウザで index.html を表示する一番簡単な方法は、 ブラウザを起動して、ブラウザのウィンドウに ファイルをドラッグすることです。

html ファイルに適切なコードが書かれていれば、その内容が表示されます。

html コードの基本については、 HTMLの基本的な要素構成 のページを参考にしてください。

目次に戻る

その他のファイルとフォルダーについて

ファイルのイメージ画像

Web サイトを構築するには index.html ファイル以外にも その他のページの html ファイルを作成していくことになります。 また、 css ファイル (スタイルシート) や js ファイル (スクリプト) を使うこともあるでしょう。

それらのファイルも index.html ファイルと同様に ただの UTF-8 テキストファイルです。 css ファイルなら ファイルの名前.css というものを作成します。 また、javascript ファイルなら ファイルの名前.js というものを作成します。

ファイルの名前についてですが、これは アルファベットの小文字と大文字は区別されます。 また、( - ) ハイフン や ( _ ) アンダースコアなどが使えますので、組み合わせて作成するように心掛けて下さい。

続いてフォルダーについてですが、ルートフォルダー ( index.html のある場所 ) の中に画像をまとめておくフォルダを作成しておくのも一般的な方法です。 フォルダー名には images という名前をつけることが多いようです。

上記で書いたことは、決まりではありませんが、 最終的に大量のファイルを管理しなければならない可能性があることを考慮して、 初めからある程度のフォルダーでファイルを分類しておかれることをお勧めします。

目次に戻る

ファイル管理とテキストエディタについて

ここでは、初めてのホームページを市販のソフトやアプリではなく、自力で作成することを前提に説明しています。

前述していますが、そもそもホームページやプログラムに使われるファイルは特別なものではなく、 ただの UTF-8 の文字コードで保存されたテキストファイルです。 文字コードの保存設定を間違えると文字化けしたりするので注意が必要ですが、難しいものではありません。

このページの冒頭では、プログラム用のテキストエディタを使用しないでファイルを作成しましたが、 専用のテキストエディタならファイルの管理機能やコードを書く上でのサポート機能がしっかりしているものが色々あります。

テキストエディタは好みが分れるので、これが良いという話しは控えますが、 私たちが普段から使っている無料の高機能コードエディターと開発環境を紹介しておきます。

目次に戻る

提案: 一番 最初に作成するファイルとフォルダー

ここでは、このページのまとめとして一番初めに作成するファイルとフォルダーの提案をさせていただきます。

まず、はじめに ウェブのファイルをまとめておくフォルダー ( ルートフォルダー ) を [ web ] という名前で作ります。 その他のファイルやフォルダーについては以下に図の形式で掲載します。

web フォルダー
index.html ファイル
pages フォルダー
page_1.html ファイル
page_2.html ファイル
images フォルダー
image_1.jpg ファイル
image_2.png ファイル
css フォルダー
index.css ファイル
pages.css ファイル
js フォルダー
script_1.js ファイル
script_2.js ファイル

上記の例は、 index.html 以外のファイルは種類ごとにフォルダーで分別しています。 例えば、pages フォルダーには その他の htmlページのファイルをまとめておきます。 また、images フォルダーには コンテンツに使われる画像などのファイルをまとめておきます。

index.html ファイルは重要なファイルですので、必ずルートに配置してください。 この名前のファイルは URL ディレクトリにあるファイルの中からブラウザが既定で読み込むトップページのファイルだと認識します。

目次に戻る