【サイト作成 / STEP2】テンプレートファイルと編集方法

STEP2ではテンプレートに含まれるファイルと、その編集方法について説明します。

テンプレートに含まれるファイル

STEP1で編集可能にしてテンプレートファイルを確認していきます。

展開したテンプレートのフォルダを開いてください。

テンプレートによってファイルの増減はありますが、大体こんな感じです。

テンプレートファイルの編集に関連のある拡張子

拡張子	説明
.html	HTMLファイルです。 HTMLファイルはページの内容を設定するファイルです。
.css	CSSファイルです。 HTMLファイルの内容を表示するレイアウトやデザインを設定するファイルです。
.js	JavaScriptファイルです。 ホームページを表示した際のアニメーション等の動的な部分を設定するファイルです。

テンプレートを使用してホームページを作成する場合、

を編集します。

現在の表示を確認する

HTMLファイルは特別に設定していない限り、ダブルクリックするとWebブラウザで開かれます。

実際のホームページとしてどのように表示されるかが確認できます。

テンプレートダウンロード時、index.htmlをブラウザで開くとこのような状態です。

ここから編集していきます。

ファイルを編集する

説明ではindex.htmlを編集していきます。

編集するファイルを開く

ファイルを編集するためには、テキストエディター、またはコードエディターでファイルを開く必要があります。

今回はWindowsに標準で入っているテキストエディタ「メモ帳」と、おすすめのコードエディタ「Visual Studio Code（VSCode）」の2つの開き方を説明します。

コードエディタはコードの色分け、補完機能などの機能や、タブ表示機能等が備わっているものが多く、快適に作業を進めることができます。

自身の開発環境でテキストエディタを選択するメリットはあまりないので、最初からコードエディタの使用をおすすめします。

メモ帳で開く

VSCodeで開く

VSCodeのインストールについては、以下の記事を確認してください。

タイトルを変更する

まずはタイトルを変更してみます。

次のステップ

---