Q&A
> 860pxより画面が狭い場合にうまくいかなくなってしまいます。
860pxより画面が狭い場合はどういう表示が正しいのでしょうか？
手書きで良いので図示してみてください
標題の通り、常に片方のmarginを10pxだけ大きくする方法についてわからなくて困っています。
下記のように1380pxを基準にしたデザインデータがあったとして、
赤色のboxの左右のmarginを、右側だけ左に比べて、10px大きくしたいです。
それを実現するのに、下記のようなコードを思いつきました。
.box{ width: 860px; height: 430px; background-color: red; margin: 0 calc((100% - 860px) / 2 + 5px) 0 calc((100% - 860px) / 2 - 5px); }
しかし、このコードだと、860pxより画面が狭い場合にうまくいかなくなってしまいます。
幅が変わってもレスポンシブ対応し、常に右側のmarginを左よりも10pxだけ大きくする方法を教えていただけないでしょうか？
よろしくお願いいたします。
コードを下に貼っておきます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <div class="box"></div> </body> </html>
.box{ width: 860px; height: 430px; background-color: red; margin: 0 calc((100% - 860px) / 2 + 5px) 0 calc((100% - 860px) / 2 - 5px); }
コメントありがとうございます！
質問内容わかりづらくてすみません。
860pxより画面が小さい場合も、上の図と同じで、右側のmarginが左側のmarginに比べて、10px大きくなります。
回答2件
0
ベストアンサー
.box をほかのdiv(.box-wrap等)で囲ってあげて、
.box-wrapのpadding-rightで10pxとってあげる、とかはどうでしょうか？
レスポンシブ対応では、width: 100% と max-widthでいけませんかね。
html
1<div class="box-wrap"> 2 <div class="box"></div> 3</div>
css
1.box { 2 width: 100%; 3 max-width: 860px; 4 height: 430px; 5 background-color: red; 6} 7.box-wrap { 8 width: 100% 9 margin: 0 auto; 10 padding-right: 10px; 11}
投稿2019/10/03 06:56
編集2019/10/03 07:01
総合スコア41
ありがとうございます！
wrapで包んで、そのwrapにpadding-rightをしてあげるといいんですね！この方法思いつきませんでした。
下記のようにするとレスポンシブ対応も含めてうまくいきました！
ありがとうございます！
.box-wrap {
width: 100%;
max-width: 860px;
margin: 0 auto;
padding-right: 10px;
}
.box {
width: 100%;
height: 430px;
background-color: red;
}
少々間違ってましたね、すみません。うまく訂正していただけたようでよかったです。
あと、中の.boxを860pxにするなら、.box-wrapはpadding-rightの量をいれなければいけないのでmax-widthは870pxになるかと思います。
```css
.box-wrap {
width: 100%;
max-width: 870px; // ***
margin: 0 auto;
padding-right: 10px;
}
```
padding-rightの量を考慮していませんでした！ありがとうございます。
おかげ様で解決しました！ありがとうございました＾＾
あなたの回答
tips
プレビュー
