いつもお世話になっております。
ノートに文字が書いてあるような感じに文字に下線が引けないものかと思い、相談に伺いました。
<p><span style="border-bottom:1px solid #ccc;">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</span></p>
だと、下線は引けるのですが、行末の折り返しや文末の位置によって下線の左の位置がバラバラになってしまいます。
ノートのように、右と左がそろえることはできないでしょうか。いろいろと探したのですが見つからなかったので、ご存知の方がいらっしゃいましたらお願いします。
No.1ベストアンサー
- 回答日時:
<div style="background:url(note.png) repeat-y left top;line-height:20px">
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
1. ノートの線っぽい高さ20pxの画像を作って、行間の線は画像一番下に引いておきます
2. その画像の高さとline-heightの値を同じにして(line-height:20px)
3.画像の繰り返し方向をy軸に設定(repeat-y)
すれば出来ると思います。
ありがとうございました。
お礼が遅くなり、申し訳ありません。
なるほど、背景画像を使うのですね……!
とても勉強になりました。参考にさせていただきます。
ありがとうございました!
No.4
- 回答日時:
文字の下に下線が引はtext-decoration:underlineを使用しますが。
改行以降は引けませんが。
記述例。
<div style="text-decoration:underline;">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
参考URL:http://www.tohoho-web.com/css/reference.htm#text …
お礼が遅くなり、申し訳ありません。
教えて下さった方法ですと、右の折り返しが揃わないため、質問をさせていただきました。
ご回答ありがとうございました。
No.3
- 回答日時:
こんにちは。
span要素にfont-family: monospace ;
で等幅フォントを指定すれば、折り返しはそろうと思います。
問題は文末の下線ですが・・。
文末にブロック要素(style="border-bottom:1px solid #ccc")を加えて
span要素の最後の行の下線に重ねるようにposition:relative;を上手に使えば可能かと思います。
文字の大きさや行間、親要素の幅などで調整はかなり面倒ですが。
他の回答者様と同様に画像を使用したほうが一番早いかと思います。
お礼が遅くなり、申し訳ありません。
折り返しを揃える方法、また画像を使わずに済む方法を教えて下さってありがとうございます。
とても勉強になりました。参考にさせていただきます。
ありがとうございました!
No.2
- 回答日時:
割と最近、同じ様な質問に答えました(qa4837348.html)。
手法はANo.1様の仰っている通りですが、一つ注意しておかなければならない点があります。クライアント側が「フルページズーム機能の付いたブラウザでフルページズームを行った場合」には崩れませんが、ズーム機能がないor使わずに「文字サイズ」の拡大縮小を行った場合にはノートの罫線とテキスト部分の間隔は保たれなくなりますのでズレが生じます。以下の記事等を読んでその点をよく認識しておかれた方が宜しいかと思います。
【参考】http://builder.japan.zdnet.com/comment/story/0,3 …
お礼が遅くなり、申し訳ありません。
教えていただいた質問、検索できてませんでした。教えて下さってありがとうございます。
また、No1様の補足もありがとうございます。
参考にさせていただきます。ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景画像の上に透過GIF背景...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
background-sizeでcontainする...
-
webデザインcss <p>タグ内の長...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
gif画像でたまに背景がグレーに...
-
画像とその下にあるテキストの...
-
同じ画像 複数回使用
-
CSSで背景画像に指定されている...
-
画像の横にテキスト表示
-
半透明のtable、画像は透過した...
-
WEbサイトの背景画像にメッシ...
-
CSSでローマ数字と○1などを画像...
-
LightBoxの矢印の出し方
-
画面サイズ変更時のレイアウト...
-
全くの初心者ですが、どなたか...
-
両端に背景画像を入れる
-
横長背景をページ読み込みの時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-sizeの背景で最小値...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
lightbox2で画像を天地左右中央...
-
要素の幅をいろんな写真の幅に...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
コーディング中、右側に謎の余...
-
particles.jsの背景の上にテキ...
-
背景画像が半分しか表示されない
-
htmlかcssで背景の白い枠をなく...
-
LightBoxの矢印の出し方
-
画像の上に
-
gif画像でたまに背景がグレーに...
おすすめ情報