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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2327閲覧

transform:translateY(-360px);と上にあげた分、サイト下部があいてしまった時

web_hoshi

総合スコア8

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/13 02:02

transform:translateY(-360px);
と上にあげた分、サイト下部があいた場合(空白)
サイト下部の空白分を消す方法はありますでしょうか?

イメージ説明

イメージ説明

そもそも、topの背景画像(レモンジュースの画像)に「朝食にフルーツたっぷりヨーグルト」と書かれた赤枠全体を被せたいときに
transform:translateY(-360px);
で被せるのはよくないやり方なのでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

transform は対象要素のみ移動させて他のレイアウトには影響を与えないという仕様なので、今回の要件には相応しくないですね。

HTMLが提示されていないので推測ですが、ネガティブマージンで重ねるのが簡単ではないかと思います。

html

1<div class="top"></div> 2<div class="box"></div> 3<div class="contents">Next Contents</div>

css

1.top { 2 background-color: lemonchiffon; 3 height: 300px; 4} 5.box { 6 width: 300px; 7 height: 200px; 8 border: 2px solid red; 9 margin: -100px auto 0; /* margin-top:-100pxで上に移動 */ 10/* transform:translateY(-100px); */ 11}

投稿2020/07/13 02:23

編集2020/07/13 02:46
hatena19

総合スコア33620

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

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

web_hoshi

2020/07/13 03:21

ありがとうございます!! ネガティブマージンで設定したところ、サイト下部に空白なく、 当初の重ねたデザインを再現することができました! transformの仕様やネガティブマージンの存在もよくわかっていなかったので 非常に助かりました。ありがとうございました...!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問