ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2004/08/29

最近この様な、便箋風や大学ノート風の日記を見かけますね。
ほとんどは[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 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を入れます。

では！ε＝ε＝ε＝（┌￣）┘ダッシュ！

お気に入りの記事を「いいね！」で応援しよう