CSSやHTMLについて

CSS
Aujourd'hui:1 hit、Hier:0 hit、Total:606 hit

Rang le plus élevé : 4 , Mis à jour： 19 févr. 2023 02:26:27

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

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

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

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



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

翔べないペンギン

Réponse 2

𝕏

Signaler / Blocs

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 févr. 2023 01:23:53 Drapeau Lien

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

翔べないペンギン
19 févr. 2023 02:25:37 Drapeau Lien

Vous devez être connecté pour commenter : Se connecter

11 執筆環境について
20 janv. 2023 08:38:50 翔べないペンギン

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

Classement Questions réponses d'attente nouveau