ノートのような罫線

質問

スタイルシートでノートのように

８月１日
─────────────────
今日は遊園地へ行った。
─────────────────
楽しかった。
─────────────────
終わり。

みたいな罫線をいれたいのですが、現在背景画像に罫線を書いたものを使っているのですが、現在の方法だと画像などで罫線がずれてしまいます。
画像サイズがすべて同じならいいのですが、320x240だったり、挙句の果てには296x123とかいうサイズまで出てきてしまいました。
そこでどのようなサイズの画像があっても罫線に文字がきっちり収まるようにしたいのですが、どうもやり方がわかりません。
JavaScriptを使用すればいいのでしょうけれど、できればHTMLとCSSだけで行いたいのです。
何かいい方法はないでしょうか？

ちなみに今のタグはこんな感じです。

<div id="art">
8月1日<br>
今日は遊園地に行った<br>
楽しかった。<br>
終わり。
</div>
スタイルシートはこうなっています。
#article{background:url("./bg/line.png");
background-repeat:repeat-y;
font-size:12px;
line-height:16px;
padding:0 16px;
}
改行をBRじゃなくてPにすれば解決できるかもしれませんが、それだと大幅なページ改修を行わないといけないのでなるべくやりたくないです。最後の手段ということで。

よろしくお願いします。

回答No.1

ran_2323 · ベストアンサー

まぁぶっちゃけて言うと…どうしても罫線引きたいなら背景画像＋文字固定で。それが嫌なら罫線はあきらめよう、というところでしょうか…。
以下のサイトが参考になるかと思いますのでご覧あれ。

http://deztec.jp/lecture/folio/06/

補足

やっぱり無理ですか。
一応今は背景画像＋固定文字で変なサイズの画像だけスタイルを設定して20の倍数になるように（line-heightを20pxにしました。）調節することにしました。
出来ればそんなことしなくてもいいようにしたいのでもうちょっと待ってみます（しぶといってよく言われます＾＾；

回答No.4

abril

> むしろIEでの表示確認を怠っています。
> 当サイトはFirefoxの標準設定で問題なく見れるように作成されています。

腐っても鯛、の最大シェアのブラウザの表示確認を切り捨てられるとは潔いですね…羨ましいぐらいです。

> また、ユーザーが表示スタイルを変更して文字サイズが変更された場合でもなるべく見にくくないように作っています。（背景が重なっても読める等。

「（罫線の様な細かい）背景が重な」る事自体、ユーザにとっては読みづらい状態なのではないか思いますが…いや、これは私見ですし実物を見たわけではないので余計な事ですね。どうぞ聞き流して下さい。

> いまどきのFirefox Operaなどの主要ブラウザの場合、ページレイアウトを崩さずにページを拡大縮小する機能も備わっていると思いますが。
> （古いブラウザを使用するのはセキュリティーの観点からもよくないと思いますし。

Firefoxに関してはズームの機能が備わっているのはVer.3からの事ですね。しかし日本語版のWeb Developerに未だ対応していない等の理由により、Ver.2ユーザは決して少なくないと思いますが。それに「古い」とは言ってもまだ1世代前になって間もない程度ですので、私自身は制作の際も両方での表示結果を確認する様にしています。他人は自分が望むほどまめにヴァージョン・アップもしてくれない事も多々ありますし…困った事なんですが。職業上、クライアント（or 世間一般の方達）というのはこちらの予測を超える様な環境にいたりするものだなあ、という事を実感するのは少なくなかったのでつい余計な心配をしてしまうのです。
いずれにしろ、

> それにあくまで個人のページなのでそこまでシビアになる必要はないと思っています。
> 最近のいわゆるWEB2.0なページの外見は少々飽きたので古風なものを作ってみました。

という趣旨でらっしゃる様ですし趣味の範囲でしたらそれはもうどの様に考えても質問者様の自由ですので、差し出がましい事を申し上げてしまった様です。心よりお詫び申し上げます。長々と大変失礼致しました。

補足

> 腐っても鯛、の最大シェアのブラウザの表示確認を切り捨てられるとは潔いですね…羨ましいぐらいです。
怠っているとは書きましたが、切り捨てているとは言ってません。
ある程度完成したら確認してますよ。

> 「（罫線の様な細かい）背景が重な」る事自体、ユーザにとっては読みづらい状態なのではないか思いますが…
文字色は#000線の色は#efefefなので見にくくはないと思いますが、
視覚に難のある方や256色のブラウザで見るとどうなるかは確認してません。
一応200以上離れているので問題ないと思いますけど。

回答No.3

abril

ANo.2にタイポがありましたので訂正させて頂きます。失礼しました。
【誤】
IE on Windowsでは全く意味を成しませんし
【正】
IE on Windows以外では全く意味を成しませんし

回答No.2

abril

> 一応今は背景画像＋固定文字で変なサイズの画像だけスタイルを設定して20の倍数になるように（line-heightを20pxにしました。）調節することにしました。

えーとですね、問題は画像が入る云々ではないのです。質問者様はもしかしてIEでしか表示結果を確認されてないのでは？
「固定文字」とおっしゃていますが、"font-size:12px;"という様な文字サイズの指定で、「ブラウザ側での文字サイズ変更に影響されず固定される」のはIE on Windowsだけです。他の環境ではたとえどんな指定をしようとも、クライアント側で文字サイズを変更すればその部分が画像ではなくテキストである限り「必ず」文字サイズは可変となります。ですから、現状の様な「限られた環境での見た目合わせ」は他環境では脆くも敗れ去ることになります。

> 出来ればそんなことしなくてもいいようにしたいのでもうちょっと待ってみます（しぶといってよく言われます＾＾；

ANo.1様が参考に挙げたサイトはご覧になりましたでしょうか。ここで様々な方法を検証した上で結論として「（全部画像にする以外）無理」となっています。「文字サイズ固定＋背景画像」の方法も、先述の様に、IE on Windowsでは全く意味を成しませんし（例外があるとしたら、例えばイントラネット等で、閲覧対象となるユーザ全員がIE on Windowsを使用し更に設定も全く同一であるという様な特殊なケースぐらいでしょう。）。何より、もっと重要な事を示唆している「混乱の起点」～「制約を呪う前に」を良くお読みになれる事をお奨めします。

※蛇足ですが、ノート風のデザイン、という事自体かなり「垢抜けなさ（時代遅れ）」を感じさせると受け止められかねませんのでその点も考慮された方が…余計なお世話であればお詫び申し上げます。この手のスタイル、10年前ぐらいの個人のサイト等ではよく見かけました。

補足

> 質問者様はもしかしてIEでしか表示結果を確認されてないのでは？
むしろIEでの表示確認を怠っています。
当サイトはFirefoxの標準設定で問題なく見れるように作成されています。
また、ユーザーが表示スタイルを変更して文字サイズが変更された場合でもなるべく見にくくないように作っています。（背景が重なっても読める等。
それに、いまどきのFirefox Operaなどの主要ブラウザの場合、ページレイアウトを崩さずにページを拡大縮小する機能も備わっていると思いますが。
（古いブラウザを使用するのはセキュリティーの観点からもよくないと思いますし。

それにあくまで個人のページなのでそこまでシビアになる必要はないと思っています。

> という事自体かなり「垢抜けなさ（時代遅れ）」を感じさせると受け止められかねませんのでその点も考慮された方が
最近のいわゆるWEB2.0なページの外見は少々飽きたので古風なものを作ってみました。