CSSやHTMLについて

CSS
今日:2 hit、昨日:1 hit、合計:332 hit

最高ランク : 4 , 更新：

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

今現在、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 で線を引くのではなく、線の画像を使うのもアリです。

ゆきとさん
違反報告 リンク

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

翔べないペンギン
違反報告 リンク

コメントをするにはログインが必要です : ログイン

11 執筆環境について
翔べないペンギン

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

ランキング 回答待ちの質問 新着