| ※使用に当たってのルールは、ABOUTページをご覧下さい |
ラインを作る |
| 当サイトのラインは、同じパターンを繰り返し配置し、自由な長さで利用できるように比較的短く作られています。 |
| ※使用する画像を任意の場所に保存しておいて下さい |
| 画像の連続配置でラインを作る |
 |
画像名:line.gif 幅:48px 高さ:19px |
|
 |
        |
<img src="line.gif" width="48"
height="19">
<img src="line.gif" width="48"
height="19">
<img src="line.gif" width="48"
height="19">
・・・必要回数繰り返して記述・・・
<img src="line.gif" width="48"
height="19">
|
<img src="画像へのパス" width="画像の高さ"
height="画像の幅">
・・・必要回数繰り返して記述・・・ |
◆設定の内容について◆
| <img> |
画像の設定
src="使用する画像へのパス"
height="使用する画像の高さ"
width="使用する画像の幅"
同じ画像を繰り返し配置してラインとします。画像と画像の間にスペースが入ってしまうと途切れてしまいますので注意して下さい。
画像へのパスは、画像ファイルとhtmlファイルの保存先が同じ場所なら画像ファイル名を「●●.gif」や「●●.jpg」と指定してください。違う場所なら「保存先のフォルダ名/(スラッシュ)画像ファイル名」というようにパスを指定して下さい。
ラインを長くしたければ記述も長くなってしまうこと、また長さの微調整のしやすさからも、次にご紹介するテーブルを使用した方法をおススメします。 |
|
| テーブルでラインを作る |
 |
画像名:line.gif 幅:48px 高さ:19px |
|
 |
|
|
<table border="0" cellspacing="0"
cellpadding="0" height="19"
width="400">
<tr>
<td background="line.gif"><img
src="line.gif" width="48"
height="19"></td>
</tr>
</table>
|
<table cellspacing="0" cellpadding="0"
border="0" height="画像の高さ" width="ラインを伸ばしたい横幅">
<tr>
<td background="画像へのパス"><img
src="画像へのパス" width="画像の幅"
height="画像の高さ"></td>
</tr>
</table> |
◆設定の内容について◆
| <table> |
テーブルの設定
cellspacing="0" …セルの間隔「ゼロ」
cellpadding="0" …セルの余白「ゼロ」
border="0" …枠線の幅「ゼロ」
height="使用する画像の高さ"
width="ラインを伸ばしたい横幅"
テーブルの高さは使用する画像の高さと同じです。横幅は自由に設定できます。「%」で指定すれば、ウィンドウに対しての割合で長さが変動します。 |
| <td> |
セルの背景画像の設定
background="使用する画像へのパス"
画像ファイルとhtmlファイルの保存先が同じ場所なら画像ファイル名を「●●.gif」や「●●.jpg」と指定してください。違う場所なら「保存先のフォルダ名/(スラッシュ)画像ファイル名」というようにパスを指定して下さい。 |
| <img> |
セルの中に置く画像の設定
src="使用する画像へのパス"
height="使用する画像の高さ"
width="使用する画像の幅"
文字の全角スペースをセルの中に配置しておくと、少なくとも文字の高さ分のテーブルになってしまいます。細いラインをテーブルで作りたいときには不適切です。背景に使った画像と同じものを配置するか、透明の画像(スペーサー画像)を配置することをおススメします。 |
|