― HTMLとCSSを使った静的ページ制作の実践編
はじめに
前回の記事では、HTML・CSS・JavaScriptがWebページを構成する基本的な3つの技術であること、そしてそれぞれの役割について学びました。
今回からはいよいよ実践編。実際に手を動かして1ページのWebサイトを作成していきましょう。
ここで作るのは、企業や個人のポートフォリオでもよく使われる「自己紹介＋お問い合わせリンク」のあるシンプルなLP（ランディングページ）形式のWebページです。
このハンズオンを通じて、HTML/CSSの構造と、デザインを整える基本的な手順が体験できます。
作るものの完成イメージ
今回作成するページは以下のような構成になります：
------------------------------
| ヘッダー（名前・肩書き） |
------------------------------
| 自己紹介セクション |
------------------------------
| お問い合わせリンク |
------------------------------
| フッター（コピーライト） |
------------------------------
実際に以下のようなHTMLとCSSを記述していくことで、この構成を1ページで完成させていきます。
HTMLの記述から始めよう
まずは、Webページの構造（骨組み）をHTMLで記述します。以下のコードを参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>私のポートフォリオ</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>山田 太郎</h1>
<p>フロントエンドエンジニア</p>
</header>
<main>
<section id="about">
<h2>自己紹介</h2>
<p>こんにちは、山田太郎です。Web制作が好きで、ReactやNext.jsを使った開発が得意です。</p>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<p>以下のリンクからご連絡ください。</p>
<a href="mailto:example@example.com">example@example.com</a>
</section>
</main>
<footer>
<small>© 2025 山田太郎</small>
</footer>
</body>
</html>
このコードでは、ページの大まかな構造を<header>、<main>、<section>、<footer>などのセマンティックなHTMLタグで記述しています。
視覚的な構成だけでなく、意味的な区切りを意識することがSEOやアクセシビリティにも良い影響を与えます。
CSSでスタイルを加える
次に、HTMLに装飾やレイアウトを加えるためのCSSを記述します。新しいファイル style.css を作成して、以下のように記述しましょう。
/* ベーススタイルのリセット */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f5f5f5;
}
/* ヘッダー */
header {
background-color: #2c3e50;
color: white;
padding: 40px 20px;
text-align: center;
}
/* セクション */
main {
padding: 40px 20px;
max-width: 800px;
margin: 0 auto;
background-color: white;
}
section {
margin-bottom: 40px;
}
h2 {
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}
/* フッター */
footer {
background-color: #ecf0f1;
text-align: center;
padding: 20px;
font-size: 14px;
}
このスタイルシートでは、次のような基本テクニックを使っています：
bodyに対してフォントや背景色などの全体スタイルを定義headerを背景色付きで目立たせ、中央寄せmainに最大幅と余白を設定し、可読性を確保h2に下線を加えることで見出しの視認性アップfooterをページ下部に控えめに配置
このように、CSSは「見た目」をデザインする非常に強力なツールです。最初はシンプルでも、少しずつデザイン力を高めていきましょう。
実際にブラウザで表示してみよう
HTMLファイルをダブルクリックすれば、ブラウザで開いてページが確認できます。CSSの変更を保存するたびに、ブラウザをリロードして結果を確認してみてください。
Chromeを使っている方は、右クリック →「検証」でデベロッパーツールを開くと、HTMLやCSSの構造をリアルタイムで確認・調整できます。
こうしたブラウザ機能を活用することで、より効率的に開発を進められます。
よくあるエラーとその対処法
初学者がハマりがちなポイントをいくつか挙げておきます：
- CSSが反映されない →
link rel="stylesheet"のhrefが正しいか確認 - 文字化けする →
<meta charset="UTF-8">を記述しているか確認 - セクションが中央に寄らない →
mainにmargin: 0 autoを指定したか確認
特にファイルパスやタイポ（タイプミス）は最も多いエラー原因なので、何度も見直す癖をつけましょう。
まとめ
今回は、HTMLとCSSを使って静的な1ページのWebサイトを実装する方法を紹介しました。
Webページは決して「魔法のように突然表示される」ものではなく、コードによって一つひとつ構築されているということが体感できたのではないでしょうか。
まだ見た目はシンプルですが、これこそがWeb開発の基本中の基本。ここから、デザイン、レスポンシブ対応、JavaScriptの導入と、できることがどんどん増えていきます。
次回は、JavaScriptを使ってWebページに「動き」を加える基本的な仕組みを解説していきます。
たとえば、「ボタンを押したら文字が変わる」といった動的な仕掛けを一緒に作っていきましょう。
次回予告
Webページに動きをつけよう ― JavaScriptで基本的なインタラクションを実装する
コメント