「はみ出し」は、右パネル上の[ボックス]設定タブ内にある、[ポジション]メニューで設定を行います。
「表示」「非表示」「スクロール」の3種類のはみ出し設定が可能です。
表示
親ボックスからはみ出た子ボックスを、そのまま画面上に表示します。
CSS の
overflow: visibleと同様の挙動で、要素の外側にはみ出しても切り取られません。
非表示
親ボックスの範囲からはみ出た子ボックスの部分を表示しない状態にします。
CSS の
overflow: clipと同様の挙動で、枠内の要素を切り取るため、外側にはみ出した部分は見えず、スクロールもできません。非表示の挙動を
overflow: hiddenとする必要がある場合には、[clipの代わりにhiddenを使用]にチェックを入れてください。
スクロール
親ボックスの枠内に収まらない子ボックスを、進行方向(垂直または水平)にスクロールして閲覧できるようにします。
ボックスの方向や並びすると、スクロールの向きやスクロール開始位置を変えられます。
注意:スクロールバーの表示
デザインエディタでは、スクロールの方向を確認するためのスクロールバーが表示されますが、このバーはライブプレビューや公開サイトには表示されません。
マウス操作の場合、一般的に Shift キーを押しながらホイール操作を行うと水平方向(横方向)のスクロールになります。
overflow visible hidden scroll スクロール 横スクロール


