タイトル部分を画像で区切る方法の解説

タイトル部分に画像で区切り線を付けたいということがあります。

例えばこのページのタイトル部分の飾りを変えて

タイトル部分を画像で区切る方法の解説

というタイトルの上下に星印の画像ファイルを繰り返し表示させて区切り線にするような感じに作り変えたい場合にどのようにしたらよいかを解説します。

この場合には

Ａ．表を用いてレイアウトをする（１列３行の表を作成する）

Ｂ．表の１行目と３行目には画像を貼り付ける

Ｃ．ＨＴＭＬを修正して、スタイルシードで画像の繰り返しをする

という手順で実現することができます。

例えば次のような比較的小さな画像ファイルを横に繰り返してタイトルの区切り線を付けたいとします。

今回使う画像の基本単位（画像ファイル）はこれです-->　　

１．ここにタイトル部分の表を作成してみます。

タイトル部分を画像で区切る方法の解説

上のような感じになります。

２．次に画像を貼り付けてみます。

必要な画像を自分のＭＯの自分のフォルダ内にあるimagesフォルダに保存して、その画像を表の背景画像として貼り付けて下さい。

方法についてはあまり詳しく書きませんが、該当するセルの上で右クリックして『セルのプロパティ』を選択、表示される画面から『背景画像を使用する』という部分にチェックを付け、『ＯＫ』ボタンを押します。

タイトル部分を画像で区切る方法の解説

３．最後に画像を貼り付けてみます。

上の状態だと一つの画像が限りなく繰り返し表示されているので、これを１行だけ横に繰り返す設定に変更します。

これを実現するためには『スタイルシート』を用いて、次のように記述する必要があります。
フロントページなどのＷｅｂページ作成ソフトを利用している場合には『HTML』とかれた部分をクリックしてＨＴＭＬファイルのタグを表示して下さい。

今回の場合には表の背景画像を設定し、それを横方向に繰り返し表示させたいので次のように書き加えて下さい。

<td width="100%" background="images/mar_007s.gif">と書かれている部分を探し、
『style={background-repeat:repeat-x}』（カギカッコ内のみ）を追記します。
追記するときに半角のスペースを１つ入れて下さい。

『background-repeat』という部分に指定する用語は次の通りです。
今回は横に１行分だけ繰り返して表示したいので『repeat-x』に設定します。

表記法	説　　　　　　明
repeat	画面いっぱいに繰り返して表示（省略した場合にはこれが指定される）
repeat-x	横方向に繰り返して表示
repeat-y	縦方向に繰り返して表示
no-repeat	繰り返さず一点だけ表示

ここまでできたら表の枠を表示しない設定にして下さい。
表の上で右クリックして『表のプロパティ』を選択後、罫線サイズを『０（ゼロ）』に設定すれば表の罫線は表示されなくなります。
２行目にタイトルを入れれば、星印で区切られたタイトル部分ができあがります。

最終的にはこんな感じになります。

タイトル部分を画像で区切る方法の解説

説明の都合上、このような位置にタイトルが来てしまいました。最後にタイトル部分があるのも変ですが・・・・・

－－－

このページは、FrontPage解説用として過去に作ったページを使ってSharePoint Designer用の解説ページを作るためにXHTML1.0で書き直したものです。
td要素のheight属性、width属性、bgcolor属性は非推奨（HTML4.01 Strict 廃止　XHTML1.0 Strict 廃止　XHTML1.1 廃止）、background属性は各種ブラウザで採用されているもののHTMLの仕様書としては正式に定義されていません。
そのため、このページを作成するにあたってはtd要素の属性として記述するのではなく別途CSSとして記述しました。

tableを使ってレイアウト表示する方法も今では推奨されていません。
HTMLファイルにはその内容と構造のみを記述し、どのように表現するか、どのように見せるかという表現の方法に関してはスタイルシートを使うようにしていきましょう。

FAQのページへ