CSSやHTMLについて

CSS
आज:3 hit、कल:1 hit、संपूर्ण:822 hit

सर्वोच्च पद : 4 , अद्यतित： 19-02-2023, 2:26:27 पूर्वाह्न

どうぞ有識者様、ご回答をいただければ幸いです。

今現在、CSSやHTMLを使って小説の本文にノートのように、アンダーバーを右端から左端まで何本も引けないかと自身で試行錯誤をしているのですが全くもってできません。
ネットで色々と調べたり、CSSで有名な方の説明書を熟読して自身で試してみたりしました。
しかしながら、反映されていません。
かろうじてUタグで文字が記載されているところのみアンダーバーが引ける、ということがわかっただけで文字が何も書かれていない場所は空白のままなのです。

長々と書きましたが、質問内容は占いツクールでCSSやHTMLだけを使って、本文をノート風にすることはできないのでしょうか？

おわかりになる方がいれば、御教授お願いします。



無事に解決できましたので、解決済にいたします。
ご回答ありがとうございます！

翔べないペンギン

जवाब 2

𝕏

फ्लैग पोस्ट / ब्लॉक

Uタグやtext-decoration: underlineだと、文字の部分にしか下線が付きません。そういう仕様です。

なので、等間隔の線を背景として表示する方法がよく使われています。
（※「CSS ノート 罫線」でWeb検索するとサンプルや解説が出てきます）

たとえばこんな感じで書くと、添付画像(左)のようになります。
#u_result {
background-color: #fff; /* 背景色 */
background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ */
background-size: 100% 1.6em; /* 行の高さ */
line-height: 1.6em; /* 文字の高さ */
padding-top: 1px; /* 上オフセット */
padding-bottom: 1px; /* 下オフセット */
}
途中で文字サイズを変えたりすると、添付画像(右)のように破綻する場合があるのでお気を付けください。

ちなみに行の高さ 1.6em は自分の環境にあわせた数値です。
他のCSS設定の影響を受けるかもしれないので、必要に応じて調整してください。

線の種類を変えたいときは background-image のところをいじってください。
linear-gradient で線を引くのではなく、線の画像を使うのもアリです。

ゆきとさん
19-02-2023, 1:23:53 पूर्वाह्न झंडा कड़ी

ゆきとさん様
回答ありがとうございます！
まさしくそれです！
記載いただいたものを試したところ、いい感じにできました！
本当に助かりました。
ありがとうございます！

翔べないペンギン
19-02-2023, 2:25:37 पूर्वाह्न झंडा कड़ी

आप टिप्पणी करने के लिए लॉग इन करना होगा : प्रवेश

11 執筆環境について
20-01-2023, 8:38:50 पूर्वाह्न 翔べないペンギン

文字を書く方に質問です。 (一次創作・二次創作・夢小説など) みなさんはお話...

रैंक के आधार पर क्रमबद्ध किया गया इंतज़ार सवाल का जवाब कालानुक्रमिक आदेश रिवर्स