GT-ONE 楽天タグ講座 パイプ奮闘記

Freepage List

【写真集】


■ 玄関 ■ 


■プチ講座MENU


【日記の雛形・罫線】


【もう一つのプロフィール】


■【おもしろタグ教室MENU】


バナーって何!


プレート教室VOL.1


プレート教室VOL.2


アニメGIF製作VOL.3


画像


アップロードとは  


アイコンの使い方!


壁紙の使い方!


【バナー&プレート置き場】


.    


.      


.    


  


.


【壁紙チェンジャー】


【リンク集】


   


.   


     


.         


【キリ番】


   


  


   


  


  


  


  


  


  


 


  


  


  


マーキー


グラデーションフォント 


色々なスクロール1


色々なスクロール2


色んなスクロール3


  


   


【カラーサンプル】カラーコード表


【カラーサンプル】カラーネーム表


(*mm)   


!  


スクロールを消す


  


  


TABLEでページ一覧を隠す


.


φ(..)


.


スイッチで表示


【日記リンクの皆様】 


( ̄‥ ̄)=3 フン


      


 


           


■【HPの飾り付け教室MENU】


   


TABLEで整理整頓  


アニメGIFって何!


      


画像を貼り付けてみよう


リンクを貼って見よう


楽天での壁紙について


壁紙の位置指定


 


【飾付VOL10】


test


雛形1


Rum Rose


remon


【My PIPE Collection】


【マイ パイプ コレクション001~010】


【マイ パイプ コレクション011~020】


【マイ パイプ コレクション021~030】


【マイパイプ コレクション #31~#40】


レストアの仕方


2004/08/29
楽天プロフィール XML
カテゴリ:【プチ講座】
最近この様な、便箋風や大学ノート風の日記を見かけますね。
ほとんどは[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>

どのような画像なのか拡大表示してみましょうか。

罫線の画像 ←5倍に拡大して枠を付けております。
 元画像の大きさは、20px×22px という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





楽天SocialNewsに投稿!

Last updated  2004/09/23 10:56:39 PM
コメント(11) | コメントを書く



■コメント


(;゚д゚)   ルークβ さん
あ~~、そういう方法がありましたか・・・
1度わざわざそれをやりたくてHRで指定して
日記を書いたことがあるんですけど
めんどくさくて(笑
今度作ってみようかなぁ・・・・ (2004/08/29 05:32:42 PM)

Re:【背景画像で大学ノート風罫線!】( ̄^ ̄)b(08/29)   マダムYoshie さん
硬い頭がくらくら~~、できるのでしょうか、
(私の頭で!)でも狙ってみたいです。
なんでも簡単になりますと伺いますと! (2004/08/29 06:33:17 PM)

Re:【背景画像で大学ノート風罫線!】( ̄^ ̄)b(08/29)   レンゲ・ローズ さん
こんばんは。(^ー^*

難しそう~。
でもやってみますね。いつも有り難うございます。

また
前の日記のアニメに暫~く見とれていましたー。

(2004/08/29 09:00:58 PM)

Re:【背景画像で大学ノート風罫線!】( ̄^ ̄)b(08/29)   muon917 さん
こんばんわぁ~~!!
(・0・。) ほほーっ  罫線の<br>なしで出来るんですね~~。
私は先日、挑戦しましたがまぁ。。めんどいのなんのって。。(--;)
文字を入れすぎたら罫線が崩れるしページの一覧でテストしながら作りましたよ。。
今度、挑戦させていただきますねん♪

金曜日に本屋で粘りましたがよけいにダメになりました。。
今、苦しんでいる状態ですわ。。(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)

ぎゃ!   muon917 さん
<br>じゃなかった。。
<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)   マダムYoshie さん
今日の日記に超簡単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)

PR

Rakuten Profile


gtoneさん

キャッチフレーズは未入力です。

フォローする


■ 趣味・関心キーワード
ゲーム  ホビー 

Calendar

 

Powered By 楽天ブログは国内最大級の無料ブログサービスです。楽天・Infoseekと連動した豊富なコンテンツや簡単アフィリエイト機能、フォトアルバムも使えます。デザインも豊富・簡単カスタマイズが可能!

Copyright (c) 1997-2014 Rakuten, Inc. All Rights Reserved.