A3 Code Note

10/23/2025

左右に分かれたスライドショー付きポートフォリオサイトをつくろう！

以下サイトのような、画面の左半分にふわっと切り替わるスライドショー、右半分にスクロールできるテキストエリアを配置したポートフォリオサイトの作り方を紹介します✨

https://komori-aya.com
https://kimiko-design.studio.site/

💡 完成イメージ

左側が写真のスライドショー。右側は自己紹介や作品リストなど、自由にスクロールできるスペースです。

📁 ファイル構成

3つのファイルを作成します。

index.html
style.css
script.js

🧩 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>Split-Screen Portfolio</title>

    <!-- Splide.js のCSSを読み込み -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
    />

    <!-- 自作CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="wrap">
      <!-- 左：スライドショー -->
      <div class="left">
        <div id="fade-slider" class="splide">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <img src="https://picsum.photos/800/1000?random=1" alt="" />
              </li>
              <li class="splide__slide">
                <img src="https://picsum.photos/800/1000?random=2" alt="" />
              </li>
              <li class="splide__slide">
                <img src="https://picsum.photos/800/1000?random=3" alt="" />
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 右：スクロールできるコンテンツ -->
      <div class="right">
        <div class="work">
          <img src="https://picsum.photos/600/400?random=10" alt="" />
          <h2>Project One</h2>
          <p>Web / Illustration</p>
        </div>
        <div class="work">
          <img src="https://picsum.photos/600/400?random=11" alt="" />
          <h2>Project Two</h2>
          <p>Character / Branding</p>
        </div>
        <div class="work">
          <img src="https://picsum.photos/600/400?random=12" alt="" />
          <h2>Project Three</h2>
          <p>Graphic / Animation</p>
        </div>
        <div class="work">
          <img src="https://picsum.photos/600/400?random=13" alt="" />
          <h2>Project Four</h2>
          <p>Logo / Web</p>
        </div>
      </div>
    </div>

    <!-- Splide.js の本体スクリプト -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

    <!-- 自作JS -->
    <script src="script.js"></script>
  </body>
</html>

🎨 CSS（style.css）

body {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: #ff9191;
  color: #fff;
}
.wrap {
  display: flex;
  height: 100vh;
}

/* 左：固定スライドショー */
.left {
  position: sticky;
  top: 0;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}

.splide {
  height: 100%;
}

.splide__slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* 右：スクロール部分 */
.right {
  width: 50%;
  background: #fff;
  color: #000;
  overflow-y: auto;
  height: 100vh;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

.work {
  margin-bottom: 3rem;
}

.work img {
  width: 100%;
  border-radius: 10px;
}

.work h2 {
  margin-top: 0.5rem;
  font-size: 1.3rem;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .wrap {
    display: block;
  }
  .left,
  .right {
    width: 100%;
    height: auto;
    position: relative;
  }
  .splide__slide img {
    height: auto;
  }
}

⚡ JS（script.js）

document.addEventListener("DOMContentLoaded", function () {
  new Splide("#fade-slider", {
    type: "fade",
    rewind: true,
    autoplay: true,
    interval: 3000,
    speed: 1500,
    arrows: false,
    pagination: false,
    pauseOnHover: false,
  }).mount();

  // 右側を取得
  const right = document.querySelector(".right");

  // スクロールイベントを左半分全体で拾う
  const leftOverlay = document.querySelector(".left");

  leftOverlay.addEventListener("wheel", (e) => {
    e.preventDefault();
    right.scrollTop += e.deltaY;
  });
});

💡ちょっとした解説

  • 左側は Splide.js で作ったフェード切り替えのスライドショー。type: "fade" にするだけでふわっと切り替わります。
  • 右側は通常のスクロールエリア。CSSの overflow-y: auto で縦スクロールを有効にしています。
  • position: sticky を使うことで、左側は固定されたまま右だけがスクロールします。
  • スマホ表示では 縦並びにしています。
  • 左側でもスクロールできるようにJSでスクロールイベントを拾えるようにしています。