はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

A 回答 (2件)

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?


最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/777 …
http://www.tagindex.com/hp_guide/menu/02.html
    • good
    • 1
この回答へのお礼

なるほど!!そういう方法があったんですね♪
ありがとうございます!!実践してみます(^^

お礼日時:2007/02/01 23:06

<div style="float:left"><img src="1.gif"><br>caption 1</div>


<div style="float:left"><img src="2.gif"><br>caption 2</div>
<div style="float:left"><img src="3.gif"><br>caption 3</div>
<div style="clear:both"></div>
    • good
    • 12

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

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

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

Aベストアンサー

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

Q画像をランダムに表示させマウスを重ねるとさらに切り替わる方法

今HPを作成しているんですが、題名の方法が知りたいです。

JavaScriptを使って画像をランダムに表示させる方法ありますよね。
<script language="javascript">
<!--
//ランダムに画像を表示
img = new Array();
img[0] = "画像1";
img[1] = "画像2";
img[2] = "画像3";
n = Math.floor(Math.random()*img.length);
document.write("<img src='"+img[n]+"' border='0'>");
//-->
</SCRIPT>

それとマウスを重ねると画像が変わる
onmouseover="this.src='画像4'"
onmouseout="this.src='画像5'"
というタグありますよね。

2つのタグを組み合わせてランダムに表示された画像に
マウスを重ねると画像がかわるということがやりたいのですが
JavaScriptの知識があまりないためわかりません。
この方法は可能でしょうか?
もしくは他の方法あるでしょうか?

ランダムに表示される画像は3枚と仮定し、
それぞれ3枚の画像はマウスを重ねるごとに
違う画像を表示させたいと思っています。

解決法をわかるかたがいらっしゃったら
よろしくお願い致します。

今HPを作成しているんですが、題名の方法が知りたいです。

JavaScriptを使って画像をランダムに表示させる方法ありますよね。
<script language="javascript">
<!--
//ランダムに画像を表示
img = new Array();
img[0] = "画像1";
img[1] = "画像2";
img[2] = "画像3";
n = Math.floor(Math.random()*img.length);
document.write("<img src='"+img[n]+"' border='0'>");
//-->
</SCRIPT>

それとマウスを重ねると画像が変わる
onmouseover="this.src='画像4'"
onmouseout="this.src='画像5'...続きを読む

Aベストアンサー

>> ランダム画像1~3があります。
>> マウスを重ねたときに表示される画像4~6があります。

はあ,なるほど。
ランダムの後には規則性があるわけですか。

>> 画像1が選ばれたときはマウスを重ねると画像3。
>> 画像2が選ばれたときはマウスを重ねると画像4。

??? たぶん,
画像1が選ばれたときはマウスを重ねると画像4。
画像2が選ばれたときはマウスを重ねると画像5。
ということですよね。

上の部分から修正になります。
具体的にJPEGのファイル名と拡張子名まで入れておきます。

--------------------------------
<script language="javascript">
<!--
//ランダムにgazouを表示
img = new Array();
img[0] = "gazou1.jpg";
img[1] = "gazou2.jpg";
img[2] = "gazou3.jpg";
img[3] = "gazou4.jpg";
img[4] = "gazou5.jpg";
img[5] = "gazou6.jpg";
n = Math.floor(Math.random()*3);
m = n+3;
document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>");
//-->
</script>
-------------------------------

で行けます。

>> やはり動くgif画像をランダム表示などの方が
>> はやいのでしょうか?

意味がわかりません…。
動くgif画像って,勝手に動くアニメーションでしょう。
あれを,JavaScriptで制御できるのですか。

その方法は知りません。
Flashなら得意なので,よくActionScriptで制御しますが,GIFはわかりません。

>> ランダム画像1~3があります。
>> マウスを重ねたときに表示される画像4~6があります。

はあ,なるほど。
ランダムの後には規則性があるわけですか。

>> 画像1が選ばれたときはマウスを重ねると画像3。
>> 画像2が選ばれたときはマウスを重ねると画像4。

??? たぶん,
画像1が選ばれたときはマウスを重ねると画像4。
画像2が選ばれたときはマウスを重ねると画像5。
ということですよね。

上の部分から修正になります。
具体的にJPEGのファイル名と拡張子名まで入れておきます。

---...続きを読む

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

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

Aベストアンサー

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

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンで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 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでも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行2列のテーブルに左に画像、右にリストを入れれば、横並びができるかとおもいますが、スタイルシートを使った場合、画像の横にリストをおこうとすると、どうしても下に流れてしまいます。divで、画像とリストを囲って、floatをつかって右、左とすればできるかもしれないかなとおもいましたが、もっと簡単にできる方法がありそうなんですが。。。
なにとぞよろしくお願いいたします。

Aベストアンサー

imgタグの中に「style="float:left;"」
と記述するのが一番妥当なのではないでしょうか。
しかしウインドウの幅が小さいとテキストが
回りこまなくなるのが難点ですね。
因みに<br clear="all">で回り込みを解除出来ます

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

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

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

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

Aベストアンサー

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

QCSS リストを横幅最大表示

インラインリストの要素(li)間を、リストが左右一杯に広げるように設定することは可能でしょうか?
想像しているのは、リストアイテム同士の間にあるマージンが自動で変更するような仕組みです。

Aベストアンサー

 通常は、%で全体を割り付けますが、マージンで調整と言うことはほとんどしません。なぜなら広い画面のとき間延びしてしまうからです。
<ol class="nav">
<li><a href="/index.html">TOP</a></li>
<li><a href="/product">PRODUCT</a></li>
<li><a href="/future">FUTURE</a></li>
<li><a href="/cast">CAST</a></li>
</ol>

ol.nav,ol.nav li{list-style-type:none;margin:0;padding:0;line-height:20px;}
ol.nav{display:block;position:relative;height:20px;min-width:25em;}
ol.nav li{position:relative;top:0;display:block;width:10%;min-width:5em;background-color:yellow;padding:0.2em 0.5em;border:solid red 1px;position:absolute;top:0%;left:5%;}
ol.nav li+li{left:30%;}
ol.nav li+li+li{left:55%;}
ol.nav li+li+li+li{left:80%;}

 通常は、%で全体を割り付けますが、マージンで調整と言うことはほとんどしません。なぜなら広い画面のとき間延びしてしまうからです。
<ol class="nav">
<li><a href="/index.html">TOP</a></li>
<li><a href="/product">PRODUCT</a></li>
<li><a href="/future">FUTURE</a></li>
<li><a href="/cast">CAST</a></li>
</ol>

ol.nav,ol.nav li{list-style-type:none;margin:0;padding:0;line-height:20px;}
ol.nav{display:block;position:relative;height:20px;min-width:25em;}
ol.nav li{position:relative;to...続きを読む

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

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

Aベストアンサー

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

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

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

Qテーブルの横幅を常にブラウザ一いっぱいに表示するに

テーブルの横幅を常にブラウザ一いっぱいに表示するには?

たとえば
***********************************************
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>

<table border=1 cellspacing=0 cellpadding=0>
<caption>キャプション</caption>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table

</BODY>
</HTML>
***********************************************
を作ると、画像のようにコンパクトに表示されてしまいます。

やりたい事はブラウザの横幅が
10cmなら画面いっぱいテーブルを表示させて、
20cmなら画面いっぱいにテーブルを表示させたいです。

<table border=1 cellspacing=0 cellpadding=0 width="2000">
するとはみ出してしまうし、
<table border=1 cellspacing=0 cellpadding=0 width="1000">
だと小さすぎます。

誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか?

テーブルの横幅を常にブラウザ一いっぱいに表示するには?

たとえば
***********************************************
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>

<table border=1 cellspacing=0 cellpadding=0>
<caption>キャプション</caption>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table

</BODY>
</HTML>
***********************************************
を作ると、画像のようにコンパクトに表示されてしまいます。

やりたい事はブラウザの横幅が
10cmなら画面いっぱいテ...続きを読む

Aベストアンサー

 tableは、二次元以上のデータを並べる方法ですから、可能な限り小さく表示する描画手段をとることが推奨されています。
 ⇒11.3.2 水平及び垂直方向の配置( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.2 )
男                    │500人
女                    |200人
 もし1900pz程度の幅広のディスプレイじゃ利用しづらくてたまりません。

 内容の幅に合わせて可能な限り小さく表示するのじゃまずいのですか?

なお、tableにはsumarry属性か必須(HTML4~XHTML1.1)です。また<tbody>がひとつ以上は要ります。
<table summary="なんたらの表" border="1">
 <tbody>
  <tr>
   <th abbr="性別"></th><th abbr="人数">
  </tr>
   <td>男</td><td>500人</td>
とかになります。
 border属性を書くのは検索エンジンに表であることを伝えるためと後方互換です。
cellspacing=0 cellpadding=0 は非推奨です。

 tableは、二次元以上のデータを並べる方法ですから、可能な限り小さく表示する描画手段をとることが推奨されています。
 ⇒11.3.2 水平及び垂直方向の配置( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3.2 )
男                    │500人
女                    |200人
 もし1900pz程度の幅広のディスプレイじゃ利用しづらくてたまりません。

 内容の幅に合わせて可能な限り小さく表示するのじゃまずいのですか?

なお...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報