[返信する]
ノート風日記
By 匿名
2011-04-25 23:01:38
自分なりに調てみてもなかったので作らせていただきました

リアルでノートみたいに文字のしたに点線を入れたいのですがどのようにすればいいのでしょうか？

因みに
┌──────────┐
｜あいうえお　　　　　｜
｜‐‐‐‐‐‐‐‐‐‐｜
｜あいうえお　　　　　｜
｜‐‐‐‐‐‐‐‐‐‐｜
└──────────┘
となり枠線の中が色付きにもしたいのです


SH06A3
[編集]
By 匿名
2011-04-25 23:20:01
まず、どのようなタグを使いましたか？
ただ分からないから一から教えてほしいならば、タグ支援サイトを探して下さい。
此処は一から教わる場所ではありません。

821SC
[編集]
By 匿名
2011-04-25 23:39:30
<style type="text/css">
body,td {
text-align:center;
font-size:12px;
}

/* ============== */
/* 全体を包む要素 */
/* ============== */

#wrap{
margin:0px auto;
<pc>width:400px;</pc>
<nopc>width:95%;</nopc>
}

/* ============== */
/* 記事全体 */
/* ============== */

div.kizi{
text-align:left;
margin-bottom:2em;
padding:0.5em;
border:solid 1px #777777;
/* 記事全体の背景 */
background:#ffffff;
}

/* ============== */
/* タイトル部分 */
/* ============== */

div.title{
padding:3px;
margin-bottom:0.5em;
/* タイトルの背景 */
background:lightgrey;
}


/* ============== */
/* テキスト部分　*/
/* ============== */
div.text{
background:url(#tmpImg13429-22_url#);
line-height:17px;
}

</style>



というかんじにしています

SH06A3
[編集]
By め
2011-04-26 18:44:34
link:m-pe.tv
文字の下に点線を付けたいというだけなら、こちらが参考になりませんか？
「文字 下 点線」で出ました。
SH705i
[編集]
By 匿名
2011-04-26 22:59:08
画像を使用してみてはどうでしょう。
line-heightとfont-sizeの比率に気を付けて、それに合わせた点線の画像を敷き詰めでやれば簡単に反映出来るかと思います。
W51S
[編集]
By たすけあい
2011-04-27 02:01:57
ライン画像の高さ・line-height行の高さ・ボックスの上マージンを0・左右マージンを0・下マージンを画像の高さと同じにする・文字サイズは標準サイズ16pxを前提にし、画像の高さ・行の高さ・ボックスの下マージンの高さは文字サイズ16pxより大きく(35px以上)して同じ高さにすると、常に文章下にライン画像が引かれ文章が折り返してもライン画像と文章の位置もズレないようになります。

ただし、このように画像を利用した場合でも、フルページズーム機能ではないブラウザでは、ブラウザ側の文字サイズを変更・拡大/縮小をした場合ズレてしまいます。
解像度の違いで同じ1pxでも見ための表示サイズが違うことや、読みやすい文字サイズやブラウザ幅は人それぞれですから、閲覧する側に対して固定表示は無理ですし、このように複雑なデザインならなおさら難しくなります。
(IEも例えPX指定でも、設定でサイト側がCSSで指定してる文字サイズを無効にできるので)

ご自身のブラウザや同じ表示になるブラウザだけを対象ならそれで構いませんが、CSSといえど万能ではありませんので、紙に描くのとは違い限界がありますから、ノートのようなデザインはすべてのブラウザでズレない表示は無理になります。
943SH
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！