HTML/CSS入門⑮　Webサイトのトップページを仕上げよう！（総まとめ）

HTML/CSS入門 HTML/CSS入門

このシリーズもいよいよ最終回！
ここでは、これまで学んできた HTML・CSS の総まとめとして、
“実践的なトップページ” を完成させるステップ を解説します！

  • header / nav
  • hero（大見出し）
  • サービス紹介
  • お知らせ（ニュース）
  • お問い合わせボタン
  • footer

まだまだできることは無限大なので、これを第１歩にさらに楽しんでページ作成していきましょう！

では始めていきましょーう！

トップページ全体のレイアウト構成

今回作るページは以下のような王道構成👇

【1】ヘッダー（ロゴ + ナビ）
【2】ヒーローセクション（キャッチコピー）
【3】サービス紹介（3つのカード）
【4】ニュース・お知らせ（リスト）
【5】お問い合わせボタン
【6】フッター

一番使い回しやすい基本型。
これをもとに応用していくのもいいと思います。

HTML：トップページの骨組み（index.html）

以下のHTMLは そのままコピペで動作する完成版 です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RyoPro Site | トップページ</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="#news">お知らせ</a>
      <a href="#contact">お問い合わせ</a>
    </nav>
  </header>

  <!-- ヒーロー -->
  <section class="hero">
    <h2>あなたの学習を加速させるWebサイト</h2>
    <p>HTML・CSS・Javaなどの学習に役立つ情報を発信しています。</p>
    <a href="#service" class="btn">サービスを見る</a>
  </section>

  <!-- サービス紹介 -->
  <section id="service" class="service">
    <h2>サービス一覧</h2>
    <div class="cards">
      <div class="card">
        <h3>HTML/CSS講座</h3>
        <p>初心者向けに基礎から丁寧に学べます。</p>
      </div>
      <div class="card">
        <h3>Java入門講座</h3>
        <p>実務でも使えるJavaプログラミングの解説。</p>
      </div>
      <div class="card">
        <h3>Webアプリ開発</h3>
        <p>Spring Bootを使った本格的な開発まで解説。</p>
      </div>
    </div>
  </section>

  <!-- ニュース・お知らせ -->
  <section id="news" class="news">
    <h2>お知らせ</h2>
    <ul class="news-list">
      <li>2025.01.15　Java入門シリーズを更新しました</li>
      <li>2025.01.10　HTML/CSS講座の新章を追加しました</li>
      <li>2025.01.05　サイトをリニューアルしました</li>
    </ul>
  </section>

  <!-- お問い合わせ -->
  <section id="contact" class="contact">
    <h2>お問い合わせ</h2>
    <p>サービスに関するご質問など、お気軽にどうぞ。</p>
    <a href="#" class="btn">お問い合わせはこちら</a>
  </section>

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

</body>
</html>

ちなみにindex.htmlと書いているのは、仮のファイル名なのでお好きな名前で作成してください。

ただ、html内に記載している
「<link rel=”stylesheet” href=”style.css”>」については、

ご自身の作成したCSSファイル名に変更してください。
もし変更とかしたくないなぁと思われるた場合は、CSSファイルを作成するときに
「style.css」という名前でファイルを作成してください。

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/?web') center/cover;
  color: #fff;
  text-align: center;
  padding: 120px 20px;
}

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

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

/* サービス紹介 */
.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;
}

/* ニュース */
.news {
  padding: 60px 20px;
}

.news-list {
  list-style: none;
  padding: 0;
}
.news-list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

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

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

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

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

実際のページ画像は以下になります：

１枚目

２枚目

３枚目

画面が入りきらないのでまたまた複数枚の画像になりました。
シンプルゆえに、カスタマイズしやすいのではないかと思います！

このトップページで学べること

  • Header / Nav のレイアウト
  • Hero セクションの作り方
  • サービス紹介のカード配置
  • ニュースリストのUI
  • ボタンデザイン
  • レスポンシブ対応（スマホ専用CSS）
  • Grid と Flexbox の実践的使い分け

発展：もっとレベルアップするには？

  • Google Fonts を使ってフォント変更
  • カードにホバーアニメーションを追加
  • ナビゲーションを固定ヘッダーにする
  • フッターにSNSリンクを追加
  • レスポンシブのブレイクポイント追加

こんなものも参考にしながら、自分の個性や思い描く理想をどんどん詰め込んじゃってください！

この記事のまとめ

  • HTML/CSSの基礎を全て使った総まとめ
  • 実務でも使われるトップページ構成を再現
  • Hero / Cards / News / Footer の実装
  • レスポンシブ対応でスマホでも美しく表示
  • このページを応用すればポートフォリオも作れる

これで HTML/CSS 入門シリーズは完走です！
ここから先は さらに深くCSSデザインを学んでいくもよし、
「JavaScript」を学んで更なるアニメーションや技術を使って、出来ることの幅を広めるもよしです！

最後に

皆様、お疲れ様でした！

つたない記事ではあったかもしれませんが少しでも参考になればと思っています！

本記事での最後でも記載していましたが、「JavaScript」の記事も出そうかなと思ってます！
いつになるかは分かりませんが、、、
できるだけ早めにはしようかなと（笑）

実際ホームページ作成やブログ投稿などはWordPressなどを使ってやることが多いので、自分で１から作る人は少ないかなぁ。
なので、このようにhtmlやcssを学んで、１から作って～は時間の無駄になるかもと思う人もいるかもしれませんね。
そんな私も実際ブログ投稿ではhtmlもcssも書いてませんしねぇ。WordPressさまさまですなぁ、、、

それにしたって技術というのは一生ものだと僕は思ってますし、
何より自分が現在の仕事につけたのはそういった技術を持っていたというのもあります。

将来的には自分で１から作りたいとも考えてますしね。
ホームページだけでなく、webアプリとか作る際にも使えますしね。

長々と話しましたが、この辺で終わりにしておきます。

ではでは！次回またどこかの記事でお会いしましょう！バイバーイ！


コメント

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