HP初心者講座
ここまでで、
- HTMLでページの骨組みを作る
- CSSで配置とデザインを整える
- 画像やボタンでサイトらしさを出す
という流れをやってみました。
今回はいよいよ総まとめ！
1ページで完結するWebサイト を実際に作ってみましょう🎉
完成イメージ
こんな感じのページを作ります
| ヘッダー（タイトル） |
| 画像＋自己紹介文 「詳しく見る」ボタン |
| フッター（コピーライト） |
HTML全体の構造
まずはHTMLファイル全体を書いてみましょう。
index.htmlというファイル名にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Webサイト</h1>
</header>
<main>
<section class="profile">
<img src="profile.jpg" alt="プロフィール画像">
<div class="text">
<h2>こんにちは！</h2>
<p>Web制作の勉強をしています。<br>
自分のサイトを作ってみました！</p>
<a href="#">詳しく見る</a>
</div>
</section>
</main>
<footer>
<p>© 2025 Website</p>
</footer>
</body>
</html>これまで使った構造を組み合わせた、シンプルな構成です。
CSSでデザインを整える
次に、同じフォルダに「style.css」を作り、デザインを設定します。
@charset "utf-8";
/* 全体の基本設定 */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
/* ヘッダー */
header {
background-color: #0078d7;
color: white;
padding: 20px;
text-align: center;
}
/* プロフィールセクション */
.profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 20px;
}
.profile img {
width: 150px;
border-radius: 50%;
margin-bottom: 20px;
}
.profile a {
display: inline-block;
padding: 10px 20px;
background-color: #0078d7;
color: white;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
}
.profile a:hover {
background-color: #005fa3;
}
/* フッター */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
font-size: 14px;
}ポイント
- ページ全体を明るいグレー背景で柔らかく
- ヘッダー・ボタンに同じ色を使って統一感
- 余白（padding）を多めに取ってスッキリ見せる
コードのつながりを理解しよう
| HTML要素 | 役割 | CSSでの指定 |
|---|---|---|
<header> | ページのタイトル | 背景色・中央寄せ |
<main> | メインコンテンツ | 余白でスペースを確保 |
<footer> | ページ下部の情報 | 背景色変更・小さめの文字 |
<a> | ボタンとして利用 | 背景色・角丸・ホバー効果 |
これで、Webページが自分の手で作れるようになりました！
完成イメージ
プロフィール画像はお好みの画像をご準備ください。
websiteフォルダ
┝index.html
┝profile.jpg
└style.css
応用ヒント
- display:
flex;を使えば画像とテキストの横並びが簡単 background-imageで背景画像を設定可能.cardを複数並べれば、作品紹介ページにも応用できる
「少しずつCSSを追加していく」ことで、見た目の完成度がどんどん上がっていきます！
初心者の皆様へ
「CSSファイルが反映されない…」
「画像の位置がずれてしまう…」
そんな方は、私がココナラに出品しているWebサイト制作サービスをご利用ください。
- 高品質テンプレートでデザインも安心
- 自分で更新できるWebサイト（WordPress）
- 実用的な機能多数
- 操作マニュアル付き
- 公開後2週間の無料サポート
作業に行き詰まったら、プロに任せるのもひとつの手です。
ぜひご相談ください！
まとめ
- HTMLとCSSを分けて管理する
- ページ構造を理解する
- デザインのルールを少しずつ追加する
これで、あなたの初めてのWebサイトが完成です！
