最近この様な、便箋風や大学ノート風の日記を見かけますね。
ほとんどは[TABLE]で表示されています。
そしてその中に入れる罫線なのですが、<HR> に「STYLEシート」で形状や色を指定して表示しています。
または、TABLEの<TD> セルを使いまして、表示しているものもあります。
しかし、この罫線は、両者ともその都度書きこまないといけません。
あれはわずらわしいものがあります。
そこで、この罫線を背景画像としてリピートさせてみたらどうでしょう！
罫線をタグでいちいち書く手間が省けます。
このテーブルの罫線は背景画像です。(￣m￣*)V
タグを書いてみましょうか！
<table bgcolor="black" cellspacing="1" cellpadding="15" width="90%" height="220" align="center"><tr><td bgcolor="#E9FDFE" vAlign="top"><!-- ここから罫線用のTABLE --><TABLE cellSpacing=5 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD background=http://gtone.k-server.org/img2/hasen2.gif><FONT style="FONT-SIZE: 15px; LINE-HEIGHT: 22px;color:black;font-family: Comic Sans MS;">
ここに文字を書きます。
テキストを書きませんと、罫線は出ません。
お判りですか？
</FONT></TD></TR></TBODY></TABLE><!-- ここまで --></td></tr></table>
<DIV align=right><font size=1>By <A href="http://plaza.rakuten.co.jp/gtone/diary/" target="_blank" style="text-decoration: none;">GT-ONE</A></font></DIV>
|
どのような画像なのか拡大表示してみましょうか。
 ←５倍に拡大して枠を付けております。
元画像の大きさは、２０ｐｘ×２２ｐｘ というGIF画像です。
LINE-HEIGHT: 22px;←このタグが味噌なのです。
これはテキストの行の高さを指定しています。
賢明なるみなさんはもうお分かりになりましたね。(￣m￣*)V
背景画像の高さと同じですね。
ですから、背景画像とテキストがずれないのです。
・・・・お判りですか・・・(￣_￣ i)ﾀﾗｰ お願い判って！
この画像は、ペイントなどで簡単に作れますから、皆さんも製作してみて下さい。
また、背景色を透過することを忘れないようにね！
画像が作れない方のために、雛形を載せておきますが、直リンクはご勘弁下さい。(￣^￣)b
時期が来ますと、URLを削除します。(￣‥￣)=3 ﾌﾝ
DLしてお使い下さい。カーソルを当てると形状のテキストが出ます。
http://gtone.k-server.org/img2/hasen2.gifが罫線の画像のURLです。
上の罫線の画像の雛形のURLを入れます。
では！ε＝ε＝ε＝（┌￣）┘ダッシュ！
|
|
Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
お気に入りの記事を「いいね！」で応援しよう
もっと見る
あ～～、そういう方法がありましたか・・・
1度わざわざそれをやりたくてHRで指定して
日記を書いたことがあるんですけど
めんどくさくて（笑
今度作ってみようかなぁ・・・・
(2004/08/29 05:32:42 PM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
マダムＹｏｓｈｉｅ さん |
硬い頭がくらくら～～、できるのでしょうか、
（私の頭で！）でも狙ってみたいです。
なんでも簡単になりますと伺いますと！
(2004/08/29 06:33:17 PM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
レンゲ・ローズ さん |
こんばんは。(^ｰ^*
難しそう～。
でもやってみますね。いつも有り難うございます。
また
前の日記のｱﾆﾒに暫～く見とれていましたー。
(2004/08/29 09:00:58 PM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
muon917 さん |
こんばんわぁ～～！！
(・0・。) ほほーっ 罫線の＜ｂｒ＞なしで出来るんですね～～。
私は先日、挑戦しましたがまぁ。。めんどいのなんのって。。(--;)
文字を入れすぎたら罫線が崩れるしページの一覧でテストしながら作りましたよ。。
今度、挑戦させていただきますねん♪
金曜日に本屋で粘りましたがよけいにダメになりました。。
今、苦しんでいる状態ですわ。。(T.T)
(2004/08/29 10:41:07 PM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
のんたん2354 さん |
こんばんわ～
この度は、有難う～m(__)m
これいいね～
罫線引くの大変な時有るよね～
今度、使わせて頂きますm(__)m
いつもありがとう～♪
(2004/08/29 10:43:52 PM)
＜ｂｒ＞じゃなかった。。
<HR>でしたね。。(;^_^A
(2004/08/29 10:44:01 PM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
meiakira さん |
おはようございま～す（*^_^*）
これ便利ですねφ(..)ﾒﾓﾒﾓ
ペイントで出来るんですね～
一度チャレンジしてみます 出来ない時はお借りしますm(__)m
(2004/08/30 07:37:26 AM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
マダムＹｏｓｈｉｅ さん |
今日の日記に超簡単gtoneさんの便箋の書き方としまして
書いたのです。 自分で背景の形作りたかったのですが、
いまいち理解不能でだめでした～～～～
gtoneさんのタグそのまま拝借しています。
差し支えございましたらすみません、訂正いたしますので、
仰ってくだっさい！ 勝手に拝借しながら申し訳ございません。
(2004/08/30 12:09:29 PM)
|
Re:【背景画像で大学ノート風罫線！】(￣^￣)b(08/29)
|
meiakira さん |
何とか、ペイントで作ってみましたぁ～（*^_^*）
私は文字サイズが大きいので、height25pxで作りました。。
早速、今日の日記に使わせて頂きました～ありがとうで～すm(__)m
(2004/08/30 03:35:49 PM)
やり方わかりました!!!
ありがとうございました☆
(2008/04/29 12:25:53 PM)
テーブル使う意味ないと思うんですが。
全部DIVにした方がソースが綺麗になりますし表示も早くなりますよ。
(2009/12/23 05:58:33 PM)
