Q&A
・試してみたことや、その結果はありませんか？
・ウィンドウ幅が1000pxを割った場合は、どのようにしたいのでしょうか？
実現したいこと
ウェブデザインのコーディングをしているのですが
添付画像のようなパソコン版でのデザインで、
ウインドウに対してヨコ幅1000pxでコンテンツをインナーとして
センター配置しています。
その上で“ウインドウの幅がどのサイズになっても”
●ピンクの背景画像が、コンテンツの右端を起点となるように
●ウインドウ左端まで画像が伸び縮みするように
●ウインドウ幅が1000pxを切った場合は、できればウインドウ右側に5%ほどの余白が欲しい
このようにするには
どうコーディングするのがよいでしょうか。
※背景画像はheight200pxで固定、
backgroundで指定、background-size:coverで指定します。
object-fitで指定してもよいかと思っています。
※ソースコードにつきましては
html記述は簡素なものになるかと思うため、
css記述はご教示いただきたいため、
自分のほうからは割愛させていただきます。
よろしくお願いいたします。
試したこと
●親要素div（コンテンツ幅1000px）
max-width1000px、センター指定、position:relative;
●子要素div（背景画像）
position:absolute;
right: 0;
height:200px;
width:100%;
background背景指定、
background-size:cover;
というようなcss記述をやってみましたが
親要素が上限1000pxであるため、子要素の背景画像がそれ以上広がったりしませんでした。
●検索でそれらしいものを調べましたが、
今回の質問に該当するものがありませんでした。
追記いたしました。
＞●ウインドウ幅が1000pxを切った場合は、できればウインドウ右側に5%ほどの余白が欲しい
＞●親要素div（コンテンツ幅1000px）
max-width1000px、センター指定、position:relative;
●子要素div（背景画像）
position:relative;
right: 0;
height:200px;
width:100%;
background背景指定
コンテンツの左側のピンクは何でしょう？
1000px超の幅の画像があるのでしょうか？
1000pxセンターコンテンツの右端を起点として
背景画像をウインドウ左端いっぱいまで表示させたい、ということになります。
背景画像はbackground-size:coverか、
object-fit:coverで指定する想定となります。
回答4件
0
こうですか？
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/c0dhzsy2/
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .outer { 10 display: grid; 11 grid: auto-flow / 1fr 1000px 1fr; 12 13 @media (width<1000px) { 14 grid: auto-flow / 0 95% 5%; 15 } 16 } 17 18 .content { 19 grid-row: 1 / 1; 20 grid-column: 2 / 3; 21 } 22 23 img { 24 grid-row: 1 / 1; 25 grid-column: 1 / 3; 26 z-index: -1; 27 justify-self: stretch; 28 height: 200px; 29 object-fit: cover; 30 } 31 </style> 32</head> 33 34<body> 35 <div class="outer"> 36 <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 37 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 38 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 39 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 40 est laborum.</div> 41 <img src="http://placehold.jp/150x150.png?text=" alt=""> 42 </div> 43</body> 44 45</html>
投稿2024/07/25 07:53
編集2024/07/25 09:05
総合スコア36898
0
イメージ的にはこんな感じで二重構造にすればよいのでは？
html
1<style> 2:root{ 3 --center-width:1000px; 4} 5.content{ 6position:relative; 7 height:500px; 8 max-width:calc(50% + var(--center-width) /2 ); 9 background-image:url(https://placehold.jp/ff8080/000000/1200x200.png?text=1200x200_1200x200_1200x200_1200x200_1200x200); 10} 11.center{ 12display:flex; 13justify-content:center; 14align-items:center; 15position:absolute; 16width:var(--center-width); 17height:300px; 18background-Color:yellow;; 19right:0; 20} 21</style> 22<div class="container"> 23<div class="content"> 24<div class="center">test</div> 25</div> 26</div> 27
投稿2024/07/25 07:32
編集2024/07/25 07:35総合スコア116468
ありがとうございます！
理想の挙動です！
本筋とは関係ないですが、
background-imageにこういう風に
テキストを乗せることができるんですね。
勉強になりました！
0
ベストアンサー
こんな感じでどうでしょう。
html
1<div class="content"> 2 <p>Lorem ipsum dolor sit amet. Et nihil internos ut illo ullam et totam omnis vel assumenda asperiores hic vero totam. Sit omnis quia et fuga voluptates sed quis facere eum deserunt iure vel cumque quis rem quasi assumenda. Aut deserunt voluptatum aut itaque consequatur qui inventore enim et enim quasi est laudantium quia sit quidem consequatur. Aut accusamus ipsam et magnam quas est voluptate magnam non atque dolore id repellendus tempore et commodi sapiente ab iusto sunt? </p> 3 <p>Et consequatur quia qui ducimus quidem et exercitationem consectetur a animi velit et tempora quaerat a dolorum maiores. Rem fuga consequuntur sed nisi ratione sed dolorum sint ea unde eius qui laborum dolor aut aperiam iste sit itaque suscipit. Et cumque velit et similique officiis aut nulla neque ut omnis nemo quo totam voluptatem. Et reiciendis explicabo nam quia fugiat aut dolorem nisi. </p> 4 <p>Qui rerum officiis est itaque autem id iure asperiores. Et illum consectetur ut molestiae dolore nam fuga vitae. Ad dolor saepe sed voluptatem enim At nihil impedit eos deleniti culpa sed quae distinctio id cumque enim. </p> 5 <div class="bgimage"></div> 6</div>
css
1.content { 2 position: relative; 3 max-width: 1000px; 4 margin: auto; 5 @media (width < 1000px) { 6 padding: 0 5%; 7 } 8} 9.bgimage { 10 position: absolute; 11 top: 30px; 12 width: calc(500px + 50vw); 13 right: 0; 14 @media (width < 1000px) { 15 width: calc(100vw - 5%); 16 right: 5%; 17 } 18 background: url(https://placehold.jp/2000x200.png) center/cover; 19 height: 200px; 20 z-index: -1; 21}
投稿2024/07/25 17:02
総合スコア34064
0
親要素が上限1000pxであるため、子要素の背景画像がそれ以上広がったりしませんでした。
親要素の外側にはみ出させたいものを子要素として配置するのが妥当ではないです。
画像を親要素の外に出して、幅をcalcやclamp、max-widthなどを駆使して適宜与える、という形でいいのではないでしょうか。
投稿2024/07/25 06:24
総合スコア145932
＞親要素の外側にはみ出させたいものを子要素として配置するのが妥当ではないです。
仰る通りなのですが、
そう配置しないと起点を指定できないかと思いました。
お教えいただいたcalcを使ってみたり、
clampは使ったことがないので
勉強しようと思います。
あなたの回答
tips
プレビュー
