cssジェネレーターで作ったリボンを画面内に収めたい

Question

下記URLのcssジェネレーターにてcssでリボンを作りました。

http://www.css3d.net/ribbon-generator/

これをページに導入すると、
リボンの右側の長さ（例えば1000px）が認識されて、横スクロールバーがでてしまします。

リボンの左側のように、1000pxと設定されていても、画面内に収めたいと思っています。

＜発生している問題＞
右側のwidth（例えば1000px）が認識されて、横スクロールバーが出てしまう。

＜該当のソースコード＞
[HTML]

<div class="container">
<h1>リボンHTML＆CSS</h1>
	<div class="ribbon-wrapper">
		<div class="ribbon-front">
			リボンに書きたいテキスト
		</div>
		<div class="ribbon-edge-topleft"></div>
		<div class="ribbon-edge-topright"></div>
		<div class="ribbon-edge-bottomleft"></div>
		<div class="ribbon-edge-bottomright"></div>
		<div class="ribbon-back-left"></div>
		<div class="ribbon-back-right"></div>
	</div>
</div>

[CSS]

body{background: #ccc;}
.container{width: 970px;height: 1000px;margin: 0 auto;background: #fff;padding: 20px;}

/* ribbon style */
 .ribbon-wrapper {
	position: relative;
}
  .ribbon-front {
	background-color: #F60808;	height: 40px;
	width: 1030px;
	position: relative;
	left:-30px;
	z-index: 2;
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
	left: -30px;
	border-color: transparent #893131 transparent transparent;
}

  .ribbon-edge-topleft {
	top: -5px;
	border-width: 5px 10px 0 0;
}
  .ribbon-edge-bottomleft {
	border-width: 0 10px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
	left: 990px;
	border-color: transparent transparent transparent #893131;
}

  .ribbon-edge-topright {
	top: 0px;
	border-width: 0px 0 0 10px;
}
  .ribbon-edge-bottomright {
	border-width: 0 0 5px 10px;
}

  .ribbon-back-left {
	position: absolute;
	top: -5px;
	left: -1020px;
	width: 1000px;
	height: 40px;
	background-color: #D70A0A;	z-index: 0;
}

  .ribbon-back-right {
	position: absolute;
	top: 5px;
	right: -1020px;
	width: 1000px;
	height: 40px;
	background-color: #D70A0A;	z-index: 0;
}


```/* ribbon style */以下が、ジェネレーターがはじき出したCSS
bodyと.containerが私が追記したCSSです。
.container を970pxに設定していて、
そこに「.ribbon-front」に該当する箇所がおおいかぶさって文字（見出し）が書けて、
左右のリボンは、横スクロールを出さずに画面いっぱいになるようにしたいです。

＜試したこと＞
 .ribbon-back-rightのwidthを
①autoにしてみた
②calc(100% - （任意の数字）px)を使用

①に関しても②に関してもまったく効かず。
②に関しては「任意の数字」を追記した分は、右のリボンの長さは減っていましたが、
「100%の残り」という動きにはなりませんでした。


＜消極案＞
○bodyにoverflow-x:hiddenを記述
※これは（横スクロールバーを消すという意味では）うまくいったのですが、実際に追加したいページにはトップに戻るボタンがついており、
そのボタンが消えてしまったので却下。

下記ページを参考に、
▼[jQuery] overflow-x を使うと scrollTop で値がとれなくなった
http://www.d-wood.com/blog/2014/07/10_6462.html

bodyの直下にクラス名を降り、
overflow-x:hidden（横スクロールを消す為）
overflow-y:hidden（縦スクロールが2つになってしまった為）

こちらで対応していますが、
根本的な概念（やり方）を知りたいと思っています。

お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。

Comments

[kei344]

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[HealingSalon104]

ご指摘ありがとうございます。アドバイスに従って編集させていただきました。

Answer 1

実際に追加したいページにはトップに戻るボタンがついており、そのボタンが消えてしまったので却下。

ボタンのCSSが right: 0; とか右端起点ではありませんか？ left: 100%; margin-left: -要素の幅; 見たいにしたら表示されそうな気がします。

---

一応右スクロールを少なくしてみました。スクロールバーの幅がブラウザ依存なので、デスクトップPCでは右スクロールがその分出ます。

.ribbon-back-right {
	right: calc(-50vw + 50%);
    width: calc(50vw - (50% + 20px));
}
.ribbon-front {
    width: calc(100% + 60px);
}
.ribbon-edge-topright, .ribbon-edge-bottomright {
    left: calc(100% + 20px);
}
```**動くサンプル：**[https://jsfiddle.net/7tg56kgx/](https://jsfiddle.net/7tg56kgx/)

---

ただ、shadowが付いているので、 `overflow-x:hidden;` での解決が一番かと思います。

「トップに戻るボタン」以外をdiv要素で囲み、それに`overflow-x:hidden;`をかけるとかどうでしょう。

Answer 2

自分の環境では overflow-x:hidden; を指定しても scrollTop() で値がとれました。

ジェネレーターのサイトでも overflow-x:hidden; を使って問題を解決しているようです。

トップへ戻るボタンはどのように実装されていますか？

Comments

[HealingSalon104]

コメントありがとうございます。
上手く説明できるかわかりませんが「トップへ戻るボタン」は以下のように実装されています。

[HTML]
```
<body>
<a name="PAGETOP" id="PAGETOP"></a><!--リンク終点（参照先）-->
<div id="container">
<div id="header">
<div class="navicon"><!--スマホ用のヘッダーパーツ-->
</div><!--/.navicon-->
<div class="headerNav">
<!--PC用のヘッダーパーツ-->
</div><!--/.headerNav-->
</div><!--/header-->

<a id="pageTop" href="#PAGETOP">▲</a><!--リンク起点）-->

<!--以下コンテンツ続く-->
</div><!--/#container-->
<footer>
<script type="text/javascript" src="/js/totop.js"></script>

</footer>
</body>
```
簡単に説明すると
①bodyの直下に「PAGETOP」リンク終点（参考先）
②「container」
　③「header」
　　④「navicon」スマホ用ヘッダーパーツ
　　⑤「headerNav」PC用ヘッダーパーツ
　⑥「#PAGETOP」リンク起点

</body>タグの直前の<footer>の中に topへ行くためのスクリプト（直書きではなくリンク）になっています。

[JS]
```
$(function() {
var topBtn = $('#pageTop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
```
[CSS]
```
#pageTop {
background: rgba(255,213,213,.55);
border-radius: 5px;
color: #FFF;
padding: 10px 15px;
position: fixed;
bottom: 10px;
right: 10px;
font-size: 1.25em;
text-decoration: none;
z-index: 9999;
}
```
※補足※
通常ページはid「#pageTop」にCSSで▲をデザインしたものになっています。
「▲」が角丸四角でふちどられたもの

私が作っているページは、その▲を「text-indent: -9999px;」で飛ばして、
イラストをbackgroundに表示しています。

[特殊ページ用 #pageTop CSS]
```
#pageTop {
background: url(用意した画像) no-repeat center center;
width: 80px;
height: 85px;
border-radius: 0px;/*通常のものにデザインされているものを打ち消すためのもの*/
padding: 0px 0px;/*通常のものにデザインされているものを打ち消すためのもの*/
position: fixed;
bottom: 10px;
right: 10px;
font-size: 1.25em;
text-decoration: none;
text-indent: -9999px;
z-index: 9999;
opacity: 0.8;
}
```
なお、「text-indent: -9999px;」がいけないのかな（本当はtopへ行くボタンはあるけど、-9999pxまで領域があるので消えてしまう？）とも思い、

▼text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法
http://delaymania.com/201209/web/textindent-9999/

を参考に

```
#pageTop {
background: url(用意した画像) no-repeat center center;
width: 80px;
height: 85px;
border-radius: 0px;/*通常のものにデザインされているものを打ち消すためのもの*/
padding: 0px 0px;/*通常のものにデザインされているものを打ち消すためのもの*/
position: fixed;
bottom: 10px;
right: 10px;
font-size: 1.25em;
text-decoration: none;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
z-index: 9999;
opacity: 0.8;
}
```
も試してみましたが、同じ結果でした。

[Takamoso]

#pagetopのtext-indentはいらない気がします。
また aタグはインライン要素なので display:blcokを追加します。

それでも表示されないときは
$(function() {
var topBtn = $('#pageTop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
のJSを一旦コメントアウトしてみてページトップへ戻るボタンが表示されるか確認してください。