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

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

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

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

297閲覧

HTMLで書いた文章の右側の余白を消したいです。

wafflar

総合スコア18

CSS3

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2023/05/17 06:10

実現したいこと

・文章の右横にある余白を消したいです。(margin, pagginは0の状態)イメージ説明
イメージ説明

前提

文章と画像があり、flexして横並びにし、row-reverseで左右を入れ替えた後に検証ツールで余白を確認したところ、<div class="block-text">にある文章の右側に謎の余白が出来てます。
marginとpaddingは0です。

例えば、レスポンシブで横幅600pxを見た時、block要素は600pxになるのですが、block-textの右側に何かあるようで、画面幅いっぱいにならないです。
改行しないのと、文字サイズ8pxのまま出来るやり方を探しています。

初歩的なところかもしれませんが直し方を探しています。

該当のソースコード

HTML

1 <div class="block"> 2 <div class="block-text"> 3 <h3> 4 <span class="num">11</span><br> 5 <span class="title">緑黄色野菜</span> 6 </h3> 7 <p>アスパラガス、かぼちゃ、さやえんどう、オクラ、ケール、小松菜、しそ、春菊、高菜、<br>チンゲンサイ、トマト、にら、にんじん、バジル、パセリ、ピーマン<br>アスパラガス、かぼちゃ、さやえんどう、オクラ、ケール、小松菜、しそ、春菊、高菜<br>チンゲンサイ、トマト、にら、にんじん、バジル、パセリ、ピーマン 8 </p> 9 </div> 10 <div class="partner-img"><img src="img/vegetable.png" alt=""></div> 11 </div>

css

1@charset "utf-8"; 2 3* { 4 box-sizing: border-box; 5 margin: 0; 6 padding: 0; 7} 8 9.block { 10 display: flex; 11 flex-direction: row-reverse; 12 justify-content: flex-end; 13 align-items: center; 14 .block-text { 15 position: relative; 16 left: 14vw; 17 h3 { 18 .num { 19 font-size: 3.8vw; 20 } 21 .title { 22 font-size: 4vw; 23 } 24 } 25 p { 26 line-height: 2.2; 27 white-space: nowrap; 28 font-size: 10px; 29 transform: translateX(-9.9%) scale(0.8); 30 } 31 } 32 .partner-img { 33 position: relative; 34 left: 10.66vw; 35 img { 36 width: 32.32vw; 37 height: auto; 38 } 39 } 40}

試したこと

displayプロパティが原因かなと色々変えたのですが、変わりませんでした。
検索してもこれといったものが出てこず困っています。

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

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

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

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

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

h-kn

2023/05/17 06:20

<br>を消してもダメでしょうか?
int32_t

2023/05/17 06:25

> transform: translateX(-9.9%) scale(0.8); これで <p> を左にずらしているのでは。
wafflar

2023/05/17 06:38

<br>を消しても右側の空白は無くならなかったです。
wafflar

2023/05/17 06:39

tranlateXを消してscale(0.8)だけしても右側に空白が出来てしまいます...
int32_t

2023/05/17 07:50

<br> も translateX() も scale() も消しましょう。
wafflar

2023/05/17 08:28

説明下手ですみません! 空白は消したいのですけど、 brの所は改行したく、それ以外の所は改行しないようにして、文字サイズは8pxでやりたいのですが、このやり方だと文章右に出来た空白を消すことは無理なのでしょうか?
int32_t

2023/05/17 23:41

文章の横幅を変えたくないなら、文章全体を右に動かすしかないですよね。そうすると左に余白ができますが、それでいいんでしょうか?
guest

回答1

0

ベストアンサー

transform: scale(0.8);は周りのレイアウトに影響を与えずに、指定した要素のみ縮小します。
親要素は縮小しないので、指定した要素が縮小した分余白になります。

p要素のscale(0.8)は削除して、親要素.block-textscale(0.8)を設定すればいいでしょう。
ただし、h3要素も縮小されてしまうので、フォントサイズを大きくするか、scale(1.25)で拡大すればいいでしょう。

css

1 .block-text { 2 position: relative; 3 left: 14vw; 4 transform: scale(0.8); 5 h3 { 6 transform: scale(1.25); 7 .num { 8 font-size: 3.8vw; 9 } 10 .title { 11 font-size: 4vw; 12 } 13 } 14 p { 15 line-height: 2.2; 16 white-space: nowrap; 17 font-size: 10px; 18 transform: translateX(-9.9%); 19 }

投稿2023/05/17 09:24

hatena19

総合スコア33856

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

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

wafflar

2023/05/17 10:58

zoomというものがあったので、そちらを使い80%で調整したら出来ました。 なるほど!そういうやり方ならいけるんですね!次はそうしてみます! ありがとうございます!
wafflar

2023/05/18 01:58

非標準だったのですね... 教えてくださりありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問