boxを中央配置した状態で、子要素（boxを基準に85％で指定した背景色）を全画面表示にさせたい

boxを中央配置した状態で、子要素（boxを基準に85％で指定した背景色）を全画面表示にさせたいです

イメージ説明
・上の画像は画面幅を3000pxにした時の状態です。
・紫色で囲っているのが中央配置したboxです。
・ピンク色で囲っているのがboxに対して85％で指定した背景色です。本来は右側の余白部分も背景にしたいです。

該当のソースコードはboxを中央配置にすることを第一優先に考え、max-widthを指定しています

HTML
1<div class="concept">
2  <h2>アリスの国</h2>
3  <section class="wrapper">
4    <h3>ふしぎなお話</h3>
5    <p>
6      　アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈しはじめていました。
7    </p>
8  </section>
9
10  <section class="story">
11    <div class="box_right">
12      <div class="broken_right">
13        <img src="https://picsum.photos/400/250">
14      </div>
15      <div class="wap">
16        <h3>おもしろいお話</h3>
17        <p>
18          <span class="text_right">
19            アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈しはじめていました。
20          </span>
21        </p>
22        <a class="btn_decoration" href="#">MORE</a>
23      </div>
24    </div>
25  </section>
26
27  <!-- broken_left ---->
28  <img class=" broken_left" src="https://picsum.photos/200/200">
29</div>

CSS
1a {
2  text-decoration: none;
3}
4
5/* ---------------------------------*/
6.concept {
7  max-width: 125rem;
8  margin-right: auto;
9  margin-left: auto;
10}
11
12.wrapper {
13  padding: 0 2rem;
14}
15
16.wrapper {
17  max-width: 65rem;
18}
19
20.wrapper h3,
21.wrap h3 {
22  margin-bottom: 1rem;
23}
24
25.wrapper p {
26  padding-right: 1rem;
27  padding-bottom: 4rem;
28}
29
30/* brタグを非表示にする*/
31.wrapper p br,
32.text_right br {
33  display: none;
34}
35
36.story {
37  margin-top: 3rem;
38  text-align: left;
39  position: relative;
40}
41
42.box_right {
43  width: 85%;
44  margin-left: auto;
45  background-color: pink;
46}
47
48/* broken_right */
49.broken_right {
50  text-align: right;
51  position: relative;
52}
53
54.broken_right img {
55  width: 90%;
56  max-width: 50rem;
57  position: relative;
58  top: -4rem;
59}
60
61.wap {
62  display: flex;
63  flex-direction: column;
64  align-items: flex-start;
65  text-align: left;
66  padding-bottom: 5.5rem;
67  width: fit-content;
68  margin-left: auto;
69}
70
71.wap h3,
72.wap p {
73  margin-left: 2rem;
74  padding-right: 1.5rem;
75}
76
77/* ボタンの作成 */
78.btn_decoration {
79  position: relative;
80  right: 2.5rem;
81  bottom: 0rem;
82  font-size: 1.2rem;
83  display: inline-block;
84  line-height: 3rem;
85  padding: 0 0 0 3rem;
86  margin: 2rem 3rem 0 4.5rem;
87  z-index: 100;
88}
89
90/* 丸の作成 */
91.btn_decoration::before {
92  content: "";
93  position: absolute;
94  top: 0.2rem;
95  left: 0;
96  z-index: -1;
97  width: 2.5rem;
98  height: 2.5rem;
99  background: blue;
100  border-radius: 50%;
101  transition: 0.3s ease-out;
102}
103
104/* 矢印の作成 */
105.btn_decoration::after {
106  position: absolute;
107  content: "";
108  top: 42.5%;
109  right: -1.5rem;
110  width: 6px;
111  height: 6px;
112  border-top: 1.5px solid #000;
113  border-right: 1.5px solid #000;
114  transform: rotate(45deg);
115}
116
117/* ホバー時の挙動　faqボタンも共通*/
118.btn_decoration:hover,
119.btn_decoration_ct:hover {
120  color: white;
121}
122
123.btn_decoration:hover::before,
124.btn_decoration_ct:hover::before {
125  width: 10.6rem;
126  border-radius: 2rem;
127}
128
129.btn_decoration:hover::after,
130.btn_decoration_ct:hover::after {
131  border-top: 1.5px solid white;
132  border-right: 1.5px solid white;
133}
134
135/* broken_left */
136.broken_left {
137  width: 35%;
138  max-width: 26rem;
139  position: relative;
140  top: -3rem;
141}
142

試したこと

HTMLの構造から変えようと思い、boxを基準にピンク色の背景を付けた子要素の階層を親要素と同じにしたのですが、上手くいきませんでした。

boxの中央配置と子要素（boxを基準に85％で指定した背景色）を全画面表示にすることの両方を叶える手段が見つけられません。

回答1件

ベストアンサー

・紫色で囲っているのが中央配置したboxです。
・ピンク色で囲っているのがboxに対して85％で指定した背景色です。本来は右側の余白部分も背景にしたいです。

boxというのが何を指しているのか不明瞭ですが、
紫色で囲っているbox ＝ .concept要素
ピンク色で囲っている要素＝ .box_right要素
だとして回答します。

.box_rightそのものに背景色をつけるのでは、要素の外に背景色をはみ出させるのは難しいので、
.box_rightの疑似要素に背景色をつけて絶対配置(position: absolute;)にしてはみ出させたらどうでしょう。

はみ出させる量は、スクロールバーの幅の有無などを考慮して計算するのは難しいので、多めにはみ出させて、画面からはみ出た部分はbody{overflow-x: hidden;}で隠すようします。

.box_right の設定を削除して、下記を追加してください。

css
1.box_right::before {
2  content: "";
3  position: absolute;
4  top: 0;
5  bottom: 0;
6  left: 15%;
7  right: -100vw;
8  background-color: pink;
9  z-index: -1;
10}

CodePenサンプル

投稿2023/01/22 15:09

編集2023/01/23 06:53

hatena19

総合スコア32195

回答へのコメント

watakko

2023/01/23 06:13 編集

ご回答いただきありがとうございます！＞紫色で囲っているbox ＝ .concept要素＞ピンク色で囲っている要素＝ .box_right要素だとして回答します。その要素を指していました。説明不足で申し訳ないです。最初から多めにはみ出させて、要らない部分を隠すという発想があったのですね。勉強になります。そこでお聞きしたいのですが、overflow-x: hidden;をどこに指定したらいいかアドバイスいただけると嬉しいです。実現したいことは、どの画面幅で見ても.box_right要素の背景が途切れず画面内に収まっている、かつスクロールバーが出ないようにすることです。 width: 100vh;とoverflow-x: hidden;をbodyや.box_right::beforeに指定しても上手くいかず、どうしたらいいのか悩んでいます。

hatena19

2023/01/23 06:52

bodyに設定してください。サンプルリンクも追加しましたのでご参考に。

watakko

2023/01/25 12:33

ご連絡が遅くなり申し訳ありません。 Code Penでサンプル確認いたしました。ご丁寧にありがとうございます！

watakko

2023/01/25 13:01 編集

実は今回教えていただいたコードをVSC上で入力し、デベロッパツールで確認したところ、画面の最初の表示上では問題ないのですが、レスポンシブデザインで画面幅を広げた状態で横にスライドさせるとスクロールができてしまうのです。overflow-x: hidden;は効いているようなので、実際は問題ないのでしょうか？質問の最後の部分にデベロッパツールで確認した時の画像を載せています。ご回答いただけると嬉しいです。何卒よろしくお願いいたします。

hatena19

2023/01/26 01:40

当方でもVSCodeでHTMLを作成して確認してみましたが、横スクロールはできませでした。他の部分に問題があるのでは。

watakko

2023/01/26 06:53

ご回答いただきありがとうございます。自分のコードに問題がありそうです。原因を探してみます。本当にありがとうございました！