いつもお世話になっております。
見積書アプリを印刷する過程において、合計金額にひく下線の位置調整のCSSがうまく反映されず困っております。
どこが誤っているのか、ご教授いただけますと幸いです。
こちらの記事を参考に作成してみました。
@media print {
.control-value-gaia.value-9032 {
color: red; //場所があっているか確認するための色つけ
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
}
colorで場所を確認しましたが、色はきっちり反映されておりました。
なので場所はあっていると思うのですが、、、
不勉強で大変恐縮ですが、何卒よろしくお願いいたします。
※最初はtext-decorationで作ったのですが、文字に近すぎてコンマで切れたりするので、もっと位置を下にずらしてほしいとの意見でした
佐野 智香様
お世話になっております。
トヨクモの江田と申します。
span要素に適用するとよいと思います．
@media print {
.control-value-gaia.value-9032 span{
color: red;
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
}
江田篤史様
お世話になっております、佐野です。
おかげさまで無事適用されました！！初歩的な質問にも親切にお教えいただき、感謝いたします。
span要素に関してもっと勉強していきたいと思います。
また機会ございましたら、よろしくお願いいたします。
本当に助かりました！ありがとうございました！
江田様
すみません、下線に関してもうひとつご教授いただきたく追記いたします。
上記とは別の箇所に、今度は文字（要素）よりも長く下線をひくことはできるのでしょうか？
.control-value-gaia.value-5520183 span{
width: 500px;
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
widthをいれてみましたが、やはり適用はされませんでした。
文字列ではなく、フィールド幅に下線が引ければ
フィールド幅自体は可変できるので可能しょうが…そもそもそういったことはできるのでしょうか？
お忙しいところ恐縮ですが、何卒よろしくお願いいたします。
佐野 智香様
お世話になっております。
span要素をinline-blockにするとwidthが利くようになります．
https://web-firstlog.com/12-24-block-inline/
.control-value-gaia.value-5520183 span{
border-bottom: 1px solid #000;
padding-bottom: 2px;
display: inline-block;
width: 100%;
}
江田様
お世話になっております。おかげさまでwidthがきくようになりました！！
displayに関するページは見ていたのですが、理解が全くおよんでおりませんでした。
参考URLまでいただき、ありがとうございます。勉強させていただきます。
ちなみに、主観でなんとなくで結構なのですが
要素を横に並べた場合、２つ繋げての下線は仕様的に難しいのでしょうか…？
（要素の下線なので、境目で切れてあたりまえなのですが。。）
１２
３
と要素が並んだ場合に
１２
に下線をひくと、１と２の境目で下線が切れるので
３の上(border-top)に線をひいて擬似的に下線にしようとしましたが
１２の要素範囲に距離を置かれてしまい、下線にはなりませんでした。
参考までにご意見をいただけますと幸いです。
よろしくお願いいたします。
佐野 智香様
お世話になっております。
3の要素に、
??? {
margin-top: -10px;
padding-top: 10px;
}
などと指定すれば無理やりできなくもないかと思います。
ただ、1と2を囲う要素を追加して、borderを指定するのが一般的だと思います。
江田様
お世話になっております。アドバイスいただきましてありがとうございます。
ご提示いただいた内容で試してみます。
そうですよね、囲う要素を追加してborder指定が一般的ですよね…。
ただ、グループなどを使うと余計な枠がでてしまうので
求める動作にはならない気がします…。
できるかぎり試してみます！ありがとうございました！