HTML/CSS入門⑫シンプルな1ページサイトを実際に作ってみよう！

HTML/CSS入門 HTML/CSS入門

ここまで HTML と CSS の基礎を学んできましたが、
今回はいよいよ 実際に1ページのWebサイトを完成させる実践編 です。

  • HTML の構造
  • CSS の装飾
  • Flexbox / Grid の応用
  • レスポンシブ対応

これらをまとめて「本当に使えるWebページ」として形にしていきます。

初心者が 最短でWeb制作の成功体験を作れる内容 になっています！

さくっとコピペでOKなので、自分で書き換えながら模索するもよし！
参考にしながら1から自分で作っていくもよし！
自分なりのやり方で是非成長につなげてみてください！

今回つくる1ページサイトの完成イメージ

構成は以下のような「王道の構成」です👇

---------------------------
  ヘッダー（ロゴ + メニュー）
---------------------------
  ヒーローセクション（大見出し）
---------------------------
  サービス紹介（3つのカード）
---------------------------
  お問い合わせボタン
---------------------------
  フッター
---------------------------

これを実際のHTML/CSSコードを使って完成させていきます。

① 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>シンプル1ページサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ヘッダー -->
  <header class="header">
    <h1 class="logo">RyoPro Site</h1>
    <nav class="nav">
      <a href="#service">サービス</a>
      <a href="#contact">お問い合わせ</a>
    </nav>
  </header>

  <!-- ヒーロー -->
  <section class="hero">
    <h2>あなたのWeb制作をサポートします</h2>
    <p>HTML/CSSを基礎から丁寧に学べる入門サイトです。</p>
  </section>

  <!-- サービス紹介 -->
  <section id="service" class="service">
    <h2>サービス一覧</h2>

    <div class="cards">
      <div class="card">
        <h3>HTML学習</h3>
        <p>Webの基礎となるHTMLを丁寧に解説します。</p>
      </div>
      <div class="card">
        <h3>CSSデザイン</h3>
        <p>見た目を整えるCSSをわかりやすく紹介。</p>
      </div>
      <div class="card">
        <h3>実践サンプル</h3>
        <p>実際のWebサイト例をもとに学習できます。</p>
      </div>
    </div>
  </section>

  <!-- お問い合わせ -->
  <section id="contact" class="contact">
    <h2>お問い合わせ</h2>
    <a href="#" class="btn">お問い合わせはこちら</a>
  </section>

  <!-- フッター -->
  <footer class="footer">
    <p>&copy; 2025 RyoPro Pocket</p>
  </footer>

</body>
</html>

✔ ② CSS：デザインをつける（style.css）

ここでは 最小限シンプルでキレイに見えるCSS を用意しました。

/* 全体設定 */
body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.7;
  color: #333;
}

/* ヘッダー */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f7f7f7;
}

.logo {
  font-size: 24px;
  font-weight: 700;
}

.nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

/* ヒーロー */
.hero {
  background: url('https://source.unsplash.com/1600x600/?coding') center/cover;
  color: #fff;
  text-align: center;
  padding: 120px 20px;
}

.hero h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

/* サービス紹介 */
.service {
  padding: 60px 20px;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.card {
  background: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* お問い合わせ */
.contact {
  text-align: center;
  padding: 60px 20px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #3498db;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
}

/* フッター */
.footer {
  padding: 20px;
  text-align: center;
  background: #f7f7f7;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr; /* スマホは1列 */
  }

  .hero h2 {
    font-size: 28px;
  }
}

実際のページ画像：

ページが画面に入りきらないので、上下2枚になってます。

デザインのポイント解説

① Flexbox（ヘッダー部分）

  • ロゴとメニューが自然に左右配置される
  • スマホでも整えやすい

② Hero（背景画像）

  • cover を使うことで大きな美しい背景になる
  • 文字色は白にして視認性を向上

③ Grid（サービス紹介の3列）

  • repeat(3, 1fr) → PCでは3列
  • スマホでは1列に変更

④ iOS/Android 両方で見やすい文字サイズ

  • line-height:1.7
  • 適度な余白

✔ この1ページサイトで学べること

  • HTMLの構造化
  • セクション分け
  • ヘッダー／メニュー
  • 大見出し（ヒーロー）
  • カードレイアウト
  • ボタンデザイン
  • レスポンシブ対応
  • Grid と Flex の使い分け

初心者が「なるほど、こうやってサイト作るんだ！」と感じられる
絶対に外せない学習ステップです。

発展課題

記事をさらに深めたい場合、以下も追加するといいと思います！

  • 自分で背景画像を差し替えてみる
  • カードに hover アニメーションを付ける
  • Google Fonts を使って高級感を出す
  • サービスの数を増やしてみる
  • ボタンに影やホバー効果を追加する

この記事のまとめ

  • HTML/CSSの基礎をまとめて実践できる
  • 1ページサイトは最もよく使われる構成
  • Flexbox + Grid + レスポンシブの要点を学べる
  • 初心者でもすぐに「形にできる」成功体験になる

次はいよいよ ⑬：おしゃれなボタン・カードデザイン特集 です。
ここから“初心者を抜ける見た目の作り方”を学ぶフェーズに入ります。

ちょっとお話（興味ない方はスキップ推奨）

みなさまお疲れ様です。

今回でいい区切りになりましたので、少し自分からのお話もしようかなと。

私の記事では、細かい部分や詳しく理解したい部分はあまり文章として解説してませんね。
他にも、HTML/CSSの実際のレイアウト例なども画像としては置いてません。（あるところも少しあったかも）

悪く言えば不親切ですが、ご丁寧に何でもかんでも解説や説明をしても全部頭に入ってきませんよね？私は無理でした。

他記事でも述べたことかもしれませんが、自分で調べて深めていく過程が最も成長であったり、俺やってる感があります。

実際自分も参考書を買ってはノートにまとめて、細かいところも覚えきゃ～とがむしゃらにやっていた時期もありましたが、今となっては「コード書いて何か作ったほうが早くね？」ってなってます、、、

そう！何か作ることが1番の勉強になります。本当に。

何か作りたいものがある方は是非作りましょう！
もちろん初めのうちは既存のシステムやサイトのようなクオリティの物は作れません。
少しづつ少しづつ近づいていけばいいと思います！

何か作りたいものが分からない、中々見つからない方もいると思います。
そんな方は今自分が使っているアプリを自分なりに模倣してみてください！

例えば、「家計簿管理」、「ToDoアプリ（よく練習で作られてます）」、「チャットアプリ」などなど。

もちろん今の知識だけではできないかもしれません。
だからできるようになるために調べて、作って、動かす。

これを繰り返していきましょう。

初めは画面のデザインだけでも、後々機能を動作できるようになればOKなのです！

長々と書きましたが、これぐらいにします。
見てくださかったは本当にありがとうございました！

少しでも皆さんの力になれれば幸いです！

ではでは！次回！：HTML/CSS入門⑬　おしゃれなボタン・カードデザイン特集

コメント

タイトルとURLをコピーしました