HP初心者講座
今回は、サイトの骨組みを作る方法を解説します。
ヘッダー・メイン・フッターの3つのセクションに分けると、見た目も整理されて初心者でも作りやすくなります。
サイトの基本構造
Webページは大きく3つのセクションに分けるのが基本です。
- ヘッダー（header）
- ページの最上部に配置
- サイトタイトルやメニューを置く
例：
<header>
<h1>Webサイト</h1>
<nav>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>- メイン（main）
- ページのメインコンテンツ
- 自己紹介やサービス内容などを配置
例：
<main>
<section id="about">
<h2>About</h2>
<p>Web制作サービスを行っています。</p>
</section>
<section id="services">
<h2>Services</h2>
<p>オリジナルテンプレートを提供します。</p>
</section>
</main>- フッター（footer）
- ページの最下部著作権情報や連絡先を表示
例：
<footer>
<p>© 2025 Webサイト</p>
</footer>サイトの全体像（HTML例）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のWebサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Webサイト</h1>
<nav>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About</h2>
<p>Web制作サービスを行っています。</p>
</section>
<section id="services">
<h2>Services</h2>
<p>オリジナルテンプレートやサポートを提供します。</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>お問い合わせはココナラのサービスページからどうぞ。</p>
</section>
</main>
<footer>
<p>© 2025 Webサイト</p>
</footer>
</body>
</html>
ポイント
- ページはheader → main → footerで整理
- 各sectionにidを付けると、リンクで飛ばせる
- CSSで色やレイアウトを整えると、さらに見やすくなる
まとめ
- ヘッダー：タイトル・ナビゲーション
- メイン：自己紹介・サービス内容・コンタクト
- フッター：著作権・連絡先
サイトの構造を理解すると、
「どこに何を置けば良いか」が明確になり、HTMLとCSSの練習もスムーズになります。
初心者の皆様へ
「HTMLの構造はわかったけど、デザインまで完成させるのは難しいかも…」
そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。
- 高品質テンプレートでデザインも安心
- 自分で更新できるWebサイト（WordPress）
- 実用的な機能多数
- 操作マニュアル付き
- 公開後2週間の無料サポート
作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！
次回予告
次回は、CSSで横並びや中央寄せのレイアウトを作る方法を解説します。
1ページサイトの見た目を整えるテクニックを学びましょう。
