【HTML/CSS実践】初心者でも作れる！シンプルな自己紹介サイトの作り方

「知識はついたけれど、どうやって1つのサイトにまとめればいいの？」
「真っ白な画面から作り始めるのが不安……」

そんな悩みを持つ方のために、今回は実践形式で「自己紹介サイト」を作っていきます。自分の名前、スキル、趣味を載せたページを作ることは、Web制作の基礎を固める最高の練習になります。

サイトの設計図を作ろう（準備編）
1. どんなコンテンツを載せるか決める
2. 完成イメージを想像する
HTMLで「骨組み」を組み立てる
CSSで「見た目」を整える（スタイリング編）
プロっぽく見せるための「こだわり」ポイント
1. 背景色と余白（margin/padding）の黄金比
2. ホバーアクションを追加する
初心者がハマる！トラブルシューティング
1. 画像が表示されない
2. レイアウトが崩れる（要素がはみ出す）
まとめ：自分の作品を世界に公開しよう！
1. 今回学んだことの復習
2. 次のステップ

サイトの設計図を作ろう（準備編）

いきなりコードを書き始めるのは、地図を持たずに旅に出るようなものです。まずは「何を作るか」を明確にします。

どんなコンテンツを載せるか決める

今回作る自己紹介際とには、以下の4つの要素を盛り込みます。

ヘッダー：サイトのタイトルやメニュー
メインビジュアル：一番大きな自分の名前や挨拶
プロフィールセクション：自己紹介文と写真
スキル・趣味セクション：自分が何ができるか（Flexboxを使用）
フッター：コピーライト（著作権表示）

完成イメージを想像する

今回は、清潔感のある「白」を基調にアクセントカラーを「水色」にしたモダンなデザインを目指します。

以下は、今回の完成サイトです。

HTMLで「骨組み」を組み立てる

まずはHTMLでサイトの構造を作ります。別記事で学んだ「セマンティックHTML（意味のあるタグ選び）」を意識して書いていきましょう。

<head>内の設定と外部ファイルの読み込み

まずは、CSSファイルと連携させるための基本設定です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio | 自己紹介サイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

ヘッダーとメインビジュアル

次に、ページの上部を作ります。

<header>
    <div class="header-container">
      <h1>My Name</h1>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#skills">Skills</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h2>Welcome to My Site</h2>
      <p>Web制作を学んでいる初心者エンジニアです。</p>
    </div>
  </section>

自己紹介とスキル一覧（Flexboxの活用）

ここで、自分の詳細とスキルを並べます。

<main id="about">
    <section class="about-me">
      <h2>About Me</h2>
      <div class="profile-container">
        <div class="profile-text">
          <p>ここに自己紹介文が入ります。好きなことや、今頑張っていることを書いてみましょう。</p>
        </div>
      </div>
    </section>

    <section id="skills" class="skills">
      <h2>Skills</h2>
      <div class="skill-list">
        <div class="skill-item"><h3>HTML</h3><p>構造を正しく書けます。</p></div>
        <div class="skill-item"><h3>CSS</h3><p>デザインを整えられます。</p></div>
        <div class="skill-item"><h3>JS</h3><p>勉強中です！</p></div>
      </div>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 My Name Portfolio</p>
  </footer>
</body>
</html>

CSSで「見た目」を整える（スタイリング編）

骨組みができたら、CSSで魔法をかけていきましょう。ここでは「ボックスモデル」と「Flexbox」の知識が鍵になります。

全体設定が共通スタイル

まずはブラウザ特有の余白を消し、フォントや全体の雰囲気を整えます。

/* 全体の初期設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 以前学んだサイズ計算の罠を防ぐ設定 */
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.8; /* 行間を空けて読みやすく */
  color: #333;
  background-color: #f9f9f9;
}

h2 {
  text-align: center;
  margin: 40px 0;
  font-size: 28px;
}

ヘッダーをFlexboxで横並びにする

ロゴを左、メニューを右に配置します。

header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  position: sticky; /* スクロールしても上についてくる */
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #0077b6;
  font-weight: bold;
}

メインビジュアル（ヒーローセクション）のデザイン

大きな背景色をつけて、中央にメッセージを配置します。

.hero {
  background-color: #0077b6;
  color: white;
  padding: 100px 20px;
  text-align: center;
}

.hero h2 {
  font-size: 48px;
  margin-bottom: 10px;
}

スキルカードを並べる

ここでFlexboxの本領発揮です。3つのスキルを均等に並べます。

.skill-list {
  display: flex;
  justify-content: center;
  gap: 20px; /* 要素同士の隙間を空ける便利なプロパティ */
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.skill-item {
  background-color: white;
  padding: 30px;
  border-radius: 10px; /* 角を丸くする */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 軽い影をつける */
  flex: 1; /* 幅を均等にする */
  text-align: center;
}

プロっぽく見せるための「こだわり」ポイント

コードをかけたら、細部を微調整してクオリティを上げましょう。

背景色と余白（margin/padding）の黄金比

背景がずっと白だと単調になります。セクションごとに「白→薄いグレー→白」と背景色を交互に変えるだけで、情報の区切りが明確になり、ぐっとプロっぽくなります。

また、paddingは「ちょっと広すぎるかな？」と思うくらい（上下60px〜80px程度）とると、高級感が出ます。

ホバーアクションを追加する

リンクの上にマウスを置いた時に色が変わる設定です。

nav ul li a:hover {
  color: #00b4d8;
  text-decoration: underline;
}

.skill-item:hover {
  transform: translateY(-5px); /* 少し上に浮き上がる */
  transition: 0.3s; /* 動きを滑らかにする */
}