質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

346閲覧

【CSS】縦スクロールのみを設定したはずが、勝手に横スクロールされる

flandre

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/04/25 10:27

編集2022/04/26 01:41

縦横にはみ出した子要素を持つ親要素に対して、横部分のはみ出しは隠さずに縦部分のみをスクロールさせたいのですが
overflow-yにのみスクロ―ルを設定したはずなのに、何故か縦横の両方向にスクロールできてしまいます

HTML

1 <div id="parent"> 2 <div id="child"></div> 3 </div>

CSS

1#parent { 2 position: relative; 3 width: 100px; 4 height: 100px; 5 top: 50px; 6 left: 50px; 7 background-color: lightpink; 8 overflow-x: visible; 9 overflow-y: scroll; 10} 11 12#child { 13 position: relative; 14 width: 200px; 15 height: 200px; 16 bottom: 50px; 17 right: 50px; 18 border: 1px solid black; 19}

・overflow-y: scrollを設定する前
イメージ説明
・overflow-y: scrollを設定した後
イメージ説明
この問題の原因、及び縦スクロールのみを設定する方法をご存知の方が居ましたら教えていただきたいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

overflow-y が hidden, scroll, auto のいずれかであり、このプロパティが visible である場合は、暗黙に auto に計算します。

mdn : overflow-xには以上の様な記載があります。

overflow-yscrollを指定した時点で、overflow-xをvisibleとしてはみ出させる事はできません。(xとy逆も同様)

追記

「見かけ上よりもクリック範囲の大きいボタン」だけなら以下の様な感じでいいと思うんですが、ボタン格納要素の部分が理解できませんでした。

html

1<div class='buttonClickable'> 2 <div class="buttonAppearance"> 3 Button 4 </div> 5</div>

css

1.buttonAppearance { 2 width: 100px; 3 height: 100px; 4 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 9 background: lightpink; 10 color: white; 11} 12 13.buttonClickable { 14 padding: 100px; 15 display: inline-block; 16 17 border: 1px dashed black; 18 cursor: pointer; 19} 20 21.buttonClickable:hover>.buttonAppearance { 22 background: lightcoral; 23} 24 25.buttonClickable:active>.buttonAppearance { 26 background: red; 27}

投稿2022/04/25 12:08

編集2022/04/25 15:50
k4a

総合スコア983

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

flandre

2022/04/25 14:31

回答していただきありがとうございます なるほど…ということは、縦横どちらかのみをはみ出させることは不可能なのでしょうか?
k4a

2022/04/25 14:41

なぜはみ出させる必要があるんですか?目的がわかれば別の方法で実現可能かもしれません。
flandre

2022/04/25 15:20 編集

ボタンに対するクリックの有効範囲をボタンの大きさ以上にするためです ボタン(小)を透明な要素(大)に入れて、透明な要素に対してイベント(ボタンの機能)を設定し、それら複数個をボタン格納要素に入れて ボタン格納要素(親)ー透明な要素(子)ーボタン(孫) という形で実装したかったので、透明な要素がボタン格納要素からはみ出ている必要がありました 「見かけ上よりもクリック範囲の大きいボタン」が実装できればどんな形でも問題ないので、より合理的な方法があれば良ければご助言いただけると幸いです
flandre

2022/04/25 16:41

ボタン格納要素について今一度考えてみた結果、別にボタンと同じ幅ではなく透明要素と同じ幅でもいけるのでは?という考えに至り、自分のコードを色々調整したところ問題なく実現できたので、「子要素を親要素からはみ出させる」というプロセスを踏む必要がなくなりました… わけのわからない所で勝手に自己解決して、肩透かしもいいところですよね…申し訳ない overflow-xの仕様を指摘して下さったことや、k4a様に自分の考えを言語化して説明しようとする過程で様々な見落としに気づけたこと、非常に助けになりました。改めて回答していただきありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問