 Re: 画像にテーブル ( No.1 ) |
- 日時： 2005/09/11 22:56
- 名前： ゆえ
- >画像の上にテーブルを乗っけたいのですが
>スクロールバーのついた更新履歴を乗っけたいのですが。
ええっと、この２つは別々の質問なのでしょうか？
それともやりたいことは、画像の上にスクロールバーのついた更新履歴を表示させたい
ってことなのか？ どちらでしょうか？？
取りあえず別々のものだとして
>画像の上にテーブル
まず外枠となるテーブルを設置し、そのテーブルの背景に画像を設定します。（枠表示は外しておく）
その外枠テーブルの中に、表示させたいテーブルを作成します。
テーブルを入れ子にする方法になります。
>スクロールバーのついた更新履歴
１．フォーム部品の「複数行テキスト領域」を設置する
なお、表示するテキスト文字は「属性」を開いて初期値欄に記入する必要があります。
また、記載した文字にリンクを設定する事はできません。
２．インラインフレームを使う
［メニュー」→［挿入］→［その他］→［HTMLタグ］→［IFRAME］→挿入で設定します。
こちらだと、画像も挿入できますし、リンクを設定する事も可能です。
詳しくはこちらをご参考に
http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/hintview/49256A6A0001F13649256D78002CB6DF?opendocument
http://www.wsb.jp/hpb/kihon/iframe.htm#01
|
| Re: 画像にテーブル ( No.2 ) |
- 日時： 2005/09/14 20:10
- 名前： ゆきこ
- ご回答ありがとうございます。
遅くなりもうしわけございません。
同一の質問のつもりだったのですが、すみません。
二度手間をかけてしまいました。
スクロールバー付きの更新履歴はテーブルの一種のようなので・・・。
ただのテーブルとスクロールバーつきではやはり方法が違うのでしょうか？
私としては画像の上にテーブル、という方が簡単そうなのでそちらにしたいのですが・・・。
＞その外枠テーブルの中に、表示させたいテーブルを作成します。
＞テーブルを入れ子にする方法になります。
という部分をもう少し詳しく教えていただけないでしょうか？
|
| Re: 画像にテーブル ( No.3 ) |
- 日時： 2005/09/15 11:53
- 名前： 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 で、ゆえさんは「取りあえず別々のものだとして」とことわっておられますので、
こちらは単に画像の上にテーブルを表示させるだけのものだと思われます。
標準モードでは通常、どこでも配置モードのように画像の上に表や文字を重ねることが出来ません。
なので、とりあえず背景を表示させるためだけの表を作り、その中に本来の表を入れ子にすると
あたかも画像の上に表が表示されているように見えます。
これをしたから、表がスクロールするというものではありません。
|
| Re: 画像にテーブル ( No.4 ) |
- 日時： 2005/09/15 21:34
- 名前： ゆきこ
- 回答ありがとうございます。
でもちょっと無理があるようなのです。
実はその画像、イメージマップにしてメニュウとしても使いたいんです。
のり太さんのやり方だとそれが出来ないような気がします。
私のイメージとしては、その画像は、
人に吹き出しが付いていて、その吹き出しのなかにメニューが書いてありそのしたは空欄になっています。
そしてその部分に更新履歴をつけたいのですが・・・。
のり太さんの教えてくださった方法で可能なんでしょうか？とりあえずチャレンジしてみますが。
|
| Re: 画像にテーブル ( No.5 ) |
- 日時： 2005/09/16 08:29
- 名前： Newのり太
- 情報は小出しにせず、最初から詳細に書いてください。時間と労力の無駄です。
回答者は超能力者ではありませんので、あなたのイメージまで透視できません。
質問文の文面だけがたよりですので、あとになって「私のイメージとしては〜」などと
書くぐらいなら最初から具体的に書いてほしいです。
説明が難しければ、イメージに近いことをやっているページのURLを提示するなどしてください。
背景画像にリンクは出来ませんので、画像を背景として使う方法は却下となります。
その「イメージマップにしてメニュウとしても使いたい」という画像をスライスして
枠線非表示のテーブルでレイアウトするのが無難かな〜 。
http://www.wsb.jp/hpb/kihon/pzu/top_d.htm
表組みは絵柄に合わせて便宜工夫してください。
表の属性で、罫線の幅、セル内の余白、枠表示いずれも0pxで。
更新履歴はその表の中のひとつのセルに入れることになるかと思います。
そのセルだけは、画像を背景とします。
ピクセル単位の細かい仕事になります。
|
| Re: 画像にテーブル ( No.6 ) |
- 日時： 2005/09/16 19:20
- 名前： ゆきこ
- わかりました。次から気を付けます。
申し訳ありませんでした。
イメージを画像にしたのがhttp://homepage3.nifty.com/irohauta/newpage2.htmです。
画像をスライスして〜、というのをとりあえずやってみることにしました。
更新履歴の部分だけは先日教えていただいた方にすればいいんですよね。
頑張ってみます。 
|
| Re: 画像にテーブル ( No.7 ) |
- 日時： 2005/09/16 19:40
- 名前： ゆきこ
- 再度失礼します。
やっているうちに気付いたのですが、
のり太さんが先日教えてくれた方、背景にするのでもできそうです！
昨日やってみたらあの方法では文章も書けるようでした。
その文章をリンク文字にすることはできるでしょうか？
|
| Re: 画像にテーブル ( No.8 ) |
- 日時： 2005/09/16 21:18
- 名前： Newのり太
- > 画像をスライスして〜、というのをとりあえずやってみることにしました。
> 更新履歴の部分だけは先日教えていただいた方にすればいいんですよね。
ウイ。とりあえずサンプル。
http://ojarude.ojaru.jp/sample.html
今回は図柄がシンプルだったので3つのパーツに分けました。
上下2分割でも出来そうですが。
> その文章をリンク文字にすることはできるでしょうか？
>>3 では、更新履歴の部分にのみ背景が表示されます。
更新履歴を囲むように背景を表示させるのでしたら
もう一回り、表なり、レイアウトコンテナなりで囲み
そこへ背景を指定してやる必要があります。
その中に書いた文字からリンクすることはもちろん可能です。
|
| Re: 画像にテーブル ( No.9 ) |
- 日時： 2005/09/17 21:33
- 名前： ゆきこ
- やってみました。
のり太さんのソースを見本にやってみたのですが、
どうしても上下の画像にずれがでてきてしまいます。 
のり太さんのをみると無いようなので、
ソースの問題ではなさそうなのですが・・・。
|
| Re: 画像にテーブル ( No.10 ) |
- 日時： 2005/09/18 11:27
- 名前： Newのり太
- 罫線の幅、セル内の余白、枠表示いずれも0pxで、
セルのサイズがスライスした画像のサイズと同一であって、
なおかつずれるということでしたら、スライスした時点でずれているものと思われます。
ずれないようにきちんとスライスしてください。
ヲイラは、ウェブアートデザイナーの「グリッドに合わせる」にして、
重複部分や不足部分のないように注意して切り取りました。
また、サンプルは、分割部分がわかりやすいように「枠表示」を1pxとしてありますので、
その分わずかにずれが生じていますが、「枠表示」を0とすればずれはなくなります。
http://ojarude.ojaru.jp/sample2.html
> ソースの問題ではなさそうなのですが・・・。
実際のページを見てみなければこちらにはわかりません。
|
| Re: 画像にテーブル ( No.11 ) |
- 日時： 2005/09/18 21:51
- 名前： ゆきこ
- 状態： 解決!
- とりあえずできました！
結局最初の背景にするやりかたで、メニューの部分だけ切り離して上から乗せました。
そうすればイメージマップにもできるので。
色々本当にありがとうございました。
お世話になりました。
ｐｓ
私のサイトは諸事情により検索よけしてます。
ここにＵＲＬを乗せるとその意味がなくなるのでできませんでした。
すみませんでした。ご理解していただけると嬉しいです。
|
| - ( No.12 ) |
- 日時： 2011/12/11 01:45
- 名前： pl517.nas821.p-osaka.nttpc.ne.jp
- #SPAM
|
| - ( No.13 ) |
- 日時： 2012/06/15 22:48
- 名前： 7c294cd1.i-revonet.jp
- #SPAM
|
画像にテーブル