HTMLタグを使用したテーブルの作り方とオススメの方法
- HTMLタグを使用して、取り扱い商品・液晶モニタ・パソコンパーツなどの横に2列縦3列のテーブル、その横に縦5列横1列のテーブルを作成する方法について教えてください。
- 現在のHTMLタグによるテーブルは初期段階であり、他の作り方やオススメの方法があれば教えてください。
- HTMLタグを使用したテーブルに関する質問です。どなたかわかる方がいれば、アドバイスをお願いします。
- ベストアンサー
HTMLタグ
画像にもありますが、取り扱い商品・液晶モニタ・パソコンパーツなどの横に横2列縦3列のテーブル、その横に縦５列横1列のテーブルを付けたいのですが、どうしてもわかりません。 わかる方居ましたらお願いします。 現在こんな感じです <p><font color="#f70006"> <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br><img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p> 他にいい作り方など、オススメ等ありましたら何でもお願いします
- giftyou555
- お礼率20% (7/35)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<p><font color="#f70006"> <strong>他には無いアイテムがここにはあります</strong> </font> <br> <img style="WIDTH: 983px; HEIGHT: 102px" border="0" alt="" src="素材/top.png" width="1000" height="118"><br> <img border="0" alt="" src="素材/home.png" width="200" height="73"><img border="0" alt="" src="素材/商品一覧.png" width="200" height="73"><img border="0" alt="" src="素材/輸入.png" width="200" height="73"><img border="0" alt="" src="素材/買付.png" width="200" height="73"><img style="WIDTH: 169px; HEIGHT: 73px" border="0" alt="" src="素材/問合.png" width="170" height="73"><br> <br> <br> <br> <table><td> <img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br></td></td><td> <img border="0" alt="" src="素材/取り扱い.png" width="164" height="49"><br> <img border="0" alt="" src="素材/液晶.png" width="164" height="49"><br> <img border="0" alt="" src="素材/ａｐａｒｅｒｕ.png" width="164" height="49"><br> <img border="0" alt="" src="素材/pasokon.png" width="164" height="49"><br> <img border="0" alt="" src="素材/周辺機器.png" width="164" height="49"><br> <img border="0" alt="" src="素材/マルチメディア.png" width="164" height="49"><br> <img border="0" alt="" src="素材/自動車.png" width="164" height="49"><br></td></table> <br> <br> <br> <img border="0" alt="" src="素材/サポート.png" width="166" height="63"><br> <img border="0" alt="" src="素材/輸入について.png" width="166" height="63"><br> <img border="0" alt="" src="素材/お問い合わせ.png" width="166" height="63"><br> <img border="0" alt="" src="素材/会社概要.png" width="166" height="63"> </p>
関連するQ&A
- ウインドウを狭めてもレイアウトが崩れない方法
ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>
- ベストアンサー
- HTML
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </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>
- ベストアンサー
- ホームページ作成ソフト
- imgタグとレスポンシブについて
imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか？ それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか？ ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ～ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを２にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅（クロームのf12で出てくるpx）で出した％を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか？ ～ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>
- ベストアンサー
- CSS
- 並べた画像ファイルに不要なスペース行が入ってしまいます(HTML付き)。
お世話になります。 下記のように、画像ファイルを２つ並べようと思っています。 +---------+ |隅.bmp | +---------+ +---------+ |隅.bmp | +---------+ ただ、上の画像に左側にスペースを入れると、なぜか２つの画像の 間に細いスペース行が入ってしまいます。 この２つの画像の間のスペース行を無くす方法はありますか？ <p><img border="0" src="隅.bmp" width="160" height="160"><br> <img border="0" src="隅.bmp" width="160" height="160"><br> ↓↓↓ <p> <img border="0" src="隅.bmp" width="160" height="160"><br> <img border="0" src="隅.bmp" width="160" height="160"><br> よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- HPを、HTML言語で編集しています。
HPを、HTML言語で編集しています。 「例」という添付図の、枠内の提灯を右の余白に動かしたいのですが、うまくいかなくて困っています。ご教示下さい。 タグは以下です。 <CENTER><TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="700" height="10" background="red.gif"></TD> </TR> </TABLE></CENTER> <CENTER><TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="10" height="150" background="red90.gif"></TD> <right><img src="tyoutin.gif" width:76px; height:96px; border="0" alt="maru"></right> <TD align="left"> 日付 ○○○○○○○○○○○○○○○○</A><BR> <BR> 日付 ○○○○○○○○<BR> <BR> 日付 ○○○○○○○○○○○○○○○○○○○○○○○○ & nbsp; </P> <TD width="10" height="150" background="red90.gif"></TD> </TR> <CENTER><TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="700" height="10" background="red.gif"></TD> </TR> </TABLE></CENTER><br><br><br><br>
- ベストアンサー
- レンタルサーバ・ASP
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- トップページから各ページにリンクできません
こんにちは。 お世話になります。 会社命令で、初めてホームページを作成しているものです。 表題にもあります通り、アイコン（と言うのでしょうか。ボタンと言うのでしょうか。「アクセス」などと書かれて、それを押すと、各ページに飛ぶようにする小さな画像です） から、各ページに飛ぶようにしたいのですが、上手くいきません。 一つ目のアイコンからは飛ぶように上手くリンクが貼れたのですが、二つ目以降、 が上手く貼れません。 最初にリンクを貼ったアイコンが青い枠で囲まれており、そのためか、 他のアイコンをドラッグして選択状態にしても、最初にリンクを貼った時の様に リンクを貼ることができないのです。 ページの他の画像、インラインフレーム等を選択しても、その青い枠は消えません。 どうすれば、この青い枠が無くなり、他のアイコンからもリンクを貼ることができるでしょうか？ 私が入力したソースは、下記の通りになります。 <html> <head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>台湾</title> <style type="text/css"></style> </head> <body background="image/085.jpg"> <br> <p align="center"><big><big><big><big><big><b>abcd</b></big></big></big></big></big></p> <p align="center"><img src="image/080527_pandafullife_main.jpg" alt="" height="312" hspace="100" width="672"> <br> </p> <div align="center"> <b> <br> <big> +更新情報+</big> <br> <br> </b></div> <p style="height: 17px;" align="center"> <iframe style="top: 600px; left: 650px; width: 457px; height: 121px;" src="image/inraflame3.html" name="" id="center" marginheight="3" frameborder="1" scrolling="yes"></iframe><a><br> <br> </a><a href="about%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF.html"> </a><a href="about%E3%83%9A%E3%83%BC%E3%82%B8%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF.html"> </a><a href="aboutpagedate.html"><img alt="" src="image/02.gif" height="20" width="100"> <img alt="" src="image/07.gif" border="0" height="20" width="101"> <img alt="" src="image/04.gif" border="0" height="20" width="100"> </a></p> </body> </html> どなたか、お力を貸しては下さいませんでしょうか？ 宜しくお願い致します。
- ベストアンサー
- HTML
- 色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？
色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？ <tr> <td width="864" class="style49"> <p align="center"><a href="link/ryoukin.html" class="style49"><br /> <img src="image/web_004.gif" alt="格安引越が出来る理由" width="200" height="50" border="0"/></a><strong><a href="link/ryoukin.html" class="style49"><span class="style51"><img src="image/web_003.gif" alt="重要事項説明" width="200" height="50" border="0"/></span></a><a href="link/ryoukin.html" class="style49"><img src="image/web_005.gif" alt="料金計算書・オプション価格" width="200" height="50" border="0"/></a><br /> </strong></p> <p align="center"><strong><br /> <br /> <img src="image/web_010.gif" alt="引越プラン" width="130" height="35" /><br /> <br /> <a href="link/link1.html" class="style49"><span class="style58"><img src="image/web_007.gif" alt="フローチャート式お見積作成" width="200" height="95" border="0"/></span></a> <span class="style58"><a href="link/link0.html" class="style49"><img src="image/web_008.gif" alt="お荷物記載による個別お見積作成" border="0"/></a></span> <a href="http://*****.**.****.**/postmail/postmail2.html" class="style49" ><img src="image/web_009_03.gif" alt="各種お問合せ" border="0"/></a><br /> </strong></p> <p></p> ちなみに引越プランからフローチャート式お見積作成、お荷物記載による個別お見積作成、各種お問合せまで全部を一枠で部分的に外枠で囲みたいのですが、どのようなやり方があるでしょうか？ 部分的に囲めなくてすごく困っています。どうかよろしくお願いいたします。
- ベストアンサー
- HTML
