はじめに
この章では、本ドキュメントの目的と読み方についてやさしく説明します。初心者の方がHTMLテンプレートを使ってホームページを作成する流れをつかめるようにまとめました。
本書の目的
ホームページを作りたいけれど、プログラミングは苦手、という方に向けています。テンプレートを使えば、難しい知識がなくても見た目の良いページを短時間で作れます。具体例を交えて丁寧に解説します。
読者対象
- 個人で趣味のサイトを作りたい方
- 小規模なお店や活動の案内ページを用意したい方
- 学んで実践しながら基礎を身につけたい方
本ドキュメントの構成と進め方
第2章でテンプレートの意味や利点を説明し、第3章でHTMLテンプレートの基本構造を見ます。第4章で実際の作成手順を順を追って紹介します。まずは全体像をつかみ、気になる章から読み進めてください。短時間で試せる手順も用意していますので、実際に手を動かしながら進めると学びが深まります。
ホームページテンプレートとは何か
定義
ホームページテンプレートは、あらかじめデザインやレイアウトが整ったひな型です。見出しや本文、画像配置、色の組み合わせが用意されており、テキストや写真を差し替えるだけで見栄えの良いページを作れます。飲食店のメニュー紹介、写真を並べるポートフォリオ、個人ブログなどに使えます。
利点
- 制作時間を大幅に短縮できます。ゼロから作る必要がありません。
- コストを抑えられます。プロに依頼するより安価です。
- デザインの失敗を減らせます。整った見た目が手に入ります。
種類
- HTMLファイル形式：そのままダウンロードして使います。手軽です。
- CMSテーマ：WordPressなどに組み込む形式で、更新や管理が楽です。
- オンラインサービスのテンプレート：ブラウザ上で選んで編集できます。
選び方と注意点
- スマホでの見え方（レスポンシブ対応）を必ず確認してください。
- 商用利用の可否などライセンスを確認します。
- 変更のしやすさやサポートの有無も選定基準になります。プレビューで実際に画像や文章を差し替えて、使い勝手を試すことをおすすめします。
HTMLテンプレートの基本構造
基本構成
HTMLテンプレートは最初にDOCTYPE宣言を書き、全体をで包みます。中はとに分かれ、ページの情報と表示内容を分けて記述します。
headの主な要素
- meta charset：文字コード（例：UTF-8）を指定します。ブラウザが文字を正しく表示します。
- meta viewport：スマホなどで表示を整えます。幅を端末幅に合わせる指定が一般的です。
- title：ブラウザのタブに表示されるページ名です。
- link：外部のCSSを読み込むときに使います。
bodyの主要ブロック
- header：サイトロゴやナビゲーションを置きます。
- main：ページの中心コンテンツを入れます。記事やフォームなどがここに入ります。
- footer：著作権や連絡先などの補足情報を置きます。
簡単なHTML例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>サンプルページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>サイトロゴとナビ</header>
<main>ここに本文</main>
<footer>© 2025 会社名</footer>
</body>
</html>
HTMLでホームページを作成する手順
準備
まずテキストエディタを用意します。Windowsならメモ帳、より使いやすくしたいならVisual Studio Codeなどをおすすめします。作業用のフォルダを作っておくと管理が楽です。
ファイル作成
新しいファイルを作り、ファイル名を「sample.html」とします。拡張子は必ず「.html」にしてください。保存時は文字コードをUTF-8にすると日本語が正しく表示されます。
HTMLの記述例
下のようなシンプルなコードを書いて保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
</head>
<body>
<h1>ようこそ</h1>
<p>これは簡単なホームページの例です。</p>
</body>
</html>
ブラウザで確認
保存したファイルをブラウザで開きます。ファイルをブラウザにドラッグするか、右クリックして「プログラムから開く」でブラウザを選びます。表示が崩れるときはコードと文字コードを見直してください。
公開（アップロード）
レンタルサーバーへは、提供業者のファイル管理画面やFTPクライアント（例：FileZilla）で接続してアップロードします。多くのサーバーは公開用フォルダがあり（public_htmlなど）、そこへファイルを置くと自分のドメインで見られます。アップロード後はブラウザでURLを確認し、リンクや画像が正しく動くかチェックしてください。
