画像で区切り線をつくる方法

画像とかイラストなどで区切り線を創ってみれば、ＨＰが楽しくなるかもしれません・・・

今日は、そのテクニックを紹介しますね・・・


では、説明してゆきますね・・・

1. 先ず、使用する画像は・・・　　を使用してみます。
   
   
2. スタイルシートで背景画像として表示
   　　　　・・・style="background-image:url(' 画像.gif ')"・・・①
   
   
3. 画像を繰り返す方向の指定・・・横方向（Ｘ）に繰り返す場合はrepeat-xと指定します。
   　　　　・・・style="background-repeat:repeat-x"・・・②
   
   
4. 表示位置の指定・・・上⇒top　の 左⇒left　から表示したいので
   　　　　・・・style="background-position:top left"・・・③
   ※　ｔｏｐとｌｅｆｔの間は半角のスペースを入れて下さい。
   
   
5. 次に、画像の区切り線の上部の余白を本文の文字と重なってしまわない様に画像の高さより大きめに取ります・・・
   
   
6. 内側の余白はpaddingプロパティで指定します・・・上の余白を取る場合padding-topで指定出来ます。
   今回の画像の高さは15ピクセルなので余白を20pxに指定しました。
   　　　　・・・style="padding-top:20px"・・・④
   
   
7. この4つをまとめて記述しますと下記の様に成ります・・・
   <P style="background-image:url('画像.gif');background-repeat:repeat-x;background-position:top left;padding-top:20px;width:400px">この様な区切り線が完成しましたが、如何ですか？

   ※　画像のアドレスはここでは長いので省きました。
   
   
8. すると、下の様な区切り線が出来上がりました。

   この様な区切り線が完成しましたが、如何ですか？

今日の小技は如何でしたか？