|
タイトル部分を画像で区切る方法の解説 |
例えばこのページのタイトル部分の飾り（星印の画像ファイルを繰り返し表示させて区切り線にする）のような感じに作りたい場合にどのようにしたらよいかを解説します。
この場合には
| １． | 表を用いてレイアウトをする（１列３行の表を作成する） | |
| ２． | 表の１行目と３行目には画像を貼り付ける | |
| ３． | ＨＴＭＬを修正して、スタイルシードで画像の繰り返しをする |
という手順で実現することができます。
例えば次のような比較的小さな画像ファイルを横に繰り返してタイトルの区切り線を付けたいとします。
例えば左の画像の基本単位（画像ファイル）はこれです--> 
| １． | ここにタイトル部分の表を作成してみます。 |
|
タイトル部分を画像で区切る方法の解説 |
上のような感じになります。
| ２． | 次に画像を貼り付けてみます。 |
必要な画像を自分のＭＯの自分のフォルダ内にあるimagesフォルダに保存して、その画像を表の背景画像として貼り付けて下さい。
方法についてはあまり詳しく書きませんが、該当するセルの上で右クリックして『セルのプロパティ』を選択、表示される画面から『背景画像を使用する』という部分にチェックを付け、『ＯＫ』ボタンを押します。
|
タイトル部分を画像で区切る方法の解説 |
| ３． | 最後に画像を貼り付けてみます。 |
上の状態だと一つの画像が限りなく繰り返し表示されているので、これを１行だけ横に繰り返す設定に変更します。
これを実現するためには『スタイルシート』を用いて、次のように記述する必要があります。
フロントページなどのＷｅｂページ作成ソフトを利用している場合には『HTML』とかれた部分をクリックしてＨＴＭＬファイルのタグを表示して下さい。
今回の場合には表の背景画像を設定し、それを横方向に繰り返し表示させたいので次のように書き加えて下さい。
<td width="100%" background="images/mar_007s.gif">と書かれている部分を探し、
『style={background-repeat:repeat-x}』（カギカッコ内のみ）を追記します。
追記するときに半角のスペースを１つ入れて下さい。
| <td width="100%" background="images/mar_007s.gif" style={background-repeat:repeat-x}> |
『background-repeat』という部分に指定する用語は次の通りです。
今回は横に１行分だけ繰り返して表示したいので『repeat-x』に設定します。
| 表記法 | 説 明 |
| repeat | 画面いっぱいに繰り返して表示（省略した場合にはこれが指定される） |
| repeat-x | 横方向に繰り返して表示 |
| repeat-y | 縦方向に繰り返して表示 |
| no-repeat | 繰り返さず一点だけ表示 |
ここまでできたら表の枠を表示しない設定にして下さい。
表の上で右クリックして『表のプロパティ』を選択後、罫線サイズを『０（ゼロ）』に設定すれば表の罫線は表示されなくなります。
２行目にタイトルを入れれば、星印で区切られたタイトル部分ができあがります。
最終的にはこんな感じになります。
|
タイトル部分を画像で区切る方法の解説 |