・はみ出した要素を横スクロール可能にする
・親要素の余白は無視して、スクロール感を強調する
・サイト自体に横揺れは起こさない

ちょっとわかりにくいけど、上記の画像の波形のように、右側はbodyの余白を無視して画面一杯に表示させる。


<div class="parent">
    <span class="child">
         ここにはみ出しがあり得る要素
    </span>
</div>
.parent {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-right: calc(((100vw - 100%) / 2) * -1);
}

.child {
    overflow-x: auto;
}

はみ出しがあり得る要素は、折り返しを禁止にするなどして横に伸びるようにするなどしたらいいかも。

親要素に対して、

margin-right: calc(((100vw - 100%) / 2) * -1);

を指定することにより、bodyとかの余白もフル無視で右側に要素がはみ出るようにする。

これ結構重要。

可視範囲外に続きがあることを演出しないと、横スクロール可能だと気付いてもらいにくい。

このままではページ全体が横揺れを起こしてしまうので、overflow: hidden;ではみ出た部分を隠す。

子要素に対して

overflow-x: auto;

を指定することにより、横スクロールを可能にしている。

子要素に対してoverflow-x: auto;で横スクロールを許可する。

参考にしたサイト

親要素のpaddingを無視して、画面の横いっぱいに表示するCSS - Qiita

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事