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

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

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

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

CSS

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

Q&A

解決済

1回答

1840閲覧

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

papapapa

総合スコア14

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/27 02:33

編集2020/03/28 02:28

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

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

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

余白が大きくなります

<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/ツールのバージョンなど)

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

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

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

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

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

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

m.ts10806

2020/03/27 03:09

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

2020/03/27 03:10

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

2020/03/27 04:50

これではだめでしょうか?
s8_chu

2020/03/27 04:53

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

2020/03/27 04:54

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

2020/03/27 04:57

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

2020/03/27 04:58

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

2020/03/27 04:59

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

2020/03/27 05:02

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

2020/03/27 05:10

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

2020/03/27 05:12

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

2020/03/27 05:20

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

2020/03/27 05:49

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

2020/03/27 06:00

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

2020/03/27 06:03

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

2020/03/27 06:09

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

2020/03/27 06:22

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

2020/03/27 06:37

あなたの言っている余白をなくす と、私が理解した余白をなくす は違うことなのですかねえ? もう少し具体的に、何を余白と言ってるのかについて教えてもらえますか? 私は、吹き出し内の文章の最後の行から下の部分のことを言ってるのかと思ったのですが、もしかして、行間の広さが 広すぎるとか? それと、cssをいじったのに見た目何も変化ない時は念のため、ブラウザのキャッシュをクリアしてみてくださいね。
papapapa

2020/03/27 06:48

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

2020/03/27 06:58

<p class="r-fuki miku"> cssで見ると、これ自体が吹き出しのボックスということになります。 つまり、そのあとの余白とは、 「エイリラン」には頭にぴったりフィットする10本の足がついています。 この文章との間 ということになりますが、それであってますか?
dit.

2020/03/27 07:03

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

2020/03/27 07:05

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

2020/03/27 07:13

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

2020/03/27 07:17

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

2020/03/27 07:27

みなさんありがとうございます。 dit.さんの2020/03/27 16:03 前後の文章との間隔ではなく、吹き出しが「.entry-contentの横幅」いっぱいになってしまっているので、文字が短ければそれに応じて短い幅で表示されるようにしたいということであっていますか? その通りです。 できればcssのみでお願いしたいのですが、どうでしょうか?
guest

回答1

0

ベストアンサー

css

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

追記

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

css

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

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

コメントを受けて追記

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

css

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

投稿2020/03/27 09:04

編集2020/03/28 01:20
Lhankor_Mhy

総合スコア35865

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

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

papapapa

2020/03/28 00:51

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

2020/03/28 01:05

今質問者さんのサイトにかかっているCSSの .entry-content .l-fuki, .entry-content .r-fuki { width: calc(100% - 106px); } これを .entry-content .l-fuki, .entry-content .r-fuki { width: fit-content; } に変更すると、吹き出しの幅が変わるはずですが。
TatamiSteak

2020/03/28 01:10

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

2020/03/28 01:15 編集

サンプルを作りました。 papapapaさんの環境では、やはりなにも変化がありませんか? https://jsfiddle.net/Lhankor_Mhy/2t6j5oq1/ ちなみに、コメントアウトしているものは「その部分を消して書き換える」という意味なのですが、伝わっていますか?
Lhankor_Mhy

2020/03/28 01:16

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

2020/03/28 01:19

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

2020/03/28 01:21

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

2020/03/28 01:24

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

2020/03/28 01:28

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

2020/03/28 02:12

みなさん回答ありがとうございます。 .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

2020/03/28 02:16

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

2020/03/28 02:17

あの。もうひとつありますよね。 編集していただいたところのもうちょっと下に。 @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

2020/03/28 02:17

ああ、追記は読んでらっしゃるのですね。 直すのはそこではないです。よく見てください。 @media screen and (min-width: 478px) { ... .entry-content .l-fuki, .entry-content .r-fuki { width: calc(100% - 106px);
papapapa

2020/03/28 02:27

ありがとうございます。 @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);を入れてみました。 そうすると、会話の余白はなくなりましたが、画像のようにキャラクターが右に寄ってしまいました。
TatamiSteak

2020/03/28 02:39

そのへんはクラス毎にmarginが設定されているので適宜調整してください…。 私らは解決のための手助けをすることはあっても便利屋ではありませんので…。 .entry-content .l-fuki { margin: 20px 106px 36px auto; } .entry-content .r-fuki { margin: 20px auto 36px 106px; }
TatamiSteak

2020/03/28 02:44

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

2020/03/28 02:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問