ソースについておしえてください

質問

(1)写真などの画像を　フレーム（画像　gif jpgなどでつくったもの）の中に入れたいときのソースを教えてください

(2)沢山の写真をページをめくるように表現したいときのソース

よろしく　お願いします。

回答No.4

FANTMa

(1)についてだけですが、
もっとも簡単なのは、先の回答にもありますように、
枠も画像の一部にしてしまうことだと思います。
これはそれなりのグラフィックソフトがあれば、大きさをあわせる手間がかかるだけで、
それほど難しくありません。

htmlでそれを表現するのであればtableタグを利用する手があります。
（No.1のhumourさんとは違うやりかたです。）

まず枠の画像を8部分に分けて作ります。
1.左上角、2.上天井、3.右上角、4.左壁、5.右壁、6.左下角、7.下床、8.右下角
の8部分です。

そしてこの画像をtableタグで配置していくのですが、
ここで「背景画像が画面より小さい場合、背景がその画像で敷き詰められる」という性質を利用します。
利用する場所は2.上天井、4.左壁、5.右壁、7.下床の4箇所です。

仮に枠画像のサイズをそれぞれ10x10とすると

<table border=0>
<tr>
<td height=10 width=10><img src="1.左上角"></td>
<td height=10 width=画像の横サイズ background="2.上天井"></td>
<td height=10 width=10><img src="3.右上角"></td>
</tr>
<tr>
<td height=画像の縦サイズ width=10 background="4.左壁"></td>
<td height=画像の縦サイズ width=10><img src="メインの画像"></td>
<td height=画像の縦サイズ width=10 background="5.右壁"></td>
</tr>
<tr>
<td height=10 width=10><img src="6.左下角"></td>
<td height=10 width=画像の横サイズ background="7.下床"></td>
<td height=10 width=10><img src="8.右下角"></td>
</tr>
</table>

と、このようになります。
このやりかたの場合、メインとなる画像のサイズが変わってもそれにあわせて大きさを変えられる利点がありますが、
直線的な枠線になってしまいます。

あともうひとつ、
これはメイン画像のサイズが固定されてしまいますが、
枠を背景にしてメインをその中央に表示させる方法があります。

<table border=0>
<tr>
<td align=center valign=middle height=枠の縦サイズ width=枠の横サイズ background=枠画像>
<img src=メイン画像>
</td>
</tr>
</table>

こちらのほうが短いソースですみますが、メイン画像にあわせて枠を作り直さなければならなかったり、
枠の幅を上下と左右同じにする必要がありますが、
グラフィカルな枠線にすることも可能です。

お礼

ありがとうございます

いろいろな方法があるのですね。
会社からかえって　早速　挑戦してみます

　　　　　　　　　　　　　(^_^)

回答No.3

onimotsu

>テーブルではなく　たとえば　画像のまわりの枠だけをペイントで作成して
つくり　その画像を使い　写真などをいれて　表示は不可能ですか？

ペイントで枠を作成したらペイントでその枠の中に画像を入れて（貼り付けで）
一つの画像とすれば一番簡単にできるはずです。
（私ならこの方法）

>（　枠の画像　と　中に表示したい画像を一体化させるソースは？？
　　　あるのでしょうか？　　）

HTMLでは無い。

お礼

ありがとうございます
ペイントを最近つかって　バナー？？を作成する練習をしています。
すこしずつ　楽しくなりました。

沸くと画像というくくりで単純に考えていました・・
そうですね。　貼り付けておけば・・・いい？？

がんばって　いろいろ挑戦しています。　ありがとうございます

回答No.2

noname#5549

こんにちは。
どうしても画像を統合させたくはないのでしょうか？
それが一番簡単なんだけどなあ。シンプルだし。
レイヤー機能が付いた画像ソフトは持ってないのでしょうか？

えーとですね、画像を重ねて表示することは出来ます。
レイヤーを使うのですが、これは....あまり簡単ではありません。
（面倒なので僕はほとんど使いません、従ってソースは書けません）
また、簡単にHTMLで重ねるなら背景にすれば可能です。
背景画像はテーブル内だけでも指定できますので、
「枠」の画像を背景に指定し、その上に任意の画像を中央配置すれば完成。
でもやっぱ、これも美しくないですよ～。多分。

「額縁」のように利用して、中の絵を変えたい、とか言うことなら、
それこそフレーム（タグ）で切ってしまえば良いわけです。

ただ、繰り返しますが、画像に枠を付けたい場合、普通はひとつの画像として作ります。
額縁残して入れ替えるなど、特別な利用がない限り、言語で何とかしようとは思いません。

お礼

ありがとうございます
初心者が高度な質問を・・ごめんなさい

とても知りたい内容でしたので・・(^_^)
やはり基本からですね

ありがとうございました

回答No.1

noname#5549

こんにちは。
フレームとはフレームタグと解釈して良いのでしょうか？
そうではなく、「枠」を付けたいだけでしょうか？
「枠」を付けるのなら、一応方法はふたつ。

・画像編集ソフトで最初から枠付きの画像にする
・テーブルタグを利用する。

ソースを教えて欲しいようなので、テーブルタグの話にしましょう。
sample.jpgという画像ファイルを、imagesというディレクトリ下に配置したとすると、
<TABLE WIDTH="480" BORDER="2" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="480">
<IMG SRC="./images/sample.jpg" WIDTH="480" HEIGHT="360">
</TD>
</TR>
</TABLE>

こんな感じのソースで、その画像に枠がつきます。
ただ、あまり格好良くはないので、出来れば画像自体を編集した方が良いでしょう。

「ページをめくるように」というのは、立体的な表現をやりたいのなら、
もう少し上達してからの方が良いと思いますが、
ただ切り替われば良いのなら、JavaScriptを使用することで可能です。
これはソースが長くなってしまうので、こちらを↓

参考URL：

http://www.openspc2.org/reibun/javascript/

お礼

早速の回答に感謝します。ありがとうございます。
テーブルではなく　たとえば　画像のまわりの枠だけをペイントで作成して
つくり　その画像を使い　写真などをいれて　費用時は不可能ですか？
（　枠の画像　と　中に表示したい画像を一体化させるソースは？？
　　　あるのでしょうか？　　）

初級者で　あれもしたいこれもしたいと　欲をかいています。　(^_^)
どれもものにならなかったといわれないようにがんばりたいと思います。
ありがとうございました。　ページにいかせていただきます　(*^_^*)