画像が入れ替わるバナーを作りたいのですが、どうやって作ったらよいのか
わかりません。教えてください!
私はフロントページエクスプレスと、フォトショップ5.0を使ってHPを
作ってます。何か特別なソフトがあったほうがよいのでしょうか?

それと、JavaScriptの本をみてやってみたのですが、(2つ画像を用意して
入れ替わるようにしてみた)最初の画像は表示されるのですが、二番目の
画像が表示できません。画像自体は入れ替わっているようなのですが、
なぜ表示されないのかがわからないんです。

よろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (4件)

えっと、まず(3)から。


このJavaScriptをよんだところ、機能は、
「リンク先&バナーを一定時間ごとに取り替える」というものです。
つまり、リンク先とバナーは一対一の「つい」になっており、画像が変わると当然リンク先も変わります。
ですから、このスクリプトの目的&機能は、bstさんの目的、やりたいこととは完全に違うコンセプトの元作られています。「一定時間で画像を変える」のが目的ではありません。「一定時間でリンク先を変える」のが目的であり、バナー(画像)が変わるのはそれに付随した事項です。
コレをサンプルとして持ち出すのは間違いだと思います。
ここからbstさんの目的にあわせて書き換えるとなると、ほとんどはじめからスクリプト書くのとかわらないような・・・。

そのため、(2)、(1)への回答にあまり意味はありませんが、一応。

(2)
>「B1.gif」「B2.gif」
その名前ではだめです。このスクリプトでは、0.gif、1.gifといったように、ファイル名に数字を使うロジックになっています。除算とそのあまりを使って0~4までがループするようになっており、その数字をそのままファイル名に使うからこそ、永遠にバナーを取り替えることができるのです。

(1)
>画像ファイルはCドライブの「sozai」に入れてあるのですが
とりあえず使う画像だけHTMLと同じフォルダにコピーしてください。
HTMLの参考書などで、「相対パス」について勉強してください。ファイルの位置関係を表現することができないと、インターネットでホームページを公開するのは難しいと思います。
    • good
    • 0
この回答へのお礼

お返事が遅くなってすみません!
まったく見当違いなことを持ち出してしまって恥ずかしい限りです・・・
プログラムのことがよくわかっていないので、多分これかなぁ?
という安易な考えでやっていたのですが、全く違っていたのですね。
どうもありがとうございます。
GIFアニメーションのソフトを探してみます。

お礼日時:2001/08/29 11:27

たしかにそのソースは画像を入れ替えるソースではないですね・・・。


たぶんそのJavaScriptの本に、一定時間でバナーを入れ替えるというものではなくて、一定時間で画像が入れ替わる(スライドショー)のスクリプトがあると思うのですが?

でも、それがバナーであり、ジャンプ先は同じなら
JavaScriptではなくて、GIFアニメにすることをお勧めします。
拡張子もgifですしね。
フォトショップではGIFアニメは作れないそうですね・・・すいません。
フリーウェアで探してください。
    • good
    • 0
この回答へのお礼

ご指摘の通り、一定時間で画像が入れ替わるスクリプト、載ってました(汗)
違いがはっきりとわかってなかったので、ぱっとみて「此れだ!」なんて
思い込んでしまっていました。教えていただいたことで、違いがわかりました。
どうもありがとうございます。

GIFアニメで作ったほうがオススメ、ということは、私のような初心者でも
とっつきやすいということだと受け取らせていただきます。
フリーウエアで探して作ってみます。
お世話になりました!

お礼日時:2001/08/29 11:31

アニメーションGIFの作成方法ですが、PhotoShopでは作成できなかったような・・・。


PhotoShopパッケージについているImageReadyならば作成できるのですが、PhotoShop5.0ってImageReadyがついていましたっけ?5.5からだったかもしれません。
作成可能なソフトがない場合、参考URLのvectorなどで「アニメーションGIF」で検索をかけてソフトウェアを探してみてください。

もし、ご質問の画像の入れ替わるバナーというのが、アニメーションGIFのことではなくて「画像ファイルそのものを入れ替えてしまう」という意味でしたら
http://oshiete1.goo.ne.jp/kotaeru.php3?q=123686
の質問などを参考にしてください。

JavaScriptの方は、no.1の方がおっしゃるようにソースがないと何とも・・・

参考URL:http://www.vector.co.jp/vpack/filearea/win/art/g …
    • good
    • 0

画像が変わるバナーはGIFアニメが一般的だと思います。


これはフォトショップで作れるはずです。

また、JavaScriptがうまくいかないとのことですが、
ソースを可能な範囲でここに再現していただければ、
なにが違うのかわかるかもしれません。

この回答への補足

ソースを書かせていただきます!
<html>
<head>

<script language="Java script"><!--
num=0;
jumpURL[0]="http://www.yahoo.gr.jp/";
jumpURL[1]="http://www.infoseek.co.jp/";
jumpURL[2]="http://game.gr.jp/";
jumpURL[3]="http://dog.co.jp/";

function changeImg()
{
num=(num+1)%jumpURL.length;
document.banner.src=num+"gif";
setTimeout("changeImg()",500);
}
</head>

<body>
function jumpURL[num];}
//--></script>
<body onload="setTimeout('changeImg()',500)">
<a href="JavaScript:jump()"><img src="0.gif" name="banner"></a>
</body>
</html>

本の通りです・・・
(1)画像ファイルはCドライブの「sozai」に入れてあるのですが、それをどこで
 指定したらよいいのでしょうか?
(2)バナー画像は「B1.gif」「B2.gif」を作りましたが、どこにそれを書いたら
 よいのでしょうか?
(3)リンク先のURLは一箇所なんです。これはいろんな所にリンクするようになってい るようなんですが、不要なので削除したいんです。どこをどう変えたらよいので しょうか?

初心者なので本当にわけがわかりません。長々と申し訳ありませんが、教えてください!

補足日時:2001/08/28 13:48
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

Qサムネイル画像の表示途中でそのサムネイル画像をクリックすると後から表示されるサムネイルが表示されない。

winXP PRO IE6.0SP1です。

とあるHPを作成していますが、サムネイル画像(約100画像)をクリックすると別ウィンドウが出る様にしています。

サムネイルが全部表示される前にクリックすると小窓が出て画像は表示されますが、そこから後に出るサムネイルが表示されずフリーズしてしまいます。


<a href="javascript:void(0);" onclick="window.open('./******/***.jpg','win1','width=400,height=400');" menubar=no toolbar=no locaction=no status=no><img src="./small/***.jpg" height=50 border=0></a>


他のPCで確認しても同じ状態です。

サムネイル画像が出ている途中でその画像をクリックしてもフリーズしない方法の解除方法はありますでしょうか?

宜しくお願い致します。

Aベストアンサー

再び、です。
<HEAD>タグ内にjavascriptを埋め込む方法は以下の通りです。

<HEAD>
<script language="javascript">
<!--
function subWin(n,wn){
window.open(n,wn,"width=400,height=400,scrollbars=no,location=no,menubar=no,status=no");}
//-->
</script>
</HEAD>
-----------
<a href="javascript:void(0);" onclick="subWin('./******/***.jpg','win1')"><img src="./small/***.jpg" height="50" border="0"></a>

開きたい画像のパスと、ウィンドウ名を、onclickの所で指定する形です。
こういう形であれば、ウィンドウのサイズやメニューバーの非表示などは、個別でひとつひとつ設定しなくてもよくなるので、ソースがぐっと軽くなります。

つまり、その次の画像では、

<a href="javascript:void(0);" onclick="subWin('./******/***2.jpg','win2')"><img src="./small/***2.jpg" height="50" border="0"></a>

という形で指定してやれば良いのです。

ちなみに、以下のサイトの『JavaScript例文辞典』で、サブウィンドウ展開の色々な形がサンプルであるので、ご参考にしてみてください。

参考URL:http://www.shiojiri.ne.jp/~openspc/

再び、です。
<HEAD>タグ内にjavascriptを埋め込む方法は以下の通りです。

<HEAD>
<script language="javascript">
<!--
function subWin(n,wn){
window.open(n,wn,"width=400,height=400,scrollbars=no,location=no,menubar=no,status=no");}
//-->
</script>
</HEAD>
-----------
<a href="javascript:void(0);" onclick="subWin('./******/***.jpg','win1')"><img src="./small/***.jpg" height="50" border="0"></a>

開きたい画像のパスと、ウィンドウ名を、onclickの所で指定する形です。
...続きを読む

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Q表示画素数より高画素で画像ファイルを用意してますか?

表示画素数より高画素で画像ファイルを用意してますか?

メンテナンスしてるWebPageのバナーを用意したところ、
ブラウザーで125~150%の拡大表示する人が多いみたいだから
バナーを予め倍程度の画素数で作成して、表示サイズを指定して表示した方が良いみたいよと情報をもらいました。

個人的には、過去の経験から表示画素数=ファイル画素数 の感覚でした。
1)表示の割りに画像ファイルが高画素過ぎて表示に時間が掛かったページに辟易したことがあること
2)表示画素数≠ファイル画素数では、ガタガタに表示されたことがあること

現在のブラウザは、文字も画像も一緒に拡大・縮小表示されることや回線も十分早いことからこの様な視点でページを作成するべきかなと思ったことからです。
実際にはこのような動向はあるのでしょうか?

Aベストアンサー

そうですか?初耳ですが。

最近のブラウザは拡大縮小も補完使ってある程度きれいに表示するので、サーバーサイドでそんな手間をかける必要も無いと思いますが。

5倍10倍するなら、元画像を大きくとった方がいいでしょうけど
元の絵を120~150%拡大

2倍した絵を60~75%縮小(=元の絵の120~150%拡大と同サイズ)
とではっきりとした差がでるのかどうか。

しかも、バナーですよね?
写真とか絵とかのような、画像自体が目的なら、表示用の低画素とお持ち帰り用の高画素とを用意することもありますけど。

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Q背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。
4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。


【現状】
1,2,4は出来ています。
ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。


【ソースコード】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}
#wrapper_index_up,
#wrapper_index_bottom {
margin: 0 auto;
text-align: left;
}
#wrapper_index_up,
#wrapper_index_bottom,
#header,
#contents,
#footer {
width: 1000px;
}
#header {
background-color:red;
}
#top_img_wrapper {
background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif);
background-repeat:no-repeat;
background-position: center;
}
-->
</style>
</head>
<body>
<div id="wrapper_index_up">
<div id="header">ヘッダー</div>
</div>
<div id="top_img_wrapper">
<img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" />
</div>
<div id="wrapper_index_bottom">
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

どうかよろしくお願いします。

背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。
そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。
2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。
3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツ...続きを読む

Aベストアンサー

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"でtopとleftの位置を50%とする事でウィンドウ(画面)に対して常に上下左右の中央に配置される様にしてあります。これと同様の事をやりたいだけなら簡単ですが、お望みの表示結果に関していくつか確認させて頂きたい事があります。
まずは下記のサンプルを試してみて下さい。
----------------------------------------------------------------------
【修正版サンプル(2)】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
text-align: center;
margin:0;
padding:0;
}

#top_img_wrapper,
#wrapper_index_up,
#wrapper_index_bottom {
width: 1000px;
margin: 0 auto;
text-align: left;
}

#header {
background-color: red;
}

#top_img_wrapper {
background: url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif) center center no-repeat;
}

#top_img {
position:absolute;
width: 139px;
height: 92px;
top: 0;
left: 50%;
margin-left: -70px;
}
-->
</style>
</head>
<body>

<div id="wrapper_index_up">
(wrapper_index_upの領域 ここから)
<div id="header">ヘッダー</div>
(wrapper_index_upの領域 ここまで)
</div>

<div id="top_img_wrapper">
(top_img_wrapperの領域 ここから)
<div id="top_img"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="中央固定表示させる画像X" width="139" height="92" /></div>
<p class="hoge">top_img_wrapper内で画像Xの下に表示する最初の子要素(テキストなど)</p>
(top_img_wrapperの領域 ここまで)
</div>

<div id="wrapper_index_bottom">
(wrapper_index_bottomの領域 ここから)
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
(wrapper_index_bottomの領域 ここまで)
</div>

</body>
</html>
----------------------------------------------------------------------
前回のサンプルからの修正点は以下のみです。

【1】背景画像を指定する#top_img_wrapperとは別個に、中央固定表示画像を挿入する為だけのブロック#top_imgを追加。
【2】#top_img内で、画像Xをbodyに対しての絶対配置として指定。(ここの手法については参考サイトにポイントの解説が載っているので各プロパティの設定の理屈は省略します)

これで#top_img_wrapperの位置や幅とは関係なく、#top_imgは常に画面の左上を基点とした絶対配置になる為、水平方向はウィンドウ幅に対して常にセンタリングされる事になります。ただし、質問者様の場合は参考サイトと違って、画像Xの上下にヘッダー・コンテンツ・フッターというブロックが存在していますから、それらと、画像Xが(参考サイトの様に制限なく)重なってしまっては困るのでは?現に、上記サンプルでは、垂直方向に対する絶対位置を0にしてしまっているので、画面の上端にくっついてしまい、ヘッダーの上に画像Xが重なってしまう状態になっています。

これらを回避する為には、更にいくつかの条件を明確にして頂く必要があります。

(1)#top_imgの描画開始位置は、上からどれだけの位置にあればよいのか?例えば、ヘッダーを収める#wrapper_index_upの高さが50pxと決まっており、画像Xはそのすぐ下に、という事であれば、topプロパティの位置を指定する。
#wrapper_index_up {
height: 50px;
}
#top_img {
top: 50px;←修正
}
(2)#top_img_wrapperに表示させたい要素は、実は背景画像しかないのか?そうであれば、背景画像の全体像が必ず描画される様に、#top_img_wrapperに背景画像と同じ高さを指定しておく必要がある。例えば質問文中のソースの実寸通りであれば、下記の様に。
#top_img_wrapper {
height: 92px;←追加
}
(3)(2)と違い、#top_img_wrapperにはテキストなどの子要素があり、画像Xの下から表示させたい、というのであれば、#top_img_wrapperの高さの確保を最低92px以上に変更した上で、#top_img_wrapperの中で画像Xの下に配置する要素にはmargin-topなどで画像X分の余白を上方向に取ってから描画を開始する様にする。
#top_img_wrapper {
min-height: 92px;←追加
_height: 92px;←min-heightが無効なIE6用ハック
}
#top_img_wrapper p.hoge {
margin: 92px 0 0 0;
}

…という感じですが。いかがでしょうか。

ANo.2です。

> ここは「ブロック内でセンタリング」ではなく、「ブラウザの横ウィンドウ幅でセンタリング」となります。
> 下記のサイトに記載されているように、ブラウザの横ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているようにしたいです(ブラウザの縦ウィンドウ幅は本件には関係ありません)。
> http://www.lucky-bag.com/appendix/centering-elements/centering.html

その他の補足と、上記サイトを見て、イメージが掴めました。
上記サイトの画像は、"position: absolute;"...続きを読む

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

QCSSで菱形の画像サムネイルを表示し、クリックで元画像を表示させたい

タイトル通りです。
ギャラリーホームページを作っています。
菱形のサムネイルを並べ、クリックしたら元の画像が表示されるようにしたいと思っています。
jQuery?を使えるのが一番なのですが、うまく適用せず、よく分かりませんでした。
CSSでタイトルのような事をするためには、どのようにすればいいでしょうか?

Aベストアンサー

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>

css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}

親で正方形を45度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a><...続きを読む

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Q画像 文章の流し込み表示で

ちょっと段差の違いがありますが、気にしない場合、
上と下の違いはなんですか? どっちでも良いですか?
おすすめはどちらですか?
全く違う表示になってしまう場合もありますか?

<p><img src="cooking_3.gif" width="200" height="200" alt="料理3" style="float:right" />ここは長い文章・・・・・・・・</p>

<img src="cooking_3.gif" width="200" height="200" alt="料理3" style="float:right" />
<p>ここは長い文章・・・・・・・・</p>

Aベストアンサー

HTMLの考え方から言うと、画像をその段落内の文字の代替と考える場合は、段落内に書くでしょうし。別の段落と考えると分けた方がよいでしょう。imgはインライン要素ですから、基本的には<p></p>内にあるべきもので、全体を<div>などで括られている場合はエラーにはなりませんが、趣旨からいうと段落で囲むべき。
[段落内の画像]・・alt内の文字列に置き換えて問題ない場合
<p>魚を腹を手前に頭を左において、<img src="cooking_3.gif" width="200" height="200" alt="庖丁を魚の腹に水平に当てて" style="float:right" />引く。この時、皮だけを切るように注意しましょう。</p>
 ・・・この場合、画像を読み組まない設定にしている場合でも問題ないですね。

[別段落]
<p><img src="cooking_3.gif" width="200" height="200" alt="庖丁と魚の位置関係を示す図" style="float:right" /></p>
<p>魚を腹を手前に頭を左において、庖丁を魚の腹に水平に当てて図のように引く。この時、皮だけを切るように注意しましょう。</p>

 いずれの場合も、
<p class="subFig"><img src="cooking_3.gif" width="200" height="200" alt="庖丁と魚の位置関係を示す図" /></p>
 とすれば、一括して指定できますね。

 HTMLを作成するときに、Lynx for Win32( http://lynx-win32-pata.sourceforge.jp/index-ja.html )のようなテキストブラウザで閲覧したらどうなるかを念頭に置いて作成すると良いでしょう。これは、検索エンジンがどのように読んでいるかを理解するのに便利なので入れておいてもよいかも。

HTMLの考え方から言うと、画像をその段落内の文字の代替と考える場合は、段落内に書くでしょうし。別の段落と考えると分けた方がよいでしょう。imgはインライン要素ですから、基本的には<p></p>内にあるべきもので、全体を<div>などで括られている場合はエラーにはなりませんが、趣旨からいうと段落で囲むべき。
[段落内の画像]・・alt内の文字列に置き換えて問題ない場合
<p>魚を腹を手前に頭を左において、<img src="cooking_3.gif" width="200" height="200" alt="庖丁を魚の腹に水平に当てて" style="float:...続きを読む


人気Q&Aランキング