シンプルなポートフォリオサイトの作り方

このサイトは、HTML、CSS、JavaScriptを駆使して、シンプルながらも魅力的な自己表現を実現するポートフォリオサイトの例です。
セマンティックHTMLを活用して構造を整え、レスポンシブデザインと洗練されたCSSスタイリングで見た目を向上、そしてJavaScriptで動的なコンテンツを実現します。

イントロダクション
1. HTMLで構造を定義する
2. CSSでデザインとレイアウトを整える
3. JavaScriptで動的にコンテンツを生成する
4. 追加のインタラクティブ要素
5. まとめと今後の展望
6. 参考リンク

イントロダクション

Web開発の基本は、HTMLで構造を作り、CSSでデザインを整え、JavaScriptで動きを加えることです。
このポートフォリオサイトでは、各プロジェクトのサムネイル、タイトル、概要をカード形式で表示し、訪問者に直感的に自分のスキルや作品をアピールします。
デスクトップだけでなく、モバイルデバイスにも最適化されたレスポンシブなレイアウトで、どのデバイスからも美しい表示を実現しています。

1. HTMLで構造を定義する

最初に、HTMLでサイト全体の構造を定義します。header、nav、main、そしてfooterに分け、各部分に意味を持たせます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ポートフォリオサイト</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My Portfolio</h1>
    <nav>
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">作品集</a></li>
        <li><a href="#">プロフィール</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="portfolio-grid">
      <!-- 各カードはここに挿入される -->
    </section>
  </main>
  <footer>
    © 2025 My Portfolio
  </footer>
  <script src="script.js"></script>
</body>
</html>

2. CSSでデザインとレイアウトを整える

CSSを用いて、サイト全体のデザインを整えます。ここでは、グリッドレイアウトを使ってポートフォリオカードを配置し、レスポンシブ対応にも注力します。
基本的なカラー、フォント、マージン、パディングの設定に加え、ホバー時のエフェクトやメディアクエリを活用した調整方法を解説します。


/* 基本スタイル */
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
  color: #2C3E50;
  padding: 20px;
}

/* ヘッダーとナビゲーション */
header {
  background-color: #333;
  padding: 20px;
  color: #fff;
}
header h1 {
  margin-bottom: 10px;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}
nav ul li {
  margin: 0 15px;
}
nav ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
nav ul li a:hover {
  color: #E74C3C;
}

/* ポートフォリオグリッド */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

/* カードスタイル */
.portfolio-item {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.portfolio-item:hover {
  transform: translateY(-5px);
}
.portfolio-image {
  width: 100%;
  display: block;
}
.portfolio-details {
  padding: 15px;
  text-align: left;
}
.portfolio-details h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}
.portfolio-details p {
  font-size: 0.95rem;
  color: #555;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
  nav ul li {
    margin: 10px 0;
  }
  .portfolio-details h3 {
    font-size: 1rem;
  }
  .portfolio-details p {
    font-size: 0.9rem;
  }
}

3. JavaScriptで動的にコンテンツを生成する

JavaScriptを用いて、ポートフォリオカードのコンテンツを動的に生成します。
ここでは、作品の画像、タイトル、概要が格納された配列を元に、各カードを生成し、グリッドレイアウトに追加する方法を解説します。


// サンプルデータ
const portfolioData = [
  {
    image: "https://kamechannel.com/images/portfolio1.jpg",
    title: "プロジェクト1",
    description: "これはプロジェクト1の概要です。モダンなデザインとレスポンシブなレイアウトが特徴です。"
  },
  {
    image: "https://kamechannel.com/images/portfolio2.jpg",
    title: "プロジェクト2",
    description: "プロジェクト2の概要です。ユーザー体験に重点を置いたデザインを実現しました。"
  },
  {
    image: "https://kamechannel.com/images/portfolio3.jpg",
    title: "プロジェクト3",
    description: "プロジェクト3は、最新のWeb技術を駆使したソリューションです。"
  }
  // 必要に応じてデータを追加
];

function loadPortfolio() {
  const grid = document.querySelector(".portfolio-grid");
  grid.innerHTML = ""; // 既存のコンテンツをクリア
  
  portfolioData.forEach(item => {
    // カードの作成
    const card = document.createElement("div");
    card.classList.add("portfolio-item");
    
    // 画像の追加
    const img = document.createElement("img");
    img.classList.add("portfolio-image");
    img.src = item.image;
    img.alt = item.title;
    card.appendChild(img);
    
    // 詳細部分の追加
    const details = document.createElement("div");
    details.classList.add("portfolio-details");
    
    const title = document.createElement("h3");
    title.textContent = item.title;
    details.appendChild(title);
    
    const desc = document.createElement("p");
    desc.textContent = item.description;
    details.appendChild(desc);
    
    card.appendChild(details);
    grid.appendChild(card);
  });
}

// ページ読み込み時にポートフォリオを生成
document.addEventListener("DOMContentLoaded", loadPortfolio);

4. 追加のインタラクティブ要素

JavaScriptを使って、ユーザーインタラクションを向上させるために、各カードにクリックイベントを追加して詳細ページに遷移させたり、モーダルで拡大画像を表示するなどの工夫が可能です。
以下は、クリックでモーダルを表示する簡単な例です。


function showModal(imageSrc) {
  // モーダル要素を生成
  let modal = document.getElementById("modal");
  if (!modal) {
    modal = document.createElement("div");
    modal.id = "modal";
    modal.style.position = "fixed";
    modal.style.top = "0";
    modal.style.left = "0";
    modal.style.width = "100%";
    modal.style.height = "100%";
    modal.style.backgroundColor = "rgba(0,0,0,0.8)";
    modal.style.display = "flex";
    modal.style.justifyContent = "center";
    modal.style.alignItems = "center";
    modal.style.zIndex = "1000";
    modal.addEventListener("click", function() {
      modal.style.display = "none";
    });
    document.body.appendChild(modal);
  }
  
  modal.innerHTML = "<img src='" + imageSrc + "' alt='拡大画像' style='max-width:90%; max-height:90%; border:5px solid #fff; border-radius:5px;'>";
  modal.style.display = "flex";
}

// 各カードの画像にクリックイベントを追加（例）
document.querySelectorAll(".portfolio-image").forEach(img => {
  img.addEventListener("click", function() {
    showModal(this.src);
  });
});

5. まとめと今後の展望

本記事では、HTML5とCSS3、そしてJavaScriptを活用して、プロフェッショナルなポートフォリオサイトを構築する方法を詳しく解説しました。
セマンティックHTMLを用いて意味のある構造を作成し、レスポンシブデザインによりどのデバイスでも快適な表示を実現。
CSSのグリッドレイアウトとフレックスボックスを駆使して、柔軟で美しいカードデザインを構築し、JavaScriptによる動的なコンテンツ生成やモーダル表示を追加することで、インタラクティブなユーザー体験を実現しました。
この基本をマスターすることで、あなた自身のスキルアップだけでなく、ポートフォリオサイトを通じた自己表現も格段に向上するはずです。
今後は、さらにJavaScriptライブラリとの連携や、より洗練されたアニメーション、ユーザーインタラクションの強化に挑戦してみましょう。