HTML・CSS・JSで実現！PC版で横スクロール、SP版で縦スクロールを作る方法 |

ウェブサイトを訪れるユーザーにとって、スムーズで直感的な操作感は非常に重要です。本日は、HTML、CSS、JavaScriptを活用し、PC版では横スクロール、スマートフォン版では縦スクロールを実現する方法をご紹介します。この方法を使えば、デバイスに最適化された操作性を提供できるだけでなく、サイトの印象をアップさせることも可能です。初心者から中級者の方まで活用できる内容なので、ぜひ参考にしてみてください。

なぜデバイス別のスクロールを実現する必要があるのか

ウェブサイトを訪問するユーザーは、PCやスマートフォンなどさまざまなデバイスを使用しています。それぞれのデバイスには、最適な操作性があります。例えば、PCでは横スクロールを活用することで、視覚的な楽しさを加えたり、情報を一列に並べて表示することができます。一方、スマートフォンでは縦スクロールが基本で、片手操作でも情報にアクセスしやすいのが特徴です。

また、スクロール操作をデバイスに合わせて最適化することで、ユーザーがストレスを感じることなくコンテンツを楽しめるようになります。このように、操作性の違いに配慮した設計は、訪問者の満足度を高め、離脱率の低下にもつながります。

HTMLの基本構造を作成する

最初に、スクロール領域を作成するためのHTML構造を作成します。この構造は、コンテンツを横または縦に並べるためのベースになります。

<div class="scroll-container">
    <div class="scroll-content">
        <div class="item">アイテム1</div>
        <div class="item">アイテム2</div>
        <div class="item">アイテム3</div>
        <div class="item">アイテム4</div>
        <div class="item">アイテム5</div>
    </div>
</div>

このHTMLコードでは、scroll-containerがスクロール可能な領域を定義し、その中にscroll-contentでアイテムを配置しています。itemクラスはそれぞれのアイテムを表しており、ここに画像やテキストを挿入することで自由にカスタマイズできます。

HTML構造を設計する際のポイントは、シンプルで拡張性のあるコードにすることです。これにより、後からデザインや機能を追加しやすくなります。

PC版のスタイルを設定する方法

PC版では、横スクロールを実現するためにCSSを使ってスタイルを調整します。以下はその具体的なコード例です。

.scroll-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin; /* スクロールバーの見た目を調整 */
}

.scroll-content {
    display: inline-block;
}

.item {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin-right: 10px;
    background-color: #ccc;
    text-align: center;
    line-height: 100px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

.item:hover {
    transform: scale(1.1); /* ホバー時にアイテムを拡大 */
    background-color: #f0f0f0; /* 背景色を変える */
}

コードの解説

1. overflow-x: auto;

横方向のスクロールを可能にする設定です。これにより、画面幅に収まりきらないコンテンツがスクロールできるようになります。

2. white-space: nowrap;

アイテムを1行に収める設定です。これがないと、アイテムが改行されて縦に並んでしまいます。

3. ホバーアニメーション

ユーザーがアイテムにカーソルを合わせた際に拡大するエフェクトを追加しています。これにより、視覚的なアクセントが加わり、インタラクティブなデザインになります。

スマートフォン版のスタイルを調整する方法

スマートフォン版では、縦スクロールが基本となります。以下のコードを使用して、スマートフォン版専用のスタイルを適用します。

@media (max-width: 768px) {
    .scroll-container {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px; /* 余白を追加して見やすくする */
    }

    .item {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        height: auto; /* 高さを自動調整 */
        line-height: normal; /* テキストの見やすさを改善 */
    }
}

コードの解説

1. メディアクエリ

画面幅が768px以下の場合に適用されるスタイルです。この設定により、スマートフォンに特化したレイアウトを実現できます。

2. 縦スクロールの最適化

overflow-y: auto;を使用して縦スクロールを有効化しています。また、各アイテムをブロック表示に変更し、画面幅に応じたデザインにしています。

3. 余白と見やすさ

パディングやマージンを追加することで、縦スクロール時の視覚的な快適さを向上させています。

JavaScriptで動的に制御する方法

ウィンドウサイズが変更された際に、動的にスクロール動作を切り替える方法もあります。以下のコードを参考にしてください。

const scrollContainer = document.querySelector('.scroll-container');

window.addEventListener('resize', () => {
    if (window.innerWidth <= 768) {
        scrollContainer.style.overflowX = 'hidden';
        scrollContainer.style.overflowY = 'auto';
    } else {
        scrollContainer.style.overflowX = 'auto';
        scrollContainer.style.overflowY = 'hidden';
    }
});

このコードは、画面サイズが768px以下の場合は縦スクロール、それ以外の場合は横スクロールを有効にします。

実際に作ってみよう

今回紹介した方法を活用することで、簡単にデバイス別のスクロールデザインを実現できます。さらに、ホバーエフェクトやアニメーションを加えることで、より魅力的なUIを作成できます。

ぜひこの方法をあなたのプロジェクトに取り入れて、ユーザーに驚きと快適さを提供してください！

(Visited 2 times, 1 visits today)