パソコンQ&Aへ戻る  
   
★ホームページで自動伸縮する枠の作り方
     

コミックホームズ」でも使っているんですが、ホームページで自動的に伸び縮みする枠を作る方法を説明します。
ホームページ作りの解説書でもなかなか書いてないテクニックなので、まとめてみました。
普通に表(テーブル)を使って枠を作ると、

普通にテーブルを使った場合の枠です。普通にテーブルを使った場合の枠です。普通にテーブルを使った場合の枠です。

こんな風に四角い殺風景な枠しか作れません。(スタイル指定を使っても作れます)
ですが、画像を使っていろいろ工夫すると、例えば以下のような枠線ができます。

 

中身の文章の量によって、縦方向に伸び縮みします。(文字のサイズを変えてみてください)
中身の文章の量によって、縦方向に伸び縮みします。(文字のサイズを変えてみてください)
中身の文章の量によって、縦方向に伸び縮みします。(文字のサイズを変えてみてください)
中身の文章の量によって、縦方向に伸び縮みします。(文字のサイズを変えてみてください)

 

横方向にも伸び縮みさせると、こんなことができます。

 
  ●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)  
 

このように、画像を使って、なおかつ中身の量によって自動的に伸び縮みする枠の作り方について、説明します。

     
(1)枠線の画像を作る  
     
 
まずは元になる枠線の画像を作ります。
Photoshop、Paintshopなど、画像を加工できるソフトなら何でもいいですが、ファイルをGIF形式で保存できるものを使ってください。
   

画像の背景を白にして(ホームページの背景色に合わせる)、枠線を描きます。
描く時の注意ですが、←の画像で点線で示してあるように、あらかじめ「枠線部分」の幅(ドット数)を決めて、描いてやります。
←の画像では、枠線部分の幅=20ドット(画像全体の幅=300ドット)で描いてあります。
(※点線は画像に描く必要はありません。自分で覚えておくだけでいいです)

できあがったら、GIF形式で保存しておきます。

 
   
(2)画像をスライス(分割)する  
   
 
 

次に、上に描いた点線のように、この画像を9枚にスライス(分割)します。
(実際は中央の白画像は不要なので8枚)
トリミングツールを使って切り取って、ファイル名を変えて保存していけばいいでしょう。

   
a1
b1
c1
a2
c2
a3
b3
c3
ちなみにこの例では、←のようにExcel方式のファイル名で保存してみました。
(wakusen_a1.gif、wakusen_b1.gif、…)
 
   
(3)ホームページ上の表(テーブル)に画像を並べる  
   
 
 
↓模式図↓

ホームページ上に、3行3列の表(テーブル)を作って、スライスした画像を並べていきます。
表の設定は以下のようにします。

要素

表全体の幅

元画像全体の幅
(例では300ドット)
罫線幅
(ボーダー)
0
セル余白 0
セル間隔 0

★Photoshopバージョン6以降の「スライス」機能や、マクロメディア社のFireworksなどを使うと、ここまでの「枠線画像を作る」「スライスしてファイル名を変えて保存する」「ホームページにテーブルを作って画像を配置する」という手順が、一度にできるのでとても便利です。ちなみに斎藤はFireworksを使っています。

 
↓実際の見え方↓
 
 
   
(4-a)縦方向のみ伸び縮みする枠を作る場合  
   
 

ここまででできたテーブルを元にして、伸び縮みをさせます。
縦/横のどちらの方向に伸び縮みさせたいかで、作り方が変わります。
まず縦方向のみ伸び縮みする枠の作り方を説明します。

a1
b1
c1
a2
c2
a3
b3
c3
Excel方式でセルの説明をします。
縦方向に伸び縮みさせるには、「a2」と「c2」のセル(縦線が入っているセル)を伸び縮みさせればよいのです。
   
     

a2とc2のセルの画像をいったん削除します。
(ソフトによりますが、テーブルが縦に縮んで表示されます)

※以下、模式図なのでテーブルの罫線を表示していますが、実際は表示されません。

   
     
a2とc2のセルで、「セルの背景画像」に wakusen_a2.gif、wakusen_c2.gif を設定します。
   
  これが中身です。
これが中身です。
これが中身です。
これが中身です。
これが中身です。
これが中身です。
 
後は中身のテキストを入力します。
中身が増えていくにつれて、枠が自動的に縦方向に伸びていきます。
   
  これが中身です。
これが中身です。
これが中身です。
これが中身です。
これが中身です。
これが中身です。
 

実際の表示は、テーブルの罫線が見えないので、こうなります。

要は、枠の縦線のところは普通に画像が貼ってあるわけではなくて、セルの背景画像が見えているのです。
セルが縦に伸びると、背景画像は繰り返して表示されるので(背景壁紙と同じ)、どこまで伸びてもちゃんと枠線になって見えます。

 
   
(4-b)横方向に伸び縮みする枠を作る場合  
   
 

次に、横方向に伸び縮みする枠の作り方を説明します。
横方向に伸縮させたい場合としては、例えばページの横幅いっぱいに枠を表示したいケースがあります。
(ウインドウの横幅が変わるに連れて、枠の横幅が変わらないといけない)
なお、横方向に伸縮するということは、中身のテキストの改行位置が変わる関係で、縦方向にも伸縮させないといけません。

a1
b1
c1
a2
c2
a3
b3
c3
再びExcel方式でセルの説明をします。
縦・横方向にそれぞれ伸び縮みさせるには、「a2」「c2」「b1」「b3」の4つのセルを伸び縮みさせます。
   
 
     
 

4つのセルの画像をいったん削除します。
(ソフトによりますが、テーブルが縦に縮んで表示されます)

※以下、模式図なのでテーブルの罫線を表示していますが、実際は表示されません。

   
 
     
 
4つのセルで、「セルの背景画像」に今削除した画像(wakusen_a2.gif、wakusen_c2.gif、wakusen_b1.gif、wakusen_b3.gif)を設定します。
   
次に、テーブルの設定で、横幅を「100%」にします。
テーブルが横いっぱいに広がりますが、枠線がおかしな表示になってしまいます。
 
     
 
   
これは、それぞれのセルの幅と高さがちゃんと指定されていないためです。
四隅のセル(a1、c1、a3、c3)の幅と高さを、それぞれ指定してやります。(例では幅・高さとも20ドット)
 
     
 
   
後は中身のテキストを入力します。
 
  ●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)  
 
   
実際の表示は、テーブルの罫線が見えないので、こうなります。
 
  ●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)  
 
 
   
(5-a)応用編(枠のデザインいろいろ)  
   
 

枠のデザインは、対称形でなくても構いません。

 
  ●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)  
 

これは以下のようにスライスされています。

自動伸縮セル
自動伸縮セル ●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください)●ウインドウの幅いっぱいに広がる枠です。(ウインドウの幅を変えてみてください) 自動伸縮セル
自動伸縮セル

こんなデザインもできます。

●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)

スライスはこんな感じです。

自動伸縮セル
自動伸縮セル ●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください)●ドロップシャドウで影を落としてみました。(ウインドウの幅を変えてみてください) 自動伸縮セル
自動伸縮セル

画像素材をちょっと使ってみると…。

  ●縦方向のみ伸び縮みする枠です。(文字のサイズを変えてみてください)
●縦方向のみ伸び縮みする枠です。(文字のサイズを変えてみてください)
●縦方向のみ伸び縮みする枠です。(文字のサイズを変えてみてください)
●縦方向のみ伸び縮みする枠です。(文字のサイズを変えてみてください)
●縦方向のみ伸び縮みする枠です。(文字のサイズを変えてみてください)
●縦方向のみ伸び縮みする枠です。(文字のサイズを変えてみてください)
 

※画像素材は「プリントアウトファクトリー」よりいただきました。
Copyright (C) 2003 RICOH Co., Ltd. All Rights Reserved.

スライスはこんな風にしています。

  ●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。
●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。
●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。
●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。
●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。
●スライスはこんな形です。縦線のセルだけ自動伸縮になっています。
 

要は、自動伸縮セルの中身が「同じ画像の横方向or縦方向の繰り返し」になっていればOkです。

 
   
(5-b)応用編(背景色との組み合わせ)  
   
 

中身のセルに背景色を設定すると、こんなことができます。

 
  ●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)●色の付いた枠ができます(ウインドウの幅を変えてみてください)  
 

スライスは以下のとおり。

 
  ●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。●このセルの背景色を、周りの枠と同じ色にしてあります。だから見た目は区別が付きません。  
 

上で使った画像素材で応用すると…。

 

企画・制作

斎藤史郎

提供

コミックホームズ
http://comich.net

画像素材借用

プリントアウトファクトリー
http://www.printout.jp/

 
 
   

(5-c)応用編(複雑な形の枠線)

 
   
 

例えば、以下のようなタイトル入り枠線の場合。

 
  ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^)   
 

ちょっと考えると以下のようなスライスでできそうなのですが、こうするとタイトル「今日の一言」の画像が入るセルの幅が変わってしまい、うまく表示されません。

自動伸縮セル
自動伸縮 ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^)  自動伸縮
自動伸縮セル

これは、中身のテキストが入るセルが2列を1列に結合して作られるからで、こうした結合セルが入ると、他の分割されたセルの幅が指定通りに表示されません。(あくまで経験則ですが)

対策としては、2つ方法があります。
1つは、タイトル「今日の一言」の列のセルにも、背景画像として横線の画像を指定することです。
(右隣の自動伸縮セルと同じ画像を指定する)
ゴマカシですが、ちゃんと枠線がつながって見えます。

自動伸縮セル
自動伸縮 ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^)  自動伸縮
自動伸縮セル

もう1つ、ちゃんとした解決法としては、このテーブルを3行に分割して、別のテーブルの中に収めます。
一番上のちゃんと見えている枠は、このようにできています。

自動伸縮セル
自動伸縮 ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^)  自動伸縮
自動伸縮セル

わかりやすくするために、内側のテーブルは普通の罫線、外側のテーブルは黒枠にしてあります。
別々の3つのテーブルになるので、他のテーブルに影響されずに、それぞれのセル幅がちゃんと決まります。

同じテクニックで、下のようなフキダシも作れます。

 
  ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^)   
 

このフキダシの構造は以下のようになっています。

自動伸縮セル
自動伸縮 ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^) ●今日はホームページをせっせと作って終わってしまいました。いい一日でした(^_^)  自動伸縮
自動伸縮セル

これをさらに応用したのが、以前のサイト「Freshers Home」のトップページにあった「家」。

 
  ●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。  
 
  ●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。  
 

この家の構造はこうなっています。

自動伸縮セル


見えませんが、白画像を入れて幅を調整
自動伸縮 ●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。●ここは花ゆめ系フロアです。 自動伸縮

見えませんが、白画像を入れて幅を調整
自動伸縮
自動伸縮 ●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。●ここはLaLa系フロアです。 自動伸縮
自動伸縮

壁の両脇のスペースのセルには、白画像を入れて幅を調整しています。
(セルの横幅を指定するだけでは、ずれてしまいます)
Photoshopのスライス機能やFireworksを使うと、このようなダミーの画像を使った幅調整なども自動的にやってくれます。

以上、枠の作り方をいろいろ説明してきました。
枠だけでなく、「自動で伸び縮みさせたいもの」に使えるテクニックなので、試してみてください。

例:ページの横いっぱいに伸びる画像

 
 
   
パソコンQ&Aへ戻る