2026.04.13 2026.04.21

【CSS 4-1】ミニ制作｜自己紹介ページを作る｜見出し・画像・プロフィールを1ページにまとめる（初心者向け）

toshi

記事内に商品プロモーションを含む場合があります

※この記事は CSS 4-1「自己紹介ページを作る」です。
ここでは最初からおしゃれさを目指すより、“読みやすく、伝わる1ページ”を作ることを優先します。
画像は前回まで使ってきた sample.jpg をそのまま使って大丈夫です。

ここまでの CSS では、
色、余白、箱、並び方、つまずき対策まで見てきました。

今回はその土台を使って、
自己紹介ページ
を1ページとして完成させます。

つまり今回は、
「どの指定が何に効くか」を確認する回から一歩進んで、
実際に見せるページを作る回
です。

「自己紹介ページは“情報を全部盛る”より“読みやすく並べる”方が大事です」

自己紹介ページで最初に入れたいのは、このくらいで十分です。

名前
短い紹介文
画像
好きなこと / できること
リンク

今回はこの5つを1ページにまとめます。

ここまで学んだ
色・余白・箱・Flex
をまとめて使うと、
最初の実用ページとしてかなり形になります。

最初から完璧に書く必要はありません。
“見やすい順番で置けた”時点でかなり前進です。

今回のゴール
まずは完成形を見る
どこを見ればいい？
自己紹介ページに入れる要素は、最初は5つで十分です
画像+文章は Flex で並べるとかなり見やすい
文章は“短く区切る”だけで読みやすくなります
リストを使うと整理しやすいです
リンクは“次に見てほしい場所”
よくあるつまずき
今回のまとめ
今日のゴール確認
CSS 4-2へ

ここまでできればOK

今回のゴール

HTMLとCSSで自己紹介ページを1ページ完成できる
名前・紹介文・画像・項目・リンクを整理して置ける
Flex を使って「画像＋文章」の並びを作れる
次のお問い合わせページ制作へ進む準備ができる

コピペOK

まずは完成形を見る

まずは index.html をこの形で作ります。
画像は images/sample.jpg を使う前提です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自己紹介ページ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <h1>自己紹介ページ</h1>
    <p class="lead">
      HTMLとCSSを使って、自分のことが伝わる1ページを作る練習です。
    </p>

    <section class="profile-layout">
      <img src="images/sample.jpg" alt="プロフィール画像" />

      <div class="profile-text">
        <h2>toshi</h2>
        <p>
          Webまわりの学習と制作を進めながら、
          少しずつ“作って分かる”を増やしています。
        </p>
        <p>
          このページでは、自己紹介に必要な内容を
          読みやすい形で1ページにまとめています。
        </p>
      </div>
    </section>

    <section class="profile-section">
      <h2>好きなこと</h2>
      <ul>
        <li>HTMLとCSSを触って、見た目が変わるのを見ること</li>
        <li>分かりにくい所を、やさしく整理すること</li>
        <li>1ページを少しずつ整えていくこと</li>
      </ul>
    </section>

    <section class="profile-section">
      <h2>できること</h2>
      <ul>
        <li>見出し・文章・画像を使った基本的なページ作成</li>
        <li>CSSで色・余白・箱・並び方を整えること</li>
        <li>読みやすい形に整理して見せること</li>
      </ul>
    </section>

    <section class="profile-section">
      <h2>リンク</h2>
      <p><a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener noreferrer">MDN（日本語）を見る</a></p>
    </section>
  </main>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自己紹介ページ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <h1>自己紹介ページ</h1>
    <p class="lead">
      HTMLとCSSを使って、自分のことが伝わる1ページを作る練習です。
    </p>

    <section class="profile-layout">
      <img src="images/sample.jpg" alt="プロフィール画像" />

      <div class="profile-text">
        <h2>toshi</h2>
        <p>
          Webまわりの学習と制作を進めながら、
          少しずつ“作って分かる”を増やしています。
        </p>
        <p>
          このページでは、自己紹介に必要な内容を
          読みやすい形で1ページにまとめています。
        </p>
      </div>
    </section>

    <section class="profile-section">
      <h2>好きなこと</h2>
      <ul>
        <li>HTMLとCSSを触って、見た目が変わるのを見ること</li>
        <li>分かりにくい所を、やさしく整理すること</li>
        <li>1ページを少しずつ整えていくこと</li>
      </ul>
    </section>

    <section class="profile-section">
      <h2>できること</h2>
      <ul>
        <li>見出し・文章・画像を使った基本的なページ作成</li>
        <li>CSSで色・余白・箱・並び方を整えること</li>
        <li>読みやすい形に整理して見せること</li>
      </ul>
    </section>

    <section class="profile-section">
      <h2>リンク</h2>
      <p><a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener noreferrer">MDN（日本語）を見る</a></p>
    </section>
  </main>
</body>
</html>

HTML

次に、style.css は下の形で追加してください。
ここまでの「色・余白・箱・Flex」をまとめて使います。

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

main {
  background-color: #ffffff;
  width: 760px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

h1 {
  color: #2563eb;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

h2 {
  color: #111827;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

p {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 16px;
}

a {
  color: #2563eb;
}

.lead {
  margin-bottom: 24px;
}

.profile-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.profile-layout img {
  width: 220px;
  height: auto;
  display: block;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.profile-text {
  flex: 1;
}

.profile-section {
  margin-top: 32px;
}

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

body {
  background-color: #f3f4f6;
  margin: 0;
  padding: 24px;
  color: #333333;
  line-height: 1.8;
  font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

main {
  background-color: #ffffff;
  width: 760px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 24px;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

h1 {
  color: #2563eb;
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

h2 {
  color: #111827;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

p {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 16px;
}

a {
  color: #2563eb;
}

.lead {
  margin-bottom: 24px;
}

.profile-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.profile-layout img {
  width: 220px;
  height: auto;
  display: block;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.profile-text {
  flex: 1;
}

.profile-section {
  margin-top: 32px;
}

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

CSS

toshi

今回は “プロフィールを盛る” より、
“読みやすい順番で置く” ことが大事です。

変化のポイント

どこを見ればいい？

入れたもの	変わること
main	ページ全体が1つの箱としてまとまる
profile-layout	画像と文章が横に並びやすくなる
profile-text	文章側が残り幅を使いやすくなる
profile-section	セクションごとの区切りが見えやすくなる
h2 の下線	話題の切り替わりが分かりやすくなる

入れる要素について

自己紹介ページに入れる要素は、最初は5つで十分です

要素	役割
名前	誰のページかを伝える
紹介文	どんな人かを短く伝える
画像	印象を作る
好きなこと / できること	内容を整理して見せる
リンク	次に見てほしい場所を置く

自己紹介ページは、
情報を増やしすぎると逆に読みづらくなります。

最初は、
誰か / どんな人か / 何が好きか / 何ができるか
が見えるだけで十分です。

見やすさ調整

画像+文章は Flex で並べるとかなり見やすい

CSS 3-1 で触った Flex は、
自己紹介ページの最初のブロックと相性が良いです。

.profile-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.profile-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

CSS

この形にすると、
画像の横に紹介文を並べやすくなります。

自己紹介ページは、
画像と文章を横に並べるだけでも“ページらしさ”が
かなり出ます。まずはここを作れれば十分です。

文章の調整

文章は“短く区切る”だけで読みやすくなります

自己紹介文は、長く書きすぎると読みにくくなりやすいです。

今回は 2〜3文くらいで区切って、
短い段落として並べています。

たとえば、

<p>
  Webまわりの学習と制作を進めながら、
  少しずつ“作って分かる”を増やしています。
</p>
<p>
  このページでは、自己紹介に必要な内容を
  読みやすい形で1ページにまとめています。
</p>

<p>
  Webまわりの学習と制作を進めながら、
  少しずつ“作って分かる”を増やしています。
</p>
<p>
  このページでは、自己紹介に必要な内容を
  読みやすい形で1ページにまとめています。
</p>

HTML

のように、短めに分けるだけでもかなり読みやすくなります。

1段落を長くしすぎない
2〜3文くらいで区切る
最初は“上手な文章”より“読みやすさ”を優先する

好きなことやできることを整理する

リストを使うと整理しやすいです

書き方	向いている内容
段落（p）	紹介文や補足
リスト（ul / li）	好きなこと、できること、特徴

自己紹介ページでは、
“まとまりごとに見せる”ことが大切です。

好きなことやできることは、
文章でだらだら書くより、
リストで分けた方が見やすくなります。

1つ置けばOKです

リンクは“次に見てほしい場所”

リンクはたくさん置かなくて大丈夫です。

最初は、
「このページを見た人が次にどこへ行けばいいか」
が1つ見えるだけで十分です。

今回は練習として MDN のリンクを置いていますが、
あとで自分の別ページやお問い合わせページに変えてもOKです。

<p>
  <a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener noreferrer">MDN（日本語）を見る</a>
</p>

<p>
  <a href="https://developer.mozilla.org/ja/" target="_blank" rel="noopener noreferrer">MDN（日本語）を見る</a>
</p>

HTML

少しだけ変えてみる（練習）

h1 の文言を自分の名前やページ名に変える
紹介文を自分向けの内容に変える
画像の width を 220px → 180px にしてみる
好きなこと / できることの項目を自分向けに変える
リンク先を別のページに変えてみる

toshi

この回は、模範解答(参考zip)どおりに動いたあとで
“自分の内容に差し替える”
流れがいちばん進めやすいです。

ここだけ確認

よくあるつまずき

「つまずき① 画像と文章が横に並ばない」

display: flex; を書く場所を見直します。

今回は、
img や .profile-text ではなく、
それらを包んでいる .profile-layout に書きます。

“並び方は親が決める”
と覚えておくと整理しやすいです。

「つまずき② 画像が大きすぎて文章が押し出される」

その時は画像の width を小さくしてみてください。

たとえば、

.profile-layout img {
  width: 180px;
}

.profile-layout img {
  width: 180px;
}

CSS

のようにすると、文章とのバランスが取りやすくなります。

「つまずき③ 自己紹介文が長すぎて読みづらい」

長い時は、文章力より先に“段落を分ける”のがおすすめです。

1つの p に詰め込まず、
2〜3文ごとに分けるだけでもかなり読みやすくなります。

「つまずき④：見出しが全部同じに見える」

h1 と h2 の役割を分けます。

・h1 → ページ全体のタイトル
・h2 → 各セクションの見出し

下線や余白を少し入れると、切り替わりが見えやすくなります。

ここだけ押さえればOK

今回のまとめ

自己紹介ページは、最初は5つの要素で十分
画像＋文章は Flex で並べると見やすい
文章は短く区切ると読みやすい
リストを使うと内容を整理しやすい
今回は“伝わる1ページ”を作れれば十分

できた判定

今日のゴール確認

ここまでできたらOKです。

HTMLとCSSで自己紹介ページを1ページ完成できた
見出し、画像、紹介文、項目、リンクを整理して置けた
ここまでのCSSを“実用ページ”として使えた
次のお問い合わせページ制作へ進みやすくなった

※一例として今回の内容の確認と復習を含めて作成したものを
zipファイルとして置いておきます。今回の階層も下記のようになります。

CSS4-1/
├─ index.html
├─ style.css
└─ images/
　　└─ sample.jpg

CSS4-1 ダウンロード

次に読む

CSS 4-2へ

ここまでで、
“見せるためのページ”として自己紹介ページを作れました。

次は、
入力してもらうためのページとして、
お問い合わせページを作っていきます。

次へ：CSS 4-2 お問い合わせページを作るへ進む

PR：最初の1冊（必要な方だけ）

PR：HTMLを進めるための参考（必要な方だけ）
HTML/CSSの最初の土台づくり用に、1冊だけ置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

リンク

PR：最初の1冊を読み終えた方へ
HTML/CSSの全体像をつかんだあとに、CSSの見た目調整や模擬コーディングをもう少し深めたい方向けの1冊です。
今回は自己紹介ページのように、「見出し・画像・余白・並び方」を組み合わせて整える感覚と相性の良いものを置いておきます。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。

リンク

#CSS #Flexbox #HTML #Web制作 #プロフィールページ #自己紹介ページ