記事参照
No.3 2005/09/15 11:53
題：Re: 画像にテーブル
名：Newのり太
> スクロールバー付きの更新履歴はテーブルの一種のようなので・・・。
> ただのテーブルとスクロールバーつきではやはり方法が違うのでしょうか？
テーブルやセルに『直接』スクロールバーをつけることは出来ないと思います。
更新履歴などによく使われるスクロールバーのついた領域を表現する方法としては
おもに3通りの方法があります。
>>1 でゆえさんが提示されているように、
（1）複数行テキストエリアを利用する方法
（2）インラインフレームを利用する方法
に加えて、
（3）レイアウトコンテナ（div領域）にスタイルシートで幅と高さを与えて
overflowプロパティでスクロールバーの表示を制御する方法です。
（1）は本来の目的とは異なりますし、やってみたらわかると思いますがタグが使えないなど融通が利きません。
（2）はインラインフレーム未対応ブラウザで表示できない、検索サイトで中味のページのみヒットしてしまう。
などの問題があります。
（3）もスタイルシートが無効の環境では意図通りの表示となりませんが（スクロールされず内容全部表示されたりする）
少なくとも書かれている内容はわかります。
ってことで、（3）がオススメです。
以下の手順で、レイアウトコンテナに背景画像とスクロールバーをつけることができます。
まず、スタイルの設定ダイアログを出す。
IDのスタイルを設定→ID名欄に#rireki などと記述。（ID名は任意の半角英字。#は消さない）
「カラーと背景タブ」→背景画像→画像を選択、便宜水平・垂直位置や属性を指定。
「レイアウトタブ」→ボーダー=1px、スタイル=実線、色=黒。（お好みで変更してください）
「位置タブ」→配置の幅=300px、高さ=100px（お好みで変更してください）
編集画面にて、挿入→その他→レイアウトコンテナ で、
ピンク色の線に囲まれた領域が出来るのでそれを選択しながら右クリック
スタイルの設定、ID欄にrireki と記入。（#は書かない）
ここでソース画面を見てみると、上のほうに下記のような箇所があるので
<style type="text/css">
<!--
#rireki{
background-image : url(back.gif);
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
border-color : black black black black;
width : 300px;
height : 100px;
}
-->
最後の height:100px; の次にでも overflow : auto; と付け足します。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<style type="text/css">
<!--
#rireki{
background-image : url(back.gif);
border : 1px solid black; /* 枠線の指定を簡略化しています */
width : 300px;
height : 100px;
overflow : auto;
}
-->
で、レイアウトコンテナ内の内容が、指定した幅、高さを超えるとスクロールバーが表示されます。
> 私としては画像の上にテーブル、という方が簡単そうなのでそちらにしたいのですが・・・。
> ＞その外枠テーブルの中に、表示させたいテーブルを作成します。
> ＞テーブルを入れ子にする方法になります。
> という部分をもう少し詳しく教えていただけないでしょうか？
>>1 で、ゆえさんは「取りあえず別々のものだとして」とことわっておられますので、
こちらは単に画像の上にテーブルを表示させるだけのものだと思われます。
標準モードでは通常、どこでも配置モードのように画像の上に表や文字を重ねることが出来ません。
なので、とりあえず背景を表示させるためだけの表を作り、その中に本来の表を入れ子にすると
あたかも画像の上に表が表示されているように見えます。
これをしたから、表がスクロールするというものではありません。
掲示板に戻る