- 締切済み
横並びの写真の上下に複数行の説明文を付けたい。(再質問)
横並びの写真の上下に複数行の説明文を付けたい。(再質問) 前回中途半端な質問をしてしまいましたので、改めて質問し直します。 横並びの写真の説明文をその写真の上下に掲載したいのですが、 <Table>を使用せずに、各画像の上下に幅に合わせて個別の複数行の文章をつけることできないでしょうか? 私の場合 ３画像を次のとおり、 <DIV ALIGN="center"> <IMG SRC="images/a.jpg" WIDTH="150" BORDER="2"> <IMG SRC="images/b.jpg" WIDTH="200" BORDER="2" HSPACE="50"> <IMG SRC="images/c.jpg" WIDTH="200" BORDER="2"> </DIV> ２画像の横並びを次のとおりに表示しています。 <DIV ALIGN="center"> <IMG SRC="images/d.jpg" WIDTH="300" BORDER="2" HSPACE="40"> <IMG src="images/e.jpg" WIDTH="400" BORDER="2" HSPACE="40"> </div>
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
cssでということでしょうか？ もしも画像の高さを揃えたままで説明文の位置を調節したいということなら少し難しくなりそうです。 画像などでもう少しデザインを補足してもらえればと思います。
理論的にはdivにCSSで行を固定した上で、img要素をspan要素で括ってspanにCSSで画像の幅と同じ幅を指定。 そして、同時に表示位置を指定した上で、img要素の直下に<br>で説明文。 コレで希望の配置には成る筈です。 一応要素や属性は全て「小文字」で記述しましょう。 そして極力CSSで指定した方が無難です。 imgも以下が基本に成ります。 <img src="" alt="" title="" width="" height=""> どうでしょうか？
お礼
aidesさん、回答ありがとうございました。
関連するQ&A
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- ビルダー9 表の枠（罫線？空白？）を完全になくすには？
会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 （ファイル名は消してあります） 最初は上下にも入っていたのですが、それはどうにか消すことができました。 （どうやったか覚えてないですけど） この線をないものとすることはできますか？ 周りに詳しい人がいなくて、ほんっっとうに困ってます！助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
- 写真の下に説明文
こんにちは。 今アルバムのページを作っています。 右側に縮小した写真を縦に並べ、その写真をクリックすると画面中央に拡大されて映るというものです。 拡大された時、写真の簡単な説明文を写真の下に表示させたいんですが、やり方がわかりません。検索してみたんですが、それらしき物が見つからずこちらに参りました。 だいぶ略してますが、下記のようなソースを使って作りますよね？これで、中央に表示させるまでは出来ました。後は各写真の説明文の表示だけなんです。 <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; function startimg(I){ document.image.src=I; } //--> </script> ＝中略＝ <table> <tr> <td align=center> <table border =1> </td> </tr> <tr> <td align=center> <img src="../gif/●.jpg" name="image"> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- レンタルサーバ・ASP
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- 文字の上のスペースだけ微調整できますか？
文字と文字の間にある縦の境界線はbackgroundの上下のセンターにあるのですが 「あ」「い」「う」の文字が少し上に来ています。 微調整するタグはございますか？ paddingを試したのですが、せっかく上下のセンターにきてた境界線もずれてしまうのでだめでした。 ご教授お願いします。 ------------------------------------------------ あああああ <img src="images/line.gif" style="vertical-align: middle;" hspace="10" vspace="0" width="2" height="20" alt="境界線" /> いいいいい <img src="images/line.gif" style="vertical-align: middle;" hspace="10" vspace="0" width="2" height="20" alt="境界線" /> ううううう ------------------------------------------------
- 締切済み
- HTML
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLでの画像と文字の表記についての質問です。
画像の右側に文字を表示したいのですが、 ---------------- <img src="images/abc.jpg" width="400" border="2"> １行以上の文字列・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・<br> ---------------- 上記のようにすると２行目以降の文字列は写真の下に表示されます。 かと言って、 align="left"を追記すると、文字列は写真の右上端から表示されてしまいます。 画面の右側の下部に複数行の文字列を表示する方法はありますか?
- 締切済み
- HTML
- 正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- HTML
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- 一瞬画像が
現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか？ どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
metametamuさん、回答ありがとうございました。