こんなページを

質問

http://www.tv-asahi.co.jp/ace/03_special/yoshizawa/index.html

こんなページを作りたいと思っています。
画像を背景にアイフレームしたいんですが。。
ソースをみたら画像が分割されててなんか意味不明で(汗。
こういうのってビルダーで作らないと作れないんでしょうか?

回答No.4

noname#199778 · ベストアンサー

スタイルシートを利用すれば、近いことができると思います。 以下に二つ例を示します。

<div style="background-image: url('***.jpg');　background-repeat: no-repeat; width: 600px; height: 500px;">
<iframe src="***.html" width="500" height="400" style="position: relative; top: 50px; left: 50px;"></iframe>
</div>

上記は、インラインフレームを囲むボックスを作り、そこに背景画像を繰り返しなしで表示するように設定しています。 また、インラインフレームを囲むボックス(div要素)には表示枠を設定しておき(width: 600px; height: 500px;)、余白部分が出来るようにします。
インラインフレームの方も、そのままこのボックスに入れただけでは左上に固定されてしまいますので、position: relative;の指定で相対的な位置指定にし、表示位置を指定しておきます(top: 50px; left: 50px; ＝親ボックスの左上頂点から見て、上から50px、左50pxのところにインラインフレームの左上の頂点を移動)。
こちらは背景画像として画像を貼り付けるので、画像の実サイズで背景が表示されます。 画像のサイズによってはうまくない(表示域が余る、画像端が切れる等)こともあるかもしれません。 その場合は、背景に設定する画像の実際の表示サイズを調整して下さい。

以下、別の例

<div style="overflow: hidden; width: 600px; height: 500px;">
<img src="***.jpg" width="600" height="500" style="z-index: 0;"><br>
<iframe src="***.html" width="500" height="400" style="position: relative; top: -450px; left: 50px; z-index: 1;"></iframe>
</div>

以上は、通常の画像として敷きたい画像を読み出し、それとインラインフレームとを重ねあわすようにスタイルシートで位置調整をしたものになります。
img要素のstyle="z-index: 0;"は、重ね合わせ順で、これが後ろに回るように指定してあります(表示領域が重なる場合、z-indexの値が大きい方が、前面に表示されます)。
iframe要素のスタイル指定については、改行を受けて画像と左位置が一致するようになっていますので、それを基準に上の例と同様に表示位置を指定しています。 また、上とは別にz-indexも念のためimg要素に振ったものより大きい値を指定しておきます。
div要素についてですが、これにも表示枠の指定をしてあります(width: 600px; height: 500px;)。 また、はみ出た部分を表示させないように、overflow: hidden;という指定を追加してあります。 これは、position: relative;で表示位置を動かした場合、それが元来表示されているはずの領域が空白域として残るので、その空白域が表示されないようにするためです(この場合、画像の下にインラインフレームが確保した500x400の空白ができますので、そこをdivに枠を設定することでその表示枠からはみ出る部分にして、はみ出る部分を表示させないように指定することで削り落としています)。

以上、スタイルシートを使った二つの例を挙げてみました。 スタイルシートの使い方次第で、他にもやり方はあるかと思います。

ビルダーなどは、あればだいぶ手軽になるとは思いますが、なくてもこういったページは十分に作成できます。 私も上記のソースを作る際には、ビルダーなどの制作ソフトは使っていません。

参考まで。 長文・乱文失礼しました。

回答No.3

nuts

横レスですが補足に対して。
つまり「画像にIFRAMEを重ねる」ということをしたいのでしょうが、それができないため、フレームの上下左右斜めに画像を配置する必要があるわけです。上下左右斜めに画像を配置するためには、3x3のテーブルが必要なわけですね。
あと、メモ帳もエディタ（テキストエディタ）の一種です。が、もっとも初歩的なテキストエディタなので、HTML作成に対応したもう少し高機能なものを導入しておいた方がなにかと便利ですよ。フリーソフトやシェアウェアでよいものがたくさん出ています。

回答No.2

shy00

特定の画像の中にIFRAMEを入れ、綺麗に見せるためにはtableを利用して
画像を分割した方が綺麗なのですよ・・・
と言うか、壁紙以外で表示させる画像の中にフレームを表示するには
この方法が最適では無いですか？
　JavaSprictなど使えばできますけど・・・
試しに<img src="***.gif">とIFRAMEを使って記述してみてください
画像の中にIFRAME、表示できましたか？

＞エディタ

メモ帳もエディタです
でも、メモ帳よりもっと機能の付いたソフトがたくさんあります
Windowsなら
http://www.vector.co.jp/vpack/filearea/win95/writing/edit/index.html
にたくさんあります
ご参考まで

回答No.1

shy00

いえ、エディタで作れますよ
３列、３行のtableをつくり、それぞれのborderやセルのスペースを０に設定
あとは、それぞれのセル部分に画像とIFRAMEを入れるだけです

お礼

エディタですか。
私はメモ帳で作っていたんですが、エディタというもの探してみます。

補足

またまたすみません。
あのですね、なんでtableを作っているのかよく分からないんですが。。。そのテーブルに分割した画像をわざわざいれるなら最初から画像を分割しないほうがいいのかなと思ったんですが、このタイプのページはみんな分割してたので(汗