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

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

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

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

HTML5

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

Q&A

解決済

4回答

371閲覧

センター配置のコンテンツを起点に画像の配置について

cc-taishi

総合スコア3

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2024/07/25 05:57

編集2024/07/25 06:32

イメージ説明

実現したいこと

ウェブデザインのコーディングをしているのですが

添付画像のようなパソコン版でのデザインで、
ウインドウに対してヨコ幅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であるため、子要素の背景画像がそれ以上広がったりしませんでした。

●検索でそれらしいものを調べましたが、
今回の質問に該当するものがありませんでした。

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

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

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

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

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

maisumakun

2024/07/25 06:03

・試してみたことや、その結果はありませんか? ・ウィンドウ幅が1000pxを割った場合は、どのようにしたいのでしょうか?
cc-taishi

2024/07/25 06:24

追記いたしました。 >●ウインドウ幅が1000pxを切った場合は、できればウインドウ右側に5%ほどの余白が欲しい >●親要素div(コンテンツ幅1000px) max-width1000px、センター指定、position:relative; ●子要素div(背景画像) position:relative; right: 0; height:200px; width:100%; background背景指定
yambejp

2024/07/25 06:24 編集

コンテンツの左側のピンクは何でしょう? 1000px超の幅の画像があるのでしょうか?
cc-taishi

2024/07/25 06:36 編集

1000pxセンターコンテンツの右端を起点として 背景画像をウインドウ左端いっぱいまで表示させたい、ということになります。
cc-taishi

2024/07/25 06:31 編集

背景画像はbackground-size:coverか、 object-fit:coverで指定する想定となります。
guest

回答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
Lhankor_Mhy

総合スコア36777

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

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

cc-taishi

2024/07/26 02:30

ありがとうございます! サンプルありがとうございます!理想の挙動です。 gridをあまり使ったことがなかったので 勉強しようと思います。
guest

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
yambejp

総合スコア116199

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

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

cc-taishi

2024/07/26 02:28

ありがとうございます! 理想の挙動です! 本筋とは関係ないですが、 background-imageにこういう風に テキストを乗せることができるんですね。 勉強になりました!
guest

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}

CodePen サンプル

投稿2024/07/25 17:02

hatena19

総合スコア34022

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

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

cc-taishi

2024/07/26 02:35

ありがとうございます! サンプルもありがとうございます!理想の挙動です。 シンプルな記述ながら、 こうすればよかったのかという気づきを得られました!
guest

0

親要素が上限1000pxであるため、子要素の背景画像がそれ以上広がったりしませんでした。

親要素の外側にはみ出させたいものを子要素として配置するのが妥当ではないです。

画像を親要素の外に出して、幅をcalcclampmax-widthなどを駆使して適宜与える、という形でいいのではないでしょうか。

投稿2024/07/25 06:24

maisumakun

総合スコア145786

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

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

cc-taishi

2024/07/26 02:38

>親要素の外側にはみ出させたいものを子要素として配置するのが妥当ではないです。 仰る通りなのですが、 そう配置しないと起点を指定できないかと思いました。 お教えいただいたcalcを使ってみたり、 clampは使ったことがないので 勉強しようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問