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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

0回答

458閲覧

片方可変、片方固定のやり方

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/07/19 02:31

編集2022/01/12 10:55

イメージ説明### 前提・実現したいこと

左に写真、右にテキストといった形を作成中です。
会社の先輩がヒントをくれましたが、実装できません。
.innerの幅は1000pxのmagin:autoで中央です。(inner記載は省きました。)

先輩のヒントは親要素に
padding-left: calc((100vw - 100%) / 2);
margin-left: calc(((100vw - 100%) / 2) * -1);
↑これを入れて作成してみたらできるはずだよって言われましたが、できません。。。
大きい数字の1はcontentのbefore、position:absolute、で動かしていますが、可変すると動いてしまうのも理想的ではありません。
可変した時に、画像はleftの画像は可変しますが、rightの固定幅は可変しても固定にしたいです。
どうかお力添えいただけないでしょうか。。。。

該当のソースコード

<div class="content"> <div class="inner"> <div class="box"> <div class="left"> <img src="" alt=""> </div> <div class="right"> <h3>見出し</h3> <p>テキストが入ります。</p> </div> </div> </div> </div>

試したこと

.content {
background: #28304c;
height: 380px;
}
.content .box {
position: relative;
padding-left: calc((100vw - 100%) / 2);
margin-left: calc(((100vw - 100%) / 2) * -1);
}
.content .box .left {
position: absolute;
left: 0;
top: -100px;
}
.content .box .left img {
width: auto;
height: 340px;
}
.content .box .right h3 {
font-size: 23px;
}
.content .box .right h3 p {
color: #fff;
}

【修正】

html

1<div class="content one"> 2 <div class="inner"> 3 <div class="box"> 4 <div class="left"> 5 <img src="images/order_image01.jpg" alt=""> 6 </div> 7 <div class="right"> 8 <h3>見出し</h3> 9 <p>テキストが入ります。</p> 10 </div> 11 </div> 12 </div> 13</div>

css

1.inner { 2 margin: auto; 3 width: 1000px; 4} 5.content { 6 background: #28304c; 7 height: 380px; 8 position: relative; 9} 10.content:before { 11 font-weight: 400; 12 font-style: italic; 13 display: block; 14 position: absolute; 15 top: 12%; 16 right: 15%; 17 color: rgba(154, 154, 154, 0.3); 18 font-size: 250px; 19 letter-spacing: 0; 20 line-height: 1.0; 21} 22.content.one:before { 23 content: '1'; 24} 25.content .box { 26 position: relative; 27 padding-left: calc((100vw - 100%) / 2); 28 margin-left: calc(((100vw - 100%) / 2) * -1); 29} 30.content .box .left { 31 position: absolute; 32 left: 0; 33 top: -100px; 34} 35.content .box .left img { 36 width: auto; 37 height: 340px; 38} 39.content .box .right h3 { 40 font-size: 23px; 41} 42.content .box .right h3 p { 43 color: #fff; 44} 45

これでしょうでしょうか?再現しませんか?

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

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

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

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

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

m.ts10806

2019/07/19 02:34

CSSの方もマークダウンのcode機能を利用してください。(任意数設置できます) また、「できません」では他者には何も伝わらないので現在起きている現象や状態を具体的に記載(または画面キャプチャ)してください
m.ts10806

2019/07/19 02:36

>.innerの幅は1000pxのmagin:autoで中央です。(inner記載は省きました。) HTMLを提示される以上は「コピペで再現できる情報」を提示する必要があるので、なるべく現在の現象がそのまま確認できる情報、コードをご提示ください
azuapricot

2019/07/19 02:38

先輩に質問するのも仕事のうちですけどねぇ...
azuapricot

2019/07/19 02:46

再現してやってみようとしましたが再現できないので再現しやすいコードを提示してほしいですねー
Lhankor_Mhy

2019/07/19 02:46

『大きい数字の1』のコードがないようですが、とりあえず回答からは外していいのでしょうか?
Lhankor_Mhy

2019/07/19 02:57

補足願います。 『rightの固定幅』とは具体的にはなんですか? CSSには .right の width 指定がないようです。
退会済みユーザー

退会済みユーザー

2019/07/19 03:12

.rightは.innerで指定している1000pxの中から飛び出さない想定なんですが、現状rightに固定幅(仮に500px)を入れるとおかしなことになります。 幅を決めないとできないのか、できるのかさえもわけりません。。。
Lhankor_Mhy

2019/07/19 03:17

なるほど。 それで、『rightの固定幅』とは具体的にはなんですか? 『1000pxの中から飛び出さない』ということは可変のように思えるのですが、可変でいいのでしょうか? もうひとつ補足願います。 『可変した時に、画像はleftの画像は可変します』とのことですが、現状のCSSでは height: 340px; が指定してありますので、固定幅になるかと思いますが、固定でよろしいのでしょうか?
退会済みユーザー

退会済みユーザー

2019/07/19 03:41

このデザインだとleft固定、right可変になるんでしょうか? 写真部分(left)は可変した時に縦の幅を維持したまま、伸びるのが理想なんですが。。。。
Lhankor_Mhy

2019/07/19 03:50

『縦の幅を維持したまま、伸びる』となると、アスペクト比が変わると思うのですが、それはかまいませんか? また、その場合の横幅は何を基準に決めるのでしょうか?
Lhankor_Mhy

2019/07/19 04:06

いなくなっちゃった。 丁寧に聞き取りをしたつもりなんだが……
m.ts10806

2019/07/19 05:39

あわよくばコピペコードをもらうつもりだったのか・・。 要件が若干ふわっとしているので今の段階でもコード出しようもなかった気はしますが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問