「コミックホームズ」でも使っているんですが、ホームページで自動的に伸び縮みする枠を作る方法を説明します。
ホームページ作りの解説書でもなかなか書いてないテクニックなので、まとめてみました。
普通に表（テーブル）を使って枠を作ると、
| 普通にテーブルを使った場合の枠です。普通にテーブルを使った場合の枠です。普通にテーブルを使った場合の枠です。 |
こんな風に四角い殺風景な枠しか作れません。（スタイル指定を使っても作れます）
ですが、画像を使っていろいろ工夫すると、例えば以下のような枠線ができます。
 |
 |
 |
中身の文章の量によって、縦方向に伸び縮みします。（文字のサイズを変えてみてください） |
||
 |
 |
 |
横方向にも伸び縮みさせると、こんなことができます。
|
|
|
| ●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください） | ||
|
|
このように、画像を使って、なおかつ中身の量によって自動的に伸び縮みする枠の作り方について、説明します。
| まずは元になる枠線の画像を作ります。 Photoshop、Paintshopなど、画像を加工できるソフトなら何でもいいですが、ファイルをGIF形式で保存できるものを使ってください。 |
|
 |
画像の背景を白にして（ホームページの背景色に合わせる）、枠線を描きます。 できあがったら、GIF形式で保存しておきます。 |
|
次に、上に描いた点線のように、この画像を９枚にスライス（分割）します。 |
|||||||||
|
ちなみにこの例では、←のようにExcel方式のファイル名で保存してみました。 （wakusen_a1.gif、wakusen_b1.gif、…） |
|
ホームページ上に、３行３列の表（テーブル）を作って、スライスした画像を並べていきます。
★Photoshopバージョン6以降の「スライス」機能や、マクロメディア社のFireworksなどを使うと、ここまでの「枠線画像を作る」「スライスしてファイル名を変えて保存する」「ホームページにテーブルを作って画像を配置する」という手順が、一度にできるのでとても便利です。ちなみに斎藤はFireworksを使っています。 |
|||||||||||||||||||
|
ここまででできたテーブルを元にして、伸び縮みをさせます。
縦／横のどちらの方向に伸び縮みさせたいかで、作り方が変わります。
まず縦方向のみ伸び縮みする枠の作り方を説明します。
|
Excel方式でセルの説明をします。 縦方向に伸び縮みさせるには、「a2」と「c2」のセル（縦線が入っているセル）を伸び縮みさせればよいのです。 |
|||||||||
|
a2とc2のセルの画像をいったん削除します。 ※以下、模式図なのでテーブルの罫線を表示していますが、実際は表示されません。 |
|||||||||
|
a2とc2のセルで、「セルの背景画像」に wakusen_a2.gif、wakusen_c2.gif を設定します。 | |||||||||
|
後は中身のテキストを入力します。 中身が増えていくにつれて、枠が自動的に縦方向に伸びていきます。 |
|||||||||
|
実際の表示は、テーブルの罫線が見えないので、こうなります。 要は、枠の縦線のところは普通に画像が貼ってあるわけではなくて、セルの背景画像が見えているのです。 |
次に、横方向に伸び縮みする枠の作り方を説明します。
横方向に伸縮させたい場合としては、例えばページの横幅いっぱいに枠を表示したいケースがあります。
（ウインドウの横幅が変わるに連れて、枠の横幅が変わらないといけない）
なお、横方向に伸縮するということは、中身のテキストの改行位置が変わる関係で、縦方向にも伸縮させないといけません。
|
再びExcel方式でセルの説明をします。 縦・横方向にそれぞれ伸び縮みさせるには、「a2」「c2」「b1」「b3」の４つのセルを伸び縮みさせます。 |
|||||||||
|
４つのセルの画像をいったん削除します。 ※以下、模式図なのでテーブルの罫線を表示していますが、実際は表示されません。 |
|||||||||
|
４つのセルで、「セルの背景画像」に今削除した画像（wakusen_a2.gif、wakusen_c2.gif、wakusen_b1.gif、wakusen_b3.gif）を設定します。 | |||||||||
| 次に、テーブルの設定で、横幅を「100%」にします。 テーブルが横いっぱいに広がりますが、枠線がおかしな表示になってしまいます。 |
||||||||||
|
||||||||||
| これは、それぞれのセルの幅と高さがちゃんと指定されていないためです。 四隅のセル（a1、c1、a3、c3）の幅と高さを、それぞれ指定してやります。（例では幅・高さとも20ドット） |
||||||||||
|
||||||||||
| 後は中身のテキストを入力します。 | ||||||||||
|
||||||||||
| 実際の表示は、テーブルの罫線が見えないので、こうなります。 | ||||||||||
|
||||||||||
枠のデザインは、対称形でなくても構いません。
 |
 |
|
| ●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください） | ||
 |
 |
これは以下のようにスライスされています。
|
自動伸縮セル | |
| 自動伸縮セル | ●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください）●ウインドウの幅いっぱいに広がる枠です。（ウインドウの幅を変えてみてください） | 自動伸縮セル |
|
自動伸縮セル | |
こんなデザインもできます。
 |
 |
|
| ●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください） | ||
 |
 |
スライスはこんな感じです。
|
自動伸縮セル | |
| 自動伸縮セル | ●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください）●ドロップシャドウで影を落としてみました。（ウインドウの幅を変えてみてください） | 自動伸縮セル |
|
自動伸縮セル | |
画像素材をちょっと使ってみると…。
 |
 |
 |
| ●縦方向のみ伸び縮みする枠です。（文字のサイズを変えてみてください） ●縦方向のみ伸び縮みする枠です。（文字のサイズを変えてみてください） ●縦方向のみ伸び縮みする枠です。（文字のサイズを変えてみてください） ●縦方向のみ伸び縮みする枠です。（文字のサイズを変えてみてください） ●縦方向のみ伸び縮みする枠です。（文字のサイズを変えてみてください） ●縦方向のみ伸び縮みする枠です。（文字のサイズを変えてみてください） |
||
 |
 |
 |
※画像素材は「プリントアウトファクトリー」よりいただきました。
Copyright (C) 2003 RICOH Co., Ltd. All Rights Reserved.
スライスはこんな風にしています。
|
|
|
| ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。 ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。 ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。 ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。 ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。 ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。 |
||
|
|
|
要は、自動伸縮セルの中身が「同じ画像の横方向or縦方向の繰り返し」になっていればOkです。
中身のセルに背景色を設定すると、こんなことができます。
 |
 |
|
| ●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください）●色の付いた枠ができます（ウインドウの幅を変えてみてください） | ||
 |
 |
スライスは以下のとおり。
|
|
|
| ●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。 | ||
|
|
上で使った画像素材で応用すると…。
 |
 |
 |
企画・制作 斎藤史郎 提供 コミックホームズ 画像素材借用 プリントアウトファクトリー |
||
 |
 |
 |
（５－ｃ）応用編（複雑な形の枠線）
例えば、以下のようなタイトル入り枠線の場合。
|
||||
|
||||
|
||||
ちょっと考えると以下のようなスライスでできそうなのですが、こうするとタイトル「今日の一言」の画像が入るセルの幅が変わってしまい、うまく表示されません。
 |
 |
自動伸縮セル |  |
| 自動伸縮 | ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) | 自動伸縮 | |
 |
 |
自動伸縮セル |  |
これは、中身のテキストが入るセルが２列を１列に結合して作られるからで、こうした結合セルが入ると、他の分割されたセルの幅が指定通りに表示されません。（あくまで経験則ですが）
対策としては、２つ方法があります。
１つは、タイトル「今日の一言」の列のセルにも、背景画像として横線の画像を指定することです。
（右隣の自動伸縮セルと同じ画像を指定する）
ゴマカシですが、ちゃんと枠線がつながって見えます。
|
|
自動伸縮セル | |
| 自動伸縮 | ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) | 自動伸縮 | |
|
|
自動伸縮セル | |
もう１つ、ちゃんとした解決法としては、このテーブルを３行に分割して、別のテーブルの中に収めます。
一番上のちゃんと見えている枠は、このようにできています。
|
||||
|
||||
|
||||
わかりやすくするために、内側のテーブルは普通の罫線、外側のテーブルは黒枠にしてあります。
別々の３つのテーブルになるので、他のテーブルに影響されずに、それぞれのセル幅がちゃんと決まります。
同じテクニックで、下のようなフキダシも作れます。
|
||||
|
||||
|
||||
このフキダシの構造は以下のようになっています。
|
||||
|
||||
|
||||
これをさらに応用したのが、以前のサイト「Freshers Home」のトップページにあった「家」。
|
||||||||||||||||||
|
||||||||||||||||||
この家の構造はこうなっています。
|
||||||||||||||||||
|
||||||||||||||||||
壁の両脇のスペースのセルには、白画像を入れて幅を調整しています。
（セルの横幅を指定するだけでは、ずれてしまいます）
Photoshopのスライス機能やFireworksを使うと、このようなダミーの画像を使った幅調整なども自動的にやってくれます。
以上、枠の作り方をいろいろ説明してきました。
枠だけでなく、「自動で伸び縮みさせたいもの」に使えるテクニックなので、試してみてください。
例：ページの横いっぱいに伸びる画像
 |
 |