会話文形式のコードで余白を消したいです。

Question

会話文形式のやり取りについて

会話文形式のＣＳＳを教えてもらい、使っているのですが、
このまま打ち込むと、会話文の余白がすごく余ってしまうことがあります。
文字数に合わせて、会話文のボックスを自動調整するには、コードのどこをさわればよいのか教えていただけますか？

発生している問題・エラーメッセージ

余白が大きくなります

<p class="r-fuki miku">防水仕様になっているので、お風呂で使っても大丈夫！</p> の部分で、余白ができてしまいます。 コードをどのように変更すればよいのか、ご教授願います。

該当のソースコード

.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing:border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
miku::after {background-image:url( https://cdn-ak.f.st-hatena.com/images/fotolife/m/meipapa0219/20200316/20200316154432.png);}
コード

試したこと

色んなサイトを見て試してみましたが、コードが複雑なため、わかりませんでした。
https://meipapa.hatenablog.jp/が自分のサイトです。
ここで使っている会話文の余白をなくしたいと考えています。

ここを消したいです。

追記
こういうふうになりました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、HTMLも提示されないと誰も再現確認できません。

[yambejp]

htmlやコンテンツを例示ください
その何処がどう問題かも指摘ください

[papapapa]

これではだめでしょうか？

[s8_chu]

「会話文の余白がすごく余ってしまうことがある」に関して、具体的にどの箇所を指しているのか、もしくはその問題を再現するために必要な HTML を質問文に追記していただけませんか？

[yambejp]

ttps://meipapa.hatenablog.jp/を見て判断しろということですね？
このどの部分が会話で、どの余白をどうしたいのでしょうか？

[papapapa]

ご回答ありがとうございます。

<p class="r-fuki miku">防水仕様になっているので、お風呂で使っても大丈夫！</p>
の部分になります。ここで、後ろの余白を消して、文字数に合わせてボックスのサイズが変わるようにしたいのですが、できますか？

[m.ts10806]

>色んなサイトを見て試してみましたが、コードが複雑なため

何を見て言っているのかわからないので提示してください。
適切な参照先かどうかは提示されないとわかりません。
というか提示されたCSSも十分複雑だと私は思いましたが、これを自身で組まれたのでしたらそこまで読み解けないものがあるとはなかなか思えません。

[papapapa]

自分で組んだわけではなくて、教えていただいたCSSになります。

[s8_chu]

その下の吹き出し「そのまま寝てしまうこともＺｚｚ」でも同様の問題が再現していますか？また、もし問題が再現しない状況も存在するのであれば、それに該当する箇所も教えていただけませんか？

[papapapa]

見ていただいてありがとうございます。
同じように余白ができてしまいます。
いろいろさわってみたのですが、式が複雑すぎてわかりません。よろしくお願いします。

[s8_chu]

それでは、「防水仕様になっているので、...」について、 `.entry-content .r-fuki` の `margin` を `margin: 20px 0 0 auto` に変更したとき、問題は解決しますか？

[papapapa]

やってみましたが、うまくい行きませんでしたｔ

[gentaro]

教えてもらったCSSなら教えてくれた人に聞けば良いんでは？

[papapapa]

それができないので、ここで聞いているのですが

[gentaro]

読んでる側は書かれていない事情まではわかんないんですが

[mari.rinn]

.entry-content .l-fuki,
.entry-content .r-fuki {}内の
padding:20px;　となってますが、
これを　padding:10px 20px;
としたらどうなりますか？

[papapapa]

回答ありがとうございます。
やってみましたが、変わりませんでした。
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
display: inline-block;
を入れてみたら余白を自動でなくしてくれそうなのですが、いろいろ入れてみて試してみましたが、無理でした。
自動的に余白をなくすには、どこを変えたらいいでしょうか？

[mari.rinn]

あなたの言っている余白をなくす　と、私が理解した余白をなくす　は違うことなのですかねえ？
もう少し具体的に、何を余白と言ってるのかについて教えてもらえますか？

私は、吹き出し内の文章の最後の行から下の部分のことを言ってるのかと思ったのですが、もしかして、行間の広さが　広すぎるとか？

それと、cssをいじったのに見た目何も変化ない時は念のため、ブラウザのキャッシュをクリアしてみてくださいね。

[papapapa]

ありがとうございます。
<p class="r-fuki miku">防水仕様になっているので、お風呂で使っても大丈夫！</p>の後の余白を消したいということです。
吹き出しのボックスが文字数に合わせてきれいに囲われるようにしたいのですが、難しいでしょうか？
cssを変更した後はきちんと確認をしています。すみません。

[mari.rinn]

<p class="r-fuki miku">　cssで見ると、これ自体が吹き出しのボックスということになります。
つまり、そのあとの余白とは、

「エイリラン」には頭にぴったりフィットする１０本の足がついています。

この文章との間　ということになりますが、それであってますか？

[dit.]

前後の文章との間隔ではなく、吹き出しが「.entry-contentの横幅」いっぱいになってしまっているので、文字が短ければそれに応じて短い幅で表示されるようにしたいということであっていますか？

[dit.]

もう一つ。
HTML側の構造を変更することは視野に入れていますか？
それとも、HTMLを変更せずにCSSだけで解決したいということでしょうか？

[mari.rinn]

あ〜、すみません、私はスマホで見てるので、吹き出しの横幅に関して全然おかしいと思えなかったので、下との間隔かと思ってしまい申し訳ないです。
あ〜、それでmax-widthの事とかを書かれてたんですかね。

[mari.rinn]

質問者様
こんなふうに、回答する側も推測するしかなくなるので、コードを見てより正確に判断する為にも、htmlの該当箇所もキチンと質問文に記載していただければと思いますよ。

[papapapa]

みなさんありがとうございます。
dit.さんの2020/03/27 16:03

前後の文章との間隔ではなく、吹き出しが「.entry-contentの横幅」いっぱいになってしまっているので、文字が短ければそれに応じて短い幅で表示されるようにしたいということであっていますか？

その通りです。
できればcssのみでお願いしたいのですが、どうでしょうか？

Answer 1

/*  width: calc(100% - 82px); */
  width: max-content;

追記

fit-contentの方がいいかもですね。

/*  width: calc(100% - 82px); */
  width: -moz-fit-content;
  width: fit-content;

Can I use... Support tables for HTML5, CSS3, etc

コメントを受けて追記

失礼。そっちじゃなくてこっちですね。

  .entry-content .l-fuki,
  .entry-content .r-fuki {
/*  width: calc(100% - 106px); */
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 106px); /* これも入れておいた方がいいかも */

Comments

[papapapa]

回答ありがとうございます。やってみましたが、何も変化がありませんでした。
他に消さないといけないコードがありますか？

[Yorrie]

今質問者さんのサイトにかかっているCSSの

.entry-content .l-fuki, .entry-content .r-fuki {
width: calc(100% - 106px);
}

これを

.entry-content .l-fuki, .entry-content .r-fuki {
width: fit-content;
}

に変更すると、吹き出しの幅が変わるはずですが。

[Yorrie]

回答へのコメントについてですが、
「やってみましたが、変化しませんでした」と答えてしまうと、
「どういう操作をしたんだろう？」と回答者さんの方も「わからない」ができてしまいます。
「この要素に適用してみましたが、変化しませんでした」みたいな感じで「どうやった結果」「どうなったのか」を明確に伝えてあげるといいですよ！

[Lhankor_Mhy]

サンプルを作りました。

papapapaさんの環境では、やはりなにも変化がありませんか？
https://jsfiddle.net/Lhankor_Mhy/2t6j5oq1/

ちなみに、コメントアウトしているものは「その部分を消して書き換える」という意味なのですが、伝わっていますか？

[Lhankor_Mhy]

ああ、そうか、わかりました。
追記します。

[Yorrie]

セレクタもなんもないとこに直書きしちゃったとか…いや、そんなまさか。ハハハ。

[Lhankor_Mhy]

追記しました。幅指定しているルールが二つあるんですね。
打ち消されている方を修正しているように書いてしまいました。

[Yorrie]

あ、ほんとだ！よくみたらメディアクエリでもう一個あったみたいですね。。

[Lhankor_Mhy]

> TatamiSteakさん

ですです。
PCレイアウトの後にメディアクエリでモバイルレイアウト、というCSSばかり見ていたので、逆パターンは盲点でした。
もしかしたら、モバイルファースト的でこっちの方がいいのかも？

[papapapa]

みなさん回答ありがとうございます。
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% - 82px);
のうち
width: calc(100% - 82px);
を消して
width: -moz-fit-content;
width: fit-content;
max-width: calc(100% - 106px);
を追加してみました。しかし、変化がありませんでした。
初心者で申し訳ありません。

[Lhankor_Mhy]

追記をしましたので、そちらを読んでください。

[Yorrie]

あの。もうひとつありますよね。
編集していただいたところのもうちょっと下に。

@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 80px;
height: 80px;
}
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}

これ、ありますよね。
この中から、

.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
}

こいつを消してください。

[Lhankor_Mhy]

ああ、追記は読んでらっしゃるのですね。
直すのはそこではないです。よく見てください。

@media screen and (min-width: 478px) {
...
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);

[papapapa]

ありがとうございます。
@media screen and (min-width: 478px) {
...
.entry-content .l-fuki,
.entry-content .r-fuki {
width: calc(100% - 106px);
のうち
width: calc(100% - 106px);を消して

width: -moz-fit-content;
width: fit-content;
max-width: calc(100% - 106px);を入れてみました。

そうすると、会話の余白はなくなりましたが、画像のようにキャラクターが右に寄ってしまいました。

[Yorrie]

そのへんはクラス毎にmarginが設定されているので適宜調整してください…。
私らは解決のための手助けをすることはあっても便利屋ではありませんので…。

.entry-content .l-fuki {
margin: 20px 106px 36px auto;
}
.entry-content .r-fuki {
margin: 20px auto 36px 106px;
}

[Yorrie]

「F12」キーを押すと、「現在表示しているHTMLのコード」と「それぞれの要素にかかっているCSS」が閲覧できるのはご存知ですか？
何らかのレイアウトをいじりたい場合は、F12でそれぞれのCSSの役割を理解することで解決が早くなりますよ。

[papapapa]

素晴らしい回答をありがとうございます。
お陰様で変更することができました。
本当にありがとうございます。感謝しています。