【初心者向け】シンプルな「Aboutページ」を作ろう！

Webサイトを作るとき、自己紹介や企業の紹介をまとめた「Aboutページ」は欠かせません！💡
この記事では、HTML・CSS・JavaScriptを使って、おしゃれなAboutページを作成 する方法を解説します。

1. 必要な準備

まず、プロジェクトフォルダ内に about.html という新しいファイルを作成しましょう。
また、デザイン用の style.css、動きをつける script.js も使用します。

📂 フォルダ構成

bashCopy/my-website
│── index.html
│── about.html  ← 今回作るページ
│── style.css
│── script.js
│── images/

2. HTMLでAboutページの基本構造を作成

まずは、about.html に以下のコードを書きます。

📌 about.html（基本構造）

htmlCopy<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - 私について</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>About Me</h1>
        <nav>
            <ul>
                <li><a href="index.html">ホーム</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </header>

    <section class="about-container">
        <div class="about-image">
            <img src="images/profile.jpg" alt="プロフィール画像">
        </div>
        <div class="about-text">
            <h2>山田 太郎</h2>
            <p>Webデザイナー / フロントエンドエンジニア</p>
            <p>HTML・CSS・JavaScriptを使って、美しく使いやすいWebサイトを作るのが得意です。</p>
            <button id="moreInfoBtn">もっと詳しく</button>
            <div id="moreInfo" class="hidden">
                <p>趣味はカフェ巡りと写真撮影。現在はReactを学習中！</p>
            </div>
        </div>
    </section>

    <footer>
        <p>&copy; 2024 山田 太郎</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

🔹 ポイント
✅ <header> でナビゲーションを追加し、他のページへ移動できるようにする。
✅ about-container を使って画像とテキストを横並びにする。
✅ 「もっと詳しく」ボタンを押すと詳細が表示される仕組みを作る。
✅ 「index.html」ファイルの<header>部分に以下を追加する。
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">About</a></li>
</ul>

3. CSSでデザインを整える

次に、style.css にAboutページのスタイルを追加します。

📌 style.css（デザイン設定）

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #f4f4f4;
}

/* ヘッダーのデザイン */
header {
  background-color: #333;
  color: white;
  padding: 20px;
  font-size: 24px;
}
nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}
.hidden {
  display: none;
}

/* フェードインアニメーション */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
/* Aboutページのレイアウト */
.about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  max-width: 800px;
  margin: auto;
}

.about-image img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.about-text {
  margin-left: 30px;
  text-align: left;
}

.about-text h2 {
  color: #333;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

/* プロフィールセクション */
.profile {
  margin: 30px auto;
  padding: 20px;
  background-color: white;
  width: 300px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 自己紹介セクション */
.about {
  margin: 30px;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* フッター */
footer {
  background-color: #333;
  color: white;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

🔹 デザインのポイント
✅ display: flex; を使って、画像とテキストを横並びに配置。
✅ border-radius: 50%; でプロフィール画像を丸くする。
✅ button:hover を設定して、ボタンの色を変化させる。

4. JavaScriptで「もっと詳しく」ボタンの動きを追加

最後に、script.js にJavaScriptを追加して、ボタンをクリックすると詳細が表示されるようにします。

📌 script.js（動的な動きの追加）

document.addEventListener("DOMContentLoaded", function () {
  // ボタンをクリックするとプロフィール詳細を表示
  const toggleButton = document.getElementById("toggleProfile");
  const profileDetail = document.getElementById("profileDetail");

  toggleButton.addEventListener("click", function () {
      if (profileDetail.classList.contains("hidden")) {
          profileDetail.classList.remove("hidden");
          toggleButton.textContent = "プロフィールを隠す";
      } else {
          profileDetail.classList.add("hidden");
          toggleButton.textContent = "プロフィールを見る";
      }
  });

  // 自己紹介をフェードインさせる
  const aboutText = document.getElementById("aboutText");
  aboutText.classList.add("fade-in");

  window.addEventListener("load", function () {
      setTimeout(() => {
          aboutText.classList.add("show");
      }, 500);
  });
});
document.addEventListener("DOMContentLoaded", function () {
  const moreInfoBtn = document.getElementById("moreInfoBtn");
  const moreInfo = document.getElementById("moreInfo");

  moreInfoBtn.addEventListener("click", function () {
      if (moreInfo.classList.contains("hidden")) {
          moreInfo.classList.remove("hidden");
          moreInfoBtn.textContent = "閉じる";
      } else {
          moreInfo.classList.add("hidden");
          moreInfoBtn.textContent = "もっと詳しく";
      }
  });
});

🔹 JavaScriptのポイント
✅ hidden クラスを切り替えて、詳細情報の表示/非表示を制御。
✅ ボタンのテキストを 「閉じる」⇔「もっと詳しく」 に変更。

5. Webページをブラウザで開いて確認

✅ ローカルで開く

  1. about.html をブラウザで開く。
  2. 「もっと詳しく」ボタンを押して、詳細が表示されるか確認。

✅ VSCodeのLive Serverを使用

  • VSCodeのLive Server拡張機能を使うと、リアルタイムで変更を確認できます！

6. さらにカスタマイズするアイデア

✅ アニメーションを追加

  • fade-in クラスを使ってフェードインアニメーションを追加。

✅ 背景画像を変更

  • background-image を設定して、おしゃれな背景を追加。

✅ SNSリンクを追加

  • a タグを使って、TwitterやInstagramのリンクを掲載。

まとめ

これで、シンプルなAboutページが完成しました！💻✨

✅ HTMLでページの構造を作成
✅ CSSでレイアウトを調整し、おしゃれにデザイン
✅ JavaScriptで「もっと詳しく」ボタンの動きを追加

少しずつカスタマイズして、自分だけのオリジナルAboutページを作ってみましょう！🚀

コメント

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