縦長の画像やテーブルを記事に載せたとき、「長すぎるかも」と思ったことはありませんか？

たとえば、ページ全体のスクリーンショットや、項目が多い表など。あまりに縦に長いと、次のコンテンツを見たい読者にとっては、少しわずらわしく感じることもあります。

そこで今回は、縦長コンテンツをスクロール可能にするCSSテクニックをご紹介します。コピペですぐに使えるコードなので、必要な箇所に気軽に取り入れてみてください。

コピペですぐ使いたい方はこちら

WordPressテーマ「PANDORA」
WordPressテーマ「PANDORA」
レイアウト自由自在なブログ・メディアを構築。

スクロールを可能にする基本CSS

縦長コンテンツに次のCSSを指定することで、一定の高さを超えた部分がスクロール可能になります。

max-height: 500px; 高さを指定するCSSプロパティ。500pxが高さ。
overflow-y: auto; 指定した高さを超えた場合、スクロールさせるCSSプロパティ。

以下で活用シーン別のコードをご紹介します。

縦長画像をスクロール表示に

TCD公式のトップページの例

当サイト（TCD公式）のトップページの例

上記のような縦長の画像の場合、縦長画像全体をdivタグで囲って、クラスを指定します。

HTML
<div class="scrollable-box">
<img src="画像のURL">
</div>
CSS
.scrollable-box {
  max-height: 500px;
  overflow-y: auto;
}

縦長テーブルをスクロール表示に

品番 テーマ名 リリース日
 解説記事 販売ページ
TCD116 WordPressテーマ「PANDORA」 2025年5月21日 解説記事 ダウンロード
TCD115 WordPressテーマ「AIDER」 2025年4月30日 解説記事 ダウンロード
TCD114 WordPressテーマ「QUALIA」 2025年4月10日 解説記事 ダウンロード
TCD113 WordPressテーマ「ZEN」 2025年3月7日 解説記事 ダウンロード
TCD112 WordPressテーマ「ARTISAN」 2025年2月20日 解説記事 ダウンロード
TCD111 WordPressテーマ「GRAVITY」 2025年2月7日 解説記事 ダウンロード
TCD110 WordPressテーマ「MONAD」 2024年11月22日 解説記事 ダウンロード
TCD109 WordPressテーマ「CANON」 2025年9月20日 解説記事 ダウンロード
TCD108 WordPressテーマ「HOLOS」 2024年7月19日 解説記事 ダウンロード
TCD107 WordPressテーマ「HOMME」 2024年5月30日 解説記事 ダウンロード
TCD106 WordPressテーマ「ISSUE」 2024年3月28日 解説記事 ダウンロード
TCD105 WordPressテーマ「SEEED」 2023年12月27日 解説記事 ダウンロード
TCD104 WordPressテーマ「RIKYU」 2023年11月11日 解説記事 ダウンロード
TCD103 WordPressテーマ「GENESIS」 2023年9月22日 解説記事 ダウンロード
TCD102 WordPressテーマ「GAIA」 2023年08月31日 解説記事 ダウンロード
TCD101 WordPressテーマ「Cherie」 2023年07月20日 解説記事 ダウンロード
TCD100 WordPressテーマ「BASARA」 2023年06月30日 解説記事 ダウンロード

TCDのWordPressテーマを表にした例

縦長のテーブルも要領は同じです。テーブル全体をdivタグで囲み、CSSで調整を加えます。

HTML
<div class="scrollable-box">
  <table>
    <tr>
      <th>見出し1</th>
      <td>内容1</td>
    </tr>
    <tr>
      <th>見出し2</th>
      <td>内容2</td>
    </tr>
  </table>
</div>
CSS
.scrollable-box {
  max-height: 500px;
  overflow-y: auto;
}

もし横長のテーブルなどで、一部のセル（見出し）のみを固定表示しておきたい方は、下記記事を参考にご覧ください。

2025.06.10

一部のセルを固定表示するテーブル（表）のつくり方

比較記事や料金表など、情報を整理して伝えたいときに便利なのがテーブル（表）です。ただ、テーブルが横長になると「どの項目の情報か分かりづらい。」こともあります。 そこで役立つのが、一部のセル（見出しなど）を固定表示できるテーブルです。スクロールしても見出しが固定されているので、情報が格段に読みや...

さらに美しく整えるポイント

縦長のコンテンツをスクロール可能にした上で、さらに美しく整えるポイントをご紹介します。

スクロールバーを非表示に

ご利用のブラウザによっては、自動でスクロールバーが表示されます。

スクロールバー

こちらが気になる方は、以下のCSSを追加して非表示にできます。

.scrollable-box {
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox用 */
}

.scrollable-box::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge用 */
}

スマホでも見やすい高さに

スマホでの見た目も整えておくと、さらに見やすくなります。

たとえば、縦長コンテンツの高さを「max-height: 500px;」と指定している場合、スマホの画面では大半を占めてしまいます。他にタップできる箇所が狭くて、下にスクロールしにくくなるんですよね。

この状態を避けるために、スマホ画面の半分以下ぐらいに収まる高さに調整するのがオススメです。

ちょっとした工夫ですが、スクロールのしやすさは全然変わります。

/* スマホ表示時は高さを300pxに */
@media screen and (max-width: 768px) {
  .scrollable-box {
    max-height: 300px;
  }
}

JavaScriptで調整する

JavaScriptを使うと、さらにスマートに調整可能です。次のように、上下の端を半透明にすれば、ユーザーにスクロールできることを直感的に伝えられます。

品番 テーマ名 リリース日
 解説記事 販売ページ
TCD116 WordPressテーマ「PANDORA」 2025年5月21日 解説記事 ダウンロード
TCD115 WordPressテーマ「AIDER」 2025年4月30日 解説記事 ダウンロード
TCD114 WordPressテーマ「QUALIA」 2025年4月10日 解説記事 ダウンロード
TCD113 WordPressテーマ「ZEN」 2025年3月7日 解説記事 ダウンロード
TCD112 WordPressテーマ「ARTISAN」 2025年2月20日 解説記事 ダウンロード
TCD111 WordPressテーマ「GRAVITY」 2025年2月7日 解説記事 ダウンロード
TCD110 WordPressテーマ「MONAD」 2024年11月22日 解説記事 ダウンロード
TCD109 WordPressテーマ「CANON」 2025年9月20日 解説記事 ダウンロード
TCD108 WordPressテーマ「HOLOS」 2024年7月19日 解説記事 ダウンロード
TCD107 WordPressテーマ「HOMME」 2024年5月30日 解説記事 ダウンロード
TCD106 WordPressテーマ「ISSUE」 2024年3月28日 解説記事 ダウンロード
TCD105 WordPressテーマ「SEEED」 2023年12月27日 解説記事 ダウンロード
TCD104 WordPressテーマ「RIKYU」 2023年11月11日 解説記事 ダウンロード
TCD103 WordPressテーマ「GENESIS」 2023年9月22日 解説記事 ダウンロード
TCD102 WordPressテーマ「GAIA」 2023年08月31日 解説記事 ダウンロード
TCD101 WordPressテーマ「Cherie」 2023年07月20日 解説記事 ダウンロード
TCD100 WordPressテーマ「BASARA」 2023年06月30日 解説記事 ダウンロード
CSS
/* 上下に薄い透過マスクをかけて「スクロール可能」であることを視覚的に示す。 */
.scrollable-box.fade-mask {
  mask-image: linear-gradient(to bottom, transparent 0%, black 75%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 75%, transparent 100%);
}

/* 上端のマスクを外す（スクロールが上端まで達したとき） */
.scrollable-box.no-fade-top {
  mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}

/* 下端のマスクを外す（スクロールが下端まで達したとき） */
.scrollable-box.no-fade-bottom {
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
}

/* マスクを完全に外す（上下ともにスクロール不要な場合） */
.scrollable-box.no-fade {
  mask-image: none;
  -webkit-mask-image: none;
}
JavaScript
<script>
// スクロールマスクの実装
document.addEventListener("DOMContentLoaded", function () {
  // すべての .scrollable-box 要素を対象に処理を実行
  document.querySelectorAll(".scrollable-box").forEach((target) => {
    // 画面幅に応じた max-height を取得（スマホ・タブレット・PC）
    const getMaxHeight = () => {
      const isSp = window.matchMedia("(max-width: 767px)").matches; // スマホ
      const isTab = window.matchMedia("(max-width: 991px)").matches; // タブレット
      return isSp ? 300 : isTab ? 400 : 500; // スマホ300px、タブレット400px、PC500px
    };

    // スクロールが必要かどうか判定し、マスクの有無を切り替える関数
    const checkScrollable = () => {
      const MAX_HEIGHT = getMaxHeight();
      const contentHeight = target.scrollHeight;

      if (contentHeight > MAX_HEIGHT) {
        // コンテンツが max-height を超える場合はスクロール＆マスクを表示
        target.classList.add("fade-mask");
        target.classList.remove("no-fade");
        target.style.overflowY = "auto";
      } else {
        // スクロール不要な場合はマスクを外す
        target.classList.remove("fade-mask", "no-fade-top", "no-fade-bottom");
        target.classList.add("no-fade");
        target.style.overflowY = "hidden";
      }

      // 初期化時にスクロール位置に応じたマスク切り替えも実行
      handleScroll();
    };

    // スクロール位置に応じてマスクの状態を切り替える関数
    const handleScroll = () => {
      const scrollTop = target.scrollTop; // 現在のスクロール位置（上からの距離）
      const scrollBottom = scrollTop + target.clientHeight; // 表示領域の下端位置
      const scrollHeight = target.scrollHeight; // コンテンツ全体の高さ

      if (scrollTop <= 1 && scrollBottom >= scrollHeight - 1) {
        // 上下ともスクロール不要な状態（全体が収まっている）
        target.classList.remove("no-fade-top", "no-fade-bottom");
        target.classList.add("no-fade");
      } else if (scrollTop <= 1) {
        // 一番上までスクロールしている（下にマスクだけ残す）
        target.classList.remove("no-fade", "no-fade-bottom");
        target.classList.add("no-fade-top");
      } else if (scrollBottom >= scrollHeight - 1) {
        // 一番下までスクロールしている（上にマスクだけ残す）
        target.classList.remove("no-fade", "no-fade-top");
        target.classList.add("no-fade-bottom");
      } else {
        // 上下どちらにもスクロール余地がある（両方にマスク）
        target.classList.remove("no-fade", "no-fade-top", "no-fade-bottom");
        target.classList.add("fade-mask");
      }
    };

    // 初回チェックを実行
    checkScrollable();

    // スクロール時にマスクの状態を再判定
    target.addEventListener("scroll", handleScroll);

    // ウィンドウサイズが変わったときにも再チェック
    window.addEventListener("resize", checkScrollable);
  });
});
</script>

上記CSSとJavaScriptをコピペすれば、すぐ再現できますので、ぜひご活用ください。

TCDテーマをお使いの方は、テーマファイルを編集するのではなく、ページ別編集画面のカスタムCSSやカスタムスクリプトを利用すると便利です。

縦長コンテンツをスマートに

縦長コンテンツをスクロール可能にする方法をご紹介しました。

縦長画像やテーブルが見づらいときは、CSSのmax-heightとoverflow-yを使って、スクロール表示にする。

これをベースに、次のような工夫を加えると、よりスマートに整えられます。

コンテンツの見せ方を少し工夫するだけで、ユーザー体験はぐっと良くなります。縦に長い情報もストレスなく伝わるので、ぜひ取り入れてみてください。

ご紹介したコードをすべて盛り込んだ完成版

まずは、スマートに見せたい縦長コンテンツをdivタグで囲んで、クラスを指定してください。

<div class="scrollable-box">ここに縦長コンテンツ</div>

次に以下をコピペすれば、すぐ再現できます。

CSS
.scrollable-box {
  max-height: 500px; /* 高さを500pxに制限 */
  overflow-y: auto; /* スクロールを有効化 */
  scrollbar-width: none; /* スクロールバーを非表示（Firefox用） */
}

.scrollable-box::-webkit-scrollbar {
  display: none; /* スクロールバーを非表示（Chrome, Safari, Edge用） */
}

@media screen and (max-width: 768px) {
  .scrollable-box {
    max-height: 300px!important; /* スマホサイズでは高さを300pxに */
  }
}

/* 上下に薄い透過マスクをかけて「スクロール可能」であることを視覚的に示す。 */
.scrollable-box.fade-mask {
  mask-image: linear-gradient(to bottom, transparent 0%, black 75%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 75%, transparent 100%);
}

/* 上端のマスクを外す（スクロールが上端まで達したとき） */
.scrollable-box.no-fade-top {
  mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}

/* 下端のマスクを外す（スクロールが下端まで達したとき） */
.scrollable-box.no-fade-bottom {
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
}

/* マスクを完全に外す（上下ともにスクロール不要な場合） */
.scrollable-box.no-fade {
  mask-image: none;
  -webkit-mask-image: none;
}
JavaScript
<script>
// スクロールマスクの実装
document.addEventListener("DOMContentLoaded", function () {
  // すべての .scrollable-box 要素を対象に処理を実行
  document.querySelectorAll(".scrollable-box").forEach((target) => {
    // 画面幅に応じた max-height を取得（スマホ・タブレット・PC）
    const getMaxHeight = () => {
      const isSp = window.matchMedia("(max-width: 767px)").matches; // スマホ
      const isTab = window.matchMedia("(max-width: 991px)").matches; // タブレット
      return isSp ? 300 : isTab ? 400 : 500; // スマホ300px、タブレット400px、PC500px
    };

    // スクロールが必要かどうか判定し、マスクの有無を切り替える関数
    const checkScrollable = () => {
      const MAX_HEIGHT = getMaxHeight();
      const contentHeight = target.scrollHeight;

      if (contentHeight > MAX_HEIGHT) {
        // コンテンツが max-height を超える場合はスクロール＆マスクを表示
        target.classList.add("fade-mask");
        target.classList.remove("no-fade");
        target.style.overflowY = "auto";
      } else {
        // スクロール不要な場合はマスクを外す
        target.classList.remove("fade-mask", "no-fade-top", "no-fade-bottom");
        target.classList.add("no-fade");
        target.style.overflowY = "hidden";
      }

      // 初期化時にスクロール位置に応じたマスク切り替えも実行
      handleScroll();
    };

    // スクロール位置に応じてマスクの状態を切り替える関数
    const handleScroll = () => {
      const scrollTop = target.scrollTop; // 現在のスクロール位置（上からの距離）
      const scrollBottom = scrollTop + target.clientHeight; // 表示領域の下端位置
      const scrollHeight = target.scrollHeight; // コンテンツ全体の高さ

      if (scrollTop <= 1 && scrollBottom >= scrollHeight - 1) {
        // 上下ともスクロール不要な状態（全体が収まっている）
        target.classList.remove("no-fade-top", "no-fade-bottom");
        target.classList.add("no-fade");
      } else if (scrollTop <= 1) {
        // 一番上までスクロールしている（下にマスクだけ残す）
        target.classList.remove("no-fade", "no-fade-bottom");
        target.classList.add("no-fade-top");
      } else if (scrollBottom >= scrollHeight - 1) {
        // 一番下までスクロールしている（上にマスクだけ残す）
        target.classList.remove("no-fade", "no-fade-top");
        target.classList.add("no-fade-bottom");
      } else {
        // 上下どちらにもスクロール余地がある（両方にマスク）
        target.classList.remove("no-fade", "no-fade-top", "no-fade-bottom");
        target.classList.add("fade-mask");
      }
    };

    // 初回チェックを実行
    checkScrollable();

    // スクロール時にマスクの状態を再判定
    target.addEventListener("scroll", handleScroll);

    // ウィンドウサイズが変わったときにも再チェック
    window.addEventListener("resize", checkScrollable);
  });
});
</script>
アフィリエイトの売上をアップする
WordPressテーマ集
WordPressテーマ「REHUB」
WordPressテーマ「REHUB」
全国の口コミポータルサイトを作成。
WordPressテーマ「ZOOMY」
WordPressテーマ「ZOOMY」
独自SNSを構築するWordPressテーマ。
WordPressテーマ「Muum」
WordPressテーマ「Muum」
自由度・SEO共に最高なブログテンプレート
WordPressテーマ「EVERY」
WordPressテーマ「EVERY」
会員制のウェブメディア構築する。