メインコンテンツにスキップ

はみ出し設定

はみ出し設定は、親ボックスからはみ出した子ボックス(オーバーフロー)の見え方を制御する機能です。「表示」「非表示」「スクロール」の3種類から選択します。

今週アップデートされました

「はみ出し」は、右パネル上の[ボックス]設定タブ内にある、[ポジション]で設定を行います。「表示」「非表示」「スクロール」の3種類のはみ出し設定が可能です。

表示

  • 親ボックスからはみ出た子ボックスを、そのまま画面上に表示します。

  • CSS の overflow: visible と同様の挙動で、要素の外側にはみ出しても切り取られません。

非表示

  • 親ボックスの範囲からはみ出た子ボックスの部分を表示しない状態にします。

  • CSS の overflow: hidden と同様で、枠外に出た部分は見えなくなり、スクロールもできません。

スクロール

  • 親ボックスの枠内に収まらない子ボックスを、進行方向(垂直または水平)にスクロールして閲覧できるようにします。

  • ボックスの方向や並びすると、スクロールの向きやスクロール開始位置を変えられます。

注意:スクロールバーの表示

  • デザインエディタでは、スクロールの方向を確認するためのスクロールバーが表示されますが、このバーはライブプレビューや公開サイトには表示されません。

  • マウス操作の場合、一般的に Shift キーを押しながらホイール操作を行うと水平方向(横方向)のスクロールになります。


overflow visible hidden scroll スクロール 横スクロール

こちらの回答で解決しましたか?