- ベストアンサー
リンク付き商品画像を並べて貼りたい
torayoshiの回答
- torayoshi
- ベストアンサー率62% (910/1449)
torayoshiです。 その前に確認です。 (1)画像は背景でなくても良いのか(普通は背景にしない) (2)画像は質問者側で用意するのか、それともこの会社の商品画像を使うのか。 (3)この質問htmlはテーブル組になってるが、同じようにテーブルレイアウトにするのか(画像だけを単に横に並べるだけならテーブル組は必要ない) (4)この質問htmlを元に改造するとなると、まったく別の違うhtmlになってしまうが、それでもあくまでこの質問htmlにこだわるのか(新しく書き直した方が良い。と言ったのはそのため) (5)企業が作ったサイトはプロの手によるものが多い。 プロが手がけたサイトにはjava scriptなどオリジナルなものも存在し、著作権を主張するものもある。以上の理由から質問htmlを元に改造するのは避けた方が賢明である。 補足をお願いします。
関連するQ&A
- ホームページビルダー、タグでエラーが出るのは何故？
ホームページビルダーデドロップシッピングのサイトを作成しています。ドロップシッピングのサイトにあるソースをコピペしてサイトを作ろうとすると、エラーが発生してしまいます。 原因は何でしょうか？ ちなみにタグはこれです。 <table cellpadding="0" cellspacing="0" border="0" style="width:468px;height:268px;font-family:'ＭＳ Ｐゴシック','Osaka－等幅';background-image:url(http://www.moshimo.com/images/clbg0_0_1.gif);background-repeat:no-repeat;font-size:12px;line-height:18px;"><tr><td style="width:175px;vertical-align:middle;vertical-align:top;"><div style="width:154px;height:154px;background-image:url(http://www.moshimo.com/images/cl_frame0_1.gif);float:right;margin-top:30px;"><a href="https://www.moshimo.com/article/231414/62354"><img src="http://www.moshimo.com/item_image/0042401000008/1/r.jpg" width="150" height="150" style="margin:2px;border:0;" alt="マルチビタミン11"></a></div></td><td rowspan="2" style="text-align:left;vertical-align:top;padding:20px 0 0 5px;"><p style="font-size:18px;font-weight:900;margin:6px 0;line-height:21px;"><a href="https://www.moshimo.com/article/231414/62354 " style="color:#0A50FF;text-decoration:underline;">マルチビタミン11</a></p><p style="margin:7px 0;font-size:12px;color:#222222;"><span style="font-size:14px;font-weight:900;color:#FF1A00;">販売価格￥2,572</span></p><p style="margin:5px 20px 0 5px;text-align:left;color:#222222;">■注目の成分■マルチビタミン11種類ビタミンC■こんな方におススメ■ビタミン不足を感じる方健康のために栄養補給体調管理を徹底したいいまの農産物はハウス栽培、促成栽培が多く、環境の変化や農薬の多用などにより、昔と比べてビタミンをはじめとする栄養価が激減していると…</p></td></tr><tr><td style="text-align:center;vertical-align:top;"><a href="http://www.moshimo.com/item_image/0042401000008/1/l.jpg" target="_blank"><img src="http://www.moshimo.com/images/cl_bigimg0_1.gif" width="116" height="23" alt="拡大画像を見る" style="margin-top:5px;border:0;"></a></td></tr><tr><td colspan="2" style="text-align:right;"><a href="https://www.moshimo.com/article/231414/62354"><img src="http://www.moshimo.com/images/cl_btn_detailed0_1.gif" width="140" height="23" alt="商品詳細ページへ" style="margin:10px 3px 17px 0;border:0;"></a><a href="https://www.moshimo.com/?action_cart_add&sid=231414&bid=-62354"><img src="http://www.moshimo.com/images/cl_btn_cart0_1.gif" width="140" height="23" alt="カートページへ" style="margin:10px 20px 17px 0;border:0;"></a></td></tr></table>
- ベストアンサー
- ホームページ作成ソフト
- テーブルが左右上下中央表示にできない。
<style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } bodytd{ letter-spacing :2px; line-height :15pt; font-size:80%;font-family:'Verdana'; color:#ffffff; } br{letter-spacing:normal;} body{overflow-y:hidden; margin:0;padding:0; background-attachment:fixed; } a{ text-decoration:none; color:#000000; } a:hover{ color:#808080; } --> </style> </head> <body> <table border="0" width="100%" height="100%" cellspacing="0" summary="テーブル"> <tr> <td colspan="3" style="border-bottom:1px solid #000000" bgcolor="#000000" valign=bottom><font size=5><b>SITE NAME</b></font> </td> </tr> <tr> <TD height="80%" width="250" align="center" valign="top" colspan="3"><BR> <BR> <table style="border: 1px dotted #cccccc;"> <tbody> <tr> <TD><IMG src="ConvertImage/ice.png" width="187" height="131" border="0"></TD> <TD height="120" width="200"> <div style="width: 270px; height:140px;color:#cccccc;font-size:10px;font-family:Verdana;overflow:auto; scrollbar-face-color:#000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #cccccc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;"><FONT color="#cecfce">ここにテキスト<BR> </FONT></div> </TD> </tr> </tbody> </table> </TD> </tr> <tr> <td colspan="3" style="border-top:1px solid #000000" bgcolor="#000000" align="right" valign="top"><FONT color="#ffffff">SINCE</a> </td> </tr> </table> </body> と、ビルダーでフレームを使わず横三分割のサイトを作ったのですが 真ん中の白い部分にあるテーブルを白ページ上下左右中央に設置出来ず悩んでいます。どうか解決策を教えてくださいお願いします。
- ベストアンサー
- HTML
- テーブルの中にiframe
テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
- メニューのリンクをクリックして、タイトルの色を変える方法。
メニューのリンクをクリックして、タイトルの色を変える方法。 上記の操作をするための記述内容がわかりません。 以下に、HTMLを載せます。 <style type="text/css"> h2{ color : #98FB98; font-size : 69px; letter-spacing: 0.8em; font-family: impact; margin:0px 0px 0px 10px; } TABLE { color : #57450f; font-size : 12px; } #bg{ background-color : #dedec2; border-right-style : solid; border-bottom-style : solid; border-right-color : #57450f; border-bottom-color : #57450f; border-right-width : 1px; border-bottom-width : 1px; width:460px; } #td1{ background-image : url(image/back01.gif);height : 60px; vertical-align:top; padding:2px; color : #dedec2; } #td2{ background-color : #665c50; height : 20px; text-align : right; } #left{ width:190px; text-align:center; vertical-align:top; border-right-width : 1px; border-right-style : dotted; border-right-color : #665c50; } .li1{ margin:5px auto; text-align : left; letter-spacing: 0.1em; line-height : 20px; } </style> <TABLE id="bg" cellpadding="0" cellspacing="0"><TBODY><TR> <TD id="td1" colspan="2"> <H2><font color="#DA70D6">a</font>b<font color="#DA70D6">c</font>d <font color="#DA70D6">e</font>f<font color="#DA70D6">g</font></H2> </TD></TR><TR> <TD id="left"> <h3>MENU</h3> <UL class="li1"> <li><A href="main.html" target="main">１</A></li> <li><A href="main.html" target="main">２</A></li> <li><A href="main.html" target="main">３</A></li> <li><A href="main.html" target="main">４</A></li> </UL> </TD> <TD id="right"> （関係ないので中略） </TD></TR><TR><TD id="td2" colspan="2"></TD></TR></TBODY></TABLE> （動作環境はVista、IE8） 左右に２分割のレイアウトで、左側に上記のHTMLを反映させてます。 私がやりたいことはリストのタグのリンクをクリックして、タイトル（<h2>タグの箇所）の色を変更することです。 リンクごとに其々色を変えたく、タイトルに２色用いているように、変更後も同じ配列で２色できれば使いたい。 CSSはそこそこ知識はありますが、JavaScriptに関しては全くの素人です。 上記のように設定するにはどうしたらいいでしょうか？
- ベストアンサー
- JavaScript
- あるソースをあるソースに埋め込みたい
http://www.1uphp.com/con2/menu/tab41.html このURLの一番下の「全ての書き方」を 下記のソースのメニューの右にあるテーブルに埋めたいと思っています。 しかし、上記URLのソースのスタイルシート部分を書きのソースへコピペした段階で 下記のソースのページが全て左寄せみたいになってしまいます。 どこをどう記述すれば埋め込めるでしょうか？ <html> <head> <style type="text/css"> <!-- A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } TABLE#mainTable { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid; BORDER-COLLAPSE: collapse } TD.borderAll,TD.borderNoTop,TD.borderNoBottom { BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 1px solid } --> </style> </head> <body bottommargin="10" background="sozai/kabegami.gif" topmargin="10"> <table height="1817" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 1817px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"><strong><font color="#ff0000" size="5"></font></strong></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">お教室情報</font></td> </tr> <tr> <td><a class="menu" href="5_shop.html" >Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table> <p align="center"> <font ><font color="#808080" size="1" > <font ><font size="2"> <br></font></font> </p></font></font></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 1380px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> <p align="left"><font color="#808080"></font> </p></td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> </p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- HTML
- リンク先から戻ったら、表示がおかしい。
未完成品です。 サイトの各ページからメインページに戻ると、文字の色が変わったり、 大きさが変わります。 どこに不具合があるか、初心者なのでよくわかりません。 いじりすぎて、構成もめちゃくちゃだと思いますが、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ゲームのすべて</title> </head> <!--全体の背景--> <body bgcolor="#696969" text="#FFFFFF" link="#0000FF" alink="#DC143C" vlink="#8B008B"> <title>デザイン</title> <style type="text/css"> <!-- body { line-height:150%; font-size: 12px; color: #222222; margin:10px 0px; } .menu_c { font-size:12px; color:#cccccc; } .menu_c a { color:#ffffff; text-decoration: none; } .menu td { padding:2px 8px; } .side { background:#D3D3D3; margin:0px 0px 10px 0px; padding:5px 8px; border-left: #80838F 1px solid; border-right: #80838F 1px solid; border-bottom: #80838F 1px solid; } h3 { color:#ffffff; font-size:12px; margin:0px; padding:2px 12px; background:#808080; } h4 { color:#ffffff; font-size:12px; margin:0px 0px 0px 8px; padding:2px 12px; background:#808080; } .comb { margin:0px 1px 10px 8px; padding:5px 10px 5px 4px; background:#D3D3D3; } --> </style> </head> <!-- ページの全体幅テーブルタグ --> <table width="780" align="center"> <tr><td> <!--一番上のところ--> <table width="100%" > <tr> <td width="18%"><img src="logo.gif" width="132" height="40"></td> <td width="82%" align="right"><a href="index">ホーム</a> <hr noshade size=1></td></tr> </table> <br> <table width="100%" border="0" cellspacing="0" bgcolor="#DCDCDC" class="menu"> <tr><td width="72%">ああああああああああああああ</td> <td width="28%" align="right">デザイン</td></tr> </table> <table width="100%" border="0" cellspacing="0" class="menu"> <tr><td bgcolor="#808080" class="menu_c"><a href="#">ホーム</a> | <a href="#">おもなゲーム</a> | <a href="#">ソフト</a> | <a href="#">作られる過程</a> </td></tr> <tr><td><a href="#">ホーム</a> > ページナビ</td></tr></table> <!--左サイドメニュー--> <table width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-bottom: #B6B6B6 1px solid;"> <tr><td width="25%" height="70" valign="top" bgcolor="#696969"> <h3>おもなゲーム</h3> <div class="side"> ・<a href="page1.html#1">PS3</a><br> ・<a href="page1.html#2">PSP</a><br> ・<a href="page1.html#3">PSP go</a><br> ・<a href="page1.html#4">Xbox360</a><br> ・<a href="page1.html#5">Wii</a><br> </div> <h3>ソフト</h3> <div class="side"> <br> </div> <h3>おもなゲーム</h3> <div class="side"> ・<br> ・<br> ・<br> ・<br> </div> <h3>プログラマー</h3> <div class="side"> </div> <!--左サイドメニュー 終--> <!--右サイドメニュー 始--> <br></td> <td width="75%" valign="top"> <h4>自己紹介</h4> <div class=comb>ああああああああああああああああああああああああああああああああ<br> aaaaaaaa<br> aaaa </div> </td></tr></table> </td></tr></table> <table width="100%" > <tr><td align="center"><a href="index.html">ホーム</a> | <a href="page1.html">おもなゲーム</a> | <a href="page2.html">ソフト</a> | <a href="page3.html">作られる過程</a> | <a href="page4.html">プログラマー</a></td></tr> <tr><td align="center">Copyright © Your site. All Rights Reserved. </td></tr> </table> </html>
- 締切済み
- HTML
- HP作成初心者です。詳しい方誰か教えて下さい！
HP作成初心者です。 Mobile Spaceで作成しています。 リアルタイムを編集しているのですが、親記事自由表示の所が合っているのか分かりません。 チェックして頂けるとありがたいです。 どうぞよろしくお願いします。 (チェックしてほしい内容です↓) <br><div align="center"><div align="center"><table width="90%" bgcolor="black" cellspacing="1"><tr><td bgcolor="white"><font color="black"> <font style="font-size:10px"><DIV align="left"></a> <blockquote> <blockquote style="margin:3px 3px 5px 5px;"><font style="letter-spacing:1px;line-height:10px">#body#</Font> #photo3# </blockquote></DIV><DIV align="right"><font color=#000000>( #td#/#etm#/#ty# #th#:#ti# </font> #tbody# </a> </a><font color=#000000>) </font> </DIV></font></td></tr></table></div>
- 締切済み
- その他（インターネット・Webサービス）
- html 画像を並べて表示したい
html初心者です。 前回質問したときにインラインフレームと真ん中のロゴを並べて表示していただきました。 今回は３つ横に並べて表示したく、前に教えてもらったタグをいじってみたのですが３つ並ぶことはなく、どうしても下にずれてしまいます。 画像の右下にずれてしまった画像（オレンジのやつ）があるのですがそれを真ん中のロゴの左に移動させたいのですが どうすればできますか？ html↓ <table style="width: 100%"><tr><td style="width: 300px"> <iframe src="file:///C:/Users/yuri/Desktop/%E3%81%BF%E3%81%84hp/%E3%82%A4%E3%83%B3%E3%83%95%E3%83%AC%E5%86%85.html"frameborder="0"width="440" height="500" style="background-color: #FFC0CB">みーちゃん</iframe> </td> <td> <A Href="URLまだ" Title="JUMP!!"> <font color="#FF69B4"> <DIV style="font-size:600%; margin-right:300px"> <div align="center"> <font face="HGS創英角ポップ体,Courier New">Miiko's<br>Photo.</font> </div> </font> </A> </b> </td></tr></table> <hr style="border:dashed;color:カラーコード;"> <img src="file:///C:/Users/yuri/Desktop/%E3%81%BF%E3%81%84hp/flower4800.jpg" width="400px" height="296px" align="right"><br> <br> </div>
- 締切済み
- HTML
- ※再度※どこが悪いのかみていただきたいです。
以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- 締切済み
- ホームページ作成ソフト
- ※再々度※見ていただきたいです
以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- ベストアンサー
- HTML
お礼
度々すみません。。 前回の回答で補足してもらった商品画像で商品が写ってませんでしたよね。。 こちらの（教えて！goo）のシステムが写真は載せないのかと 思っていたのですが、教えて！gooからメールが届きました。 --教えて！gooからのメール-- 当サイトの利用規約上ご遠慮いただいている行為 に該当してしまう記述がございました。そのため、申し訳ございませんが、質 問の該当箇所を編集させていただきました。 画像が背景に編集されたから商品のところが空欄になったということ でしょうか？ だとするとお手本を書いてもらっても、もともとのソースが 編集されてしまっているので意味がなくなってしまうと 思うのですが・・ 初心者なのでそこのところが分かりません・・ 取り急ぎ連絡させてもらいました。。 面倒な質問にお付き合いさせてしまってすみません。。
補足
何度も回答して頂き、本当にありがとうございます。。 私はドロップシッピング初心者で、webショップを 作成している過程で行き詰まり質問させてもらいました。。 質問のhtmlは加盟登録しているドロップシッピング会社の 沢山ある商品の中の1つで、この商品のhtmlを例にして 画像だけを横に並べて表示させるhtmlの式？（並べ方）も 学べたらと思いました。。 全ての商品が「商品画像」「説明文」「商品名と価格」 「詳細ボタン」「カートに入れるボタン」という形でセットに なったhtmlでできているので 今回質問させてもらった 商品画像だけを並べる方法を理解して、他の商品をショップ に貼り付ける時にも応用したいと思いました。。 同じドロップシッピング会社に加盟している方々のショップでも 画像だけを引用して並べているので商品画像だけを引用することの 問題はありません。。 質問htmlを元に改造するのは避けた方が賢明なのですね。。 1つ勉強になりました。。 (1)画像は背景でなくてもいいです。。 (2)会社の商品画像を使おうと思います。。 (3)テーブル組はしなくていいです。。 (4)(5)質問のhtmlにこだわりません。。 面倒なお願いでほんとにすみません・・ よろしくお願いします（感謝の礼）