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

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

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

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

HTML5

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

Q&A

解決済

1回答

3988閲覧

containerの片方だけ100%に広げて外側に出したい。

UKYO9311

総合スコア31

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2019/08/04 13:13

編集2019/08/05 06:20

前提・実現したいこと

イメージ説明

図のようにしたいのですが、なかなかなってくれません。
calcを使って指定するのでしょうか??( ; ; )

試したこと

html

1<div class="top-works"> 2 <div class="container"> 3 4 </div> 5</div>

css

1 2.container { 3 max-width: 1180px; 4 margin: 0 auto; 5 padding: 80px 20px; 6}

試したこと

widthをvwにしたりしたのですが、そうすると画面幅によって収縮してしまうため、containerの内側にきてしまったり、外側に出てしまったりしてしまいます。

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

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

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

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

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

kei344

2019/08/04 13:20

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
think49

2019/08/04 13:29 編集

親要素を3分割して、padding で隙間を作れば簡単に出来そうですが…。 あるいは、親要素のpadding: にして、子要素のmarginで整えても良さそうですね。
UKYO9311

2019/08/04 13:44

kei344様 コードを追加いたしました。ご指摘ありがとうございます!(>_<) think49様 コメントありがとうございます!!えーと、それはcalcを使って関数で計算するということでしょうか???
think49

2019/08/04 13:46

calcは不要です。 ブロックボックスは初期状態で画面横幅の最大幅をとるよう調整されています。 padding, margin で余白をとれば、目的の挙動になります。
yoshinavi

2019/08/05 02:50

上手くいかない現状のコードを提示してください。 図では、3つのBox要素がありますが、提示では1つのみです。このままだと「コード欲しい」の「丸投げ」と捉えられる可能性があります。
UKYO9311

2019/08/05 06:22

コメントありがとうございます!!失礼いたしました。画像を修正いたしました。右側に広がるタイプで困っております。
guest

回答1

0

ベストアンサー

calcを使って指定するのでしょうか

画面幅1220px以上の場合、((100vw - 1180px) / 2)が左/右の幅になるので、marginで配置すれば出来ると思います。画面幅1220px以下の場合、左/右の幅は20pxなので特に計算する必要は無いです。

投稿2019/08/04 15:39

kei344

総合スコア69364

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

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

UKYO9311

2019/08/05 06:42

ご回答本当にありがとうございます!!( ; ; ) 先ほどmargin: calc((100vw - 1180px) / 2);を.containerに指定してみたのですが、横幅いっぱいに広がってしまいました。。。(>_<)
kei344

2019/08/05 06:44

marginは右左個別に設定できますよ。
UKYO9311

2019/08/05 08:36

margin-leftで指定したらできました!!!ご丁寧にありがとうございました。( ; ; )
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問