【完全入門ガイド】HTMLとCSSの基礎から実践まで Vol.4
実践編：シンプルなWebサイトを作ってみよう
今までHTMLとCSSの基礎を学んできましたが、ここからは実際にWebサイトを作りながら理解を深めていきましょう。「自己紹介ページ」を例に、1つずつ作り方を説明します。
プロジェクトの計画
Webサイトを作る前に、どんな内容を入れるか整理することが大切です：
ヘッダー部分（一番上の領域）
サイトのタイトル
メニュー（About、Skills、Contactへのリンク）
メインコンテンツ（真ん中の領域）
プロフィール写真
自己紹介文
得意なことリスト
フッター部分（一番下の領域）
SNSへのリンク
コピーライト（著作権表示）
まずはHTMLで骨組みを作る
HTMLファイルを作って、以下のコードを書いていきます：
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 基本設定 -->
<meta charset="UTF-8">
<!-- スマートフォン対応の設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページのタイトル -->
<title>My Profile</title>
<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ヘッダー：ページの一番上の部分 -->
<header class="header">
<!-- サイトのタイトル -->
<h1 class="site-title">My Profile</h1>
<!-- ナビゲーションメニュー -->
<nav class="nav">
<ul class="nav-list">
<!-- #about は同じページ内のidがaboutの場所へのリンク -->
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ：ページの主要な部分 -->
<main class="main">
<!-- About セクション -->
<section id="about" class="about">
<!-- プロフィール画像 -->
<img src="profile.jpg" alt="プロフィール写真" class="profile-image">
<h2>About Me</h2>
<p>はじめまして！Webデザインを勉強中の〇〇です。</p>
</section>
<!-- Skills セクション -->
<section id="skills" class="skills">
<h2>Skills</h2>
<ul class="skills-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript基礎</li>
</ul>
</section>
</main>
<!-- フッター：ページの一番下の部分 -->
<footer class="footer">
<!-- SNSリンク -->
<div class="social-links">
<a href="#">Twitter</a>
<a href="#">GitHub</a>
</div>
<!-- コピーライト表示 -->
<p class="copyright">© 2024 My Profile</p>
</footer>
</body>
</html>CSSでデザインを整える
次に、style.cssファイルを作って、以下のコードを書いていきます：
/* すべての要素の余白をリセット */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* paddingとborderを幅と高さに含める */
}
/* ページ全体の基本設定 */
body {
font-family: 'Arial', sans-serif; /* フォントの種類を指定 */
line-height: 1.6; /* 行間の高さを設定 */
color: #333; /* 文字色を濃いグレーに */
}
/* ヘッダー部分のデザイン */
.header {
background-color: #f8f9fa; /* 背景色を薄いグレーに */
padding: 20px; /* 内側の余白 */
text-align: center; /* 中身を中央揃えに */
}
/* ナビゲーションメニューのデザイン */
.nav-list {
list-style: none; /* リストの・を消す */
display: flex; /* 横並びにする */
justify-content: center; /* 中央揃え */
gap: 20px; /* 項目間の隙間 */
margin-top: 15px;
}
/* メニューのリンクのデザイン */
.nav-list a {
text-decoration: none; /* 下線を消す */
color: #333; /* 文字色 */
font-weight: bold; /* 太字に */
}
/* メインコンテンツ部分のデザイン */
.main {
max-width: 800px; /* 最大幅を設定 */
margin: 0 auto; /* 中央揃え */
padding: 20px; /* 内側の余白 */
}
/* プロフィール画像のデザイン */
.profile-image {
width: 200px;
height: 200px;
border-radius: 50%; /* 円形にする */
margin: 20px auto; /* 上下左右の余白 */
display: block; /* ブロック要素として表示 */
}
/* セクションの余白設定 */
.about, .skills {
margin-bottom: 40px; /* 下側の余白 */
}
/* スキルリストのデザイン */
.skills-list {
list-style: none;
display: flex; /* 横並びに */
flex-wrap: wrap; /* 折り返し可能に */
gap: 10px; /* 項目間の隙間 */
margin-top: 15px;
}
/* スキル項目のデザイン */
.skills-list li {
background-color: #e9ecef; /* 背景色 */
padding: 5px 15px; /* 内側の余白 */
border-radius: 20px; /* 角を丸く */
}
/* フッター部分のデザイン */
.footer {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
margin-top: 40px;
}
/* SNSリンクのデザイン */
.social-links {
margin-bottom: 15px;
}
.social-links a {
margin: 0 10px;
color: #333;
text-decoration: none;
}スマートフォン対応のデザイン
最後に、スマートフォンでも見やすいように調整を加えます：
/* 画面幅が768px以下になった時のデザイン */
@media screen and (max-width: 768px) {
/* メニューを縦並びに変更 */
.nav-list {
flex-direction: column;
gap: 10px;
}
/* 余白を少し小さく */
.main {
padding: 10px;
}
/* プロフィール画像を小さく */
.profile-image {
width: 150px;
height: 150px;
}
}作成のポイント
HTMLは内容の構造を意識して書く
CSSは共通するデザインをまとめて書く
クラス名は分かりやすい名前を付ける
スマートフォンでも見やすいように調整する
このコードをコピーして、自分好みにカスタマイズしてみましょう。色や大きさを変えたり、新しいセクションを追加したりして、オリジナルのWebサイトを作ってみてください！