質問: ### 前提・実現したいこと サイトに文章を掲載する際に”吹き出し”を 用いて文章を表示しているのですが、 ”ふりがな”を吹き出し内1番上の行に 記入した際に発生する上の余白が気になっております。 下の画像を参考にしてください。 左側が現在の状況で、右側が理想の状態です。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f526ae313ee2ec2adca7989dd8ad17d3.png) 条件は下記の3つになります 1rubyが1行目(1行目をline-height:0にしているので実質2行目) にある場合、padding-topの設定を変える。 (元が10pxなので、2px程度の予定) 2rubyが2行目以降にしかない場合、上に空白ができる ことはないのでpadding-topの設定は変わらない。 3新規でのclass名などは用いず、rubyが最初の行に あるかないかでレイアウトの振り分けを行う 想定としては以上になります。 ### 該当のソースコード **【HTML】** ``` ふりがな有 テストテストテストテスト テストテストテストテスト ``` ※今回は.sentence p 内だけの設定です。 .l1は吹き出しの見た目だけなので paddingの設定に影響はしていません。 **【 CSS 】** ``` /* 吹き出しまたは台詞 */ .sentence {display:flex; position:relative; margin-top:-15px} /* 名前欄 */ .sentence .CharaName{ width:4em; padding:1.6em 0.5em 0.5em 0.5em; text-align: right; } /* 台詞・説明欄内 */ .sentence p{ white-space: pre; position: relative; background: #fff; margin-left:10px; border-radius:10px; padding:**10px** 15px 7.5px 15px; ⇦こちらの10pxが上の空白です width:auto; } /*最初の行、改行取り消し*/ .sentence p:first-line {line-height: 0px;} /*フォントサイズ調整*/ rt{transform: scale(0.78);} ``` 吹き出しのレイアウト ``` .sentence .l1{ border:solid 1px; } .sentence .l1:before, .sentence .l1:after{ content: ""; position: absolute; } .sentence .l1:before { top: 22px; left: -13px; margin-top: -12px; border: 5px solid transparent; border-right: 10px solid #FFF; z-index: 2; } .sentence .l1:after { top: 23px; left: -15px; margin-top: -13px; border: 5px solid transparent; border-right: 10px solid #555; } ``` ### 試したこと プログラムの知識がないので、cssだけで 対応を試みたのですが、ruby事態にcssでposition:absoluteや position:relativeを指定してもrubyで囲った文字だけが 移動してしまう為空白の調整はできず、:first-childや:notなどで 色々検証してみても上記の3つの条件を満たせるものは cssだけでは実現できそうにありませんでした。 jQueryに.has()のようなものがあるのは 調べて分かったのですが、それで設定する方法も 私の方では理解できなかったのでこちらで質問を させていただきました。 よろしくお願いします。 ### 補足情報(FW/ツールのバージョンなど)
回答: CSSの ::firstline疑似要素 が使えるかと思ってためしてみたけど、`white-space: pre;`だと無効になるようです。 たぶん、CSSだけでは無理だと思います。JS を使って、rt のp内での相対位置を取得して、一行目ならpaddingTop を 0 にするというのでいけそうです。 ``` let p = document.querySelectorAll('.sentence p'); for (var i = 0; i < p.length; i++) { const rt = p[i].querySelector('rt'); if ((rt !== null) && (rt.getBoundingClientRect().top - p[i].getBoundingClientRect().top) < 40) { p[i].style.paddingTop = "0"; }; } ```