Skip to main content
コードを実行可能なスニペットに変更
ソース リンク
harry0000
  • 2,800
  • 4
  • 18
  • 22

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main-space.css">
</head>
<body>
    <div class="mainSpace">
        <div class="mainSpaceSide">
            start side<br>
            side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
            side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
            end side
        </div>
        <div class="mainSpaceBody">
            start main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            end main
        </div>
    </div>
</body>
</html>

CSS

.mainSpace {
    min-height: 100vh;
    display: grid;
    grid-template: 
        "a-side a-body" 100vh
    /   320px 1fr;
}
.mainSpaceSide {
    grid-area: a-side;
    background-color: yellow;
    overflow: scroll;
}
.mainSpaceBody {
    grid-area: a-body;
    background-color: green;
    overflow: scroll;
}
<div class="mainSpace">
    <div class="mainSpaceSide">
        start side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        end side
    </div>
    <div class="mainSpaceBody">
        start main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        end main
    </div>
</div>
.mainSpace {
    min-height: 100vh;
    display: grid;
    grid-template: 
        "a-side a-body" 100vh
    /   320px 1fr;
}
.mainSpaceSide {
    grid-area: a-side;
    background-color: yellow;
    overflow: scroll;
}
.mainSpaceBody {
    grid-area: a-body;
    background-color: green;
    overflow: scroll;
}
 

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main-space.css">
</head>
<body>
    <div class="mainSpace">
        <div class="mainSpaceSide">
            start side<br>
            side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
            side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
            end side
        </div>
        <div class="mainSpaceBody">
            start main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
            end main
        </div>
    </div>
</body>
</html>

CSS

.mainSpace {
    min-height: 100vh;
    display: grid;
    grid-template: 
        "a-side a-body" 100vh
    /   320px 1fr;
}
.mainSpaceSide {
    grid-area: a-side;
    background-color: yellow;
    overflow: scroll;
}
.mainSpaceBody {
    grid-area: a-body;
    background-color: green;
    overflow: scroll;
}

.mainSpace {
    min-height: 100vh;
    display: grid;
    grid-template: 
        "a-side a-body" 100vh
    /   320px 1fr;
}
.mainSpaceSide {
    grid-area: a-side;
    background-color: yellow;
    overflow: scroll;
}
.mainSpaceBody {
    grid-area: a-body;
    background-color: green;
    overflow: scroll;
}
<div class="mainSpace">
    <div class="mainSpaceSide">
        start side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        end side
    </div>
    <div class="mainSpaceBody">
        start main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        end main
    </div>
</div>
 

本文に 3 文字追加
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

一方、CSSグリッドを使用しない以下の方法はサイドメニュー上でマウスをスクロールするとコンテンツ側がスクロールして内容を下部まで表示することができました。

はサイドメニュー上でマウスをスクロールするとコンテンツ側がスクロールして内容を下部まで表示することができました。
違い違いはなんなのでしょうか?CSSグリッドでは不可能なのでしょうか?それとも何かアプローチの仕方が違うのでしょうか?

一方、CSSグリッドを使用しない

はサイドメニュー上でマウスをスクロールするとコンテンツ側がスクロールして内容を下部まで表示することができました。
違いはなんなのでしょうか?CSSグリッドでは不可能なのでしょうか?それとも何かアプローチの仕方が違うのでしょうか?

一方、CSSグリッドを使用しない以下の方法はサイドメニュー上でマウスをスクロールするとコンテンツ側がスクロールして内容を下部まで表示することができました。

違いはなんなのでしょうか?CSSグリッドでは不可能なのでしょうか?それとも何かアプローチの仕方が違うのでしょうか?

本文に 28 文字追加
ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99

下記のようにHTMLとCSSを作ってみました。
サイドメニュー上でマウスをスクロールさせ、サイドメニューが全部表示されている場合(もしくはサイドメニューを下までスクロールしきった場合)は、コンテンツ側をスクロールさせたいのですが、やりかたがわかりません。

下記のようにHTMLとCSSを作ってみました。
サイドメニュー上でマウスをスクロールさせ、サイドメニューが全部表示されている場合は、コンテンツ側をスクロールさせたいのですが、やりかたがわかりません。

下記のようにHTMLとCSSを作ってみました。
サイドメニュー上でマウスをスクロールさせ、サイドメニューが全部表示されている場合(もしくはサイドメニューを下までスクロールしきった場合)は、コンテンツ側をスクロールさせたいのですが、やりかたがわかりません。

ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99
読み込んでいます