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

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

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

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

HTML5

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

Q&A

解決済

1回答

6544閲覧

cssで画面幅からはみ出したスタイルをスクロールしないようにしたい

ryuji000

総合スコア19

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2017/08/08 14:36

編集2017/08/08 14:42

###前提・実現したいこと
画像の上に斜めのboxを被せたいのですがそれを実現するにはwidthで120%の値を入れるしか思いつかなく、そこでwidthの指定をそのままで、横スクロールしない方法があれば教えてほしいです

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="shortcut icon" href="favicon.ico" type="icon/logo.jpg"> 7 <link rel="apple-touch-icon" href="icon/logo.jpg"> 8 <link rel="stylesheet" href="css/style.css"> 9 <link rel="stylesheet" href="css/normalize.css"> 10 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 11 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 13 <script type="text/javascript" src="slick/slick.min.js"></script> 14 <title>農業サポートセンター</title> 15</head> 16<body> 17<div class="mainVisual"> 18 <div class="mainVisual__slide"> 19 <ul class="mainVisual__slide--item"> 20 <li><img src="img/slide1.jpg"><p class="img1">文化と確信を融合させた「農」の形</p></li> 21 <li><img src="img/slide2.jpg"><p class="img2">半世紀先まで続く「農」をつくり出す</p></li> 22 <li><img src="img/slide3.jpg"><p class="img3">文化と確信を融合させた「農」の形</p></li> 23 </ul> 24 </div> 25 <div class="slanting"> 26 <a href=""><div class="triangle"></div></a> 27 </div> 28 </div> 29</body>

css

1.mainVisual__slide--item img { 2 width: 100%; 3 height: 100vh; 4} 5 6.slanting:before { 7 overflow: hidden; 8 content: ''; 9 position: absolute; 10 top: 100%; 11 width: 120%; 12 height: 260px; 13 margin: 3% -10% 0; 14 background: #fff; 15 -webkit-transform-origin: left center; 16 -ms-transform-origin: left center; 17 transform-origin: left center; 18 -webkit-transform: rotate(-7deg); 19 -ms-transform: rotate(-7deg); 20 transform: rotate(-7deg); 21 z-index: 100; 22} 23.triangle { 24 width: 0; 25 height: 0; 26 border: 20px solid transparent; 27 border-top: 20px solid #127749; 28 position: absolute; 29 top: 93%; 30 left: 47%; 31 right: 0; 32 bottom: 0; 33 z-index: 200; 34} 35.subContants__wrap { 36 position: absolute; 37}

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

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

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

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

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

guest

回答1

0

ベストアンサー

提示のCSSが少ないので勘で回答します。

CSS

1.slanting { 2 overflow: hidden; 3}

【overflow - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/overflow


追記:

CSS

1.mainVisual { 2 position: relative; 3 overflow: hidden; 4} 5.slanting{ 6 position: absolute; 7 top: 50vh; 8 width: 100%; 9} 10```**動くサンプル:**[https://jsfiddle.net/xw3m20dj/](https://jsfiddle.net/xw3m20dj/)

投稿2017/08/08 14:40

編集2017/08/08 14:56
kei344

総合スコア69364

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

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

ryuji000

2017/08/08 14:43

すみません試してみたのですがダメ出した、情報が少なかったので追加しました。
kei344

2017/08/08 14:56

overflow: hidden;のつけている位置が根本的に違います。提示のコードは見ましたか? 現在されている「斜めのもの」がどのような位置におきたいかによりますが、 position: absolute;の起点になる外側の要素(position: relative;をつけている要素)がそもそも必要です。 後で追記します。
ryuji000

2017/08/08 15:05

詳しい説明ありがとうございます。 とても助かりました。 また何かありましたらよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問