CSSやHTMLについて
CSS最高ランク : 4 , 更新: 2023/02/19 2:26:27
どうぞ有識者様、ご回答をいただければ幸いです。
今現在、CSSやHTMLを使って小説の本文にノートのように、アンダーバーを右端から左端まで何本も引けないかと自身で試行錯誤をしているのですが全くもってできません。
ネットで色々と調べたり、CSSで有名な方の説明書を熟読して自身で試してみたりしました。
しかしながら、反映されていません。
かろうじてUタグで文字が記載されているところのみアンダーバーが引ける、ということがわかっただけで文字が何も書かれていない場所は空白のままなのです。
長々と書きましたが、質問内容は占いツクールでCSSやHTMLだけを使って、本文をノート風にすることはできないのでしょうか?
おわかりになる方がいれば、御教授お願いします。
無事に解決できましたので、解決済にいたします。
ご回答ありがとうございます!
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 で線を引くのではなく、線の画像を使うのもアリです。
ゆきとさん
2023/02/19 1:23:53 違反報告 リンク
ゆきとさん様
回答ありがとうございます!
まさしくそれです!
記載いただいたものを試したところ、いい感じにできました!
本当に助かりました。
ありがとうございます!
翔べないペンギン
2023/02/19 2:25:37 違反報告 リンク
コメントをするにはログインが必要です : ログイン
- ログイン
- 投稿ランキング
-
1.
ファミリーリンクについて by.永眠済み
2024/05/01 7:15:50 -
2.
結構真面目な話です(※病みアピに感じる方はご遠慮ください) by.悠麻@だいすの青色担当
2024/05/01 8:46:47 -
3.
友達のこと(お願いします!見ていってください~(´;ω;`) by.りみ@低浮上&ゆゆと相方💕
2024/05/01 7:42:27 -
4.
YouTubeや他の検索ができる規制がかからないサイト教えてください by.れもねーど🍋🍯@復活
2024/04/30 19:01:15 -
5.
作品に来た謎のコメントについて by.虹色マルチ#うろぐ少し荒れてる・・・・・・
2024/04/30 18:28:10 - もっとみる
- ユーザランキング
-
1.
悠麻@だいすの青色担当
50 Point -
2.
透
40 Point -
3.
虹色マルチ#うろぐ少し荒れてる・・・・・・
30 Point - もっとみる