###前提・実現したいこと
はじめて質問させて頂きます。
こちらで質問して良いものかと思いましたが自分ではどうにもできず、ご教示よろしくお願い致します。
cssを使わずにスマートフォンサイトを作成しております。
テーブルを使用してレイアウトしていますが、2行で画像を横並びに配置する際
余白を設定しましたが、スマートフォンで見ると左右にグラグラしてしまいます。
横揺れしない方法を教えてくださいますよう、よろしくお願い致します。
また、使用可能タグが限られており、
<A> <ABBR> <ADDRESS> <AREA> <ARTICLE>
###該当のソースコード
<div style="width:100%;box-sizing: border-box"> <table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed"> <tr><td> <img src=" " alt="カテゴリ" width="100%" border="0"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed"> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> ※↑cellpadding=10にしていたが、はみでるので5pxにしてみました。 <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> </tr> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> </tr> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> </tr> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:10px"></a></td> </tr> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> </tr> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:5px"></a></td> </tr> </table> <table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed"> <tr><td> <img src=" " width="100%" border="0"></td> </tr> <tr><td> <img src=" " width="100%" border="0"></td> </tr></table> <table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed"> <tr> <td><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px"><a href=" "><img src=" "width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px"><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px"><a href=" "><img src=" "width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px"><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px"><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px"><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> <tr> <td style="padding-top:20px;padding-bottom:20px"><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> <tr> <td> <img src=" " width="100%" border="0"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed"> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:10px"></a> <a href=" " style="color:#000000;text-decoration:none"><div style="font-size:10px;height:25px;overflow:hidden">あああああ</div></a><br> <p style="font-size:10px;text-align:right;color:#F00;line-height:0.1;height:20px">あああああ</p> </td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:10px"></a> <a href=" " style="color:#000000;text-decoration:none"><div style="font-size:10px;height:25px;overflow:hidden">あああああ</div></a><br> <p style="font-size:10px;text-align:right;color:#F00;line-height:0.1;height:20px">あああああ</p> </td> </tr> <tr> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:10px"></a> <a href=" " style="color:#000000;text-decoration:none"><div style="font-size:10px;height:25px;overflow:hiddenあああああ</div></a><br> <p style="font-size:10px;text-align:right;color:#F00;line-height:0.1;height:20px">あああああ</p></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:10px"></a> <a href=" " style="color:#000000;text-decoration:none"><div style="font-size:10px;height:25px;overflow:hiddenあああああ</div></a><br> <p style="font-size:10px;text-align:right;color:#F00;line-height:0.1;height:20px">あああああ</p></td> </tr> <tr> <td width="50%"><a href=" "><img src="h " width="100%" border="0" style="margin:10px"></a> <a href=" " style="color:#000000;text-decoration:none"><div style="font-size:10px;height:25px;overflow:hidden">あああああ</div></a><br> <p style="font-size:10px;text-align:right;color:#F00;line-height:0.1;height:20px">あああああ</p></td> <td width="50%"><a href=" "><img src=" " width="100%" border="0" style="margin:10px"></a> <a href=" " style="color:#000000;text-decoration:none"><div style="font-size:10px;height:25px;overflow:hidden">あああああ</div></a><br> <p style="font-size:10px;text-align:right;color:#F00;line-height:0.1;height:20px">あああああ</p></td> </tr> </table> <table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed"> <tr> <td align="center" valign="middle" style="padding-top:20px;padding-bottom:30px"><a href=" "><img src=" " border="0"></a></td> </tr> <tr><td><a href=" "><img src=" " width="100%" border="0"></a></td> </tr> </table> </div>###試したこと
1.<table width="100%" border="0" cellpadding="10">で設定
2.列があるテーブルに<td style="padding:10px">を設定
3.<div style="width:100%;box-sizing: border-box">でまとめてみた。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
ご回答有難うございます。
初心者レベルの為、今一度教えて頂ければ嬉しいのですが
<div>ではなく<code>にすればよいということでしょうか?
質問文入力にはマークダウンという仕組みがあり、そのための編集ボタンが編集画面内上部にあるはずなのですが、編集ページにある「 B I A 」などのボタンのならびにある「<code>」のボタンを押すことでコードブロック化できるという意味です。
早々に有難うございます。コードブロック化ができました。
こちらの環境では変更/修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか?最近teratailで修正が保存されない事がたまにあるようなので・・・。
再度やってみましたが、いかがでしょうか?
2016/10/04 14:03 が最終更新(内容は更新されていない)になったままですね。
何度もそうなるようであれば、運営に連絡してみてください。使用しているブラウザも一緒に伝えると良いと思います。 https://teratail.com/contact/input
度々のご連絡を有難うございます。コードは該当のソースコードに記載のとおりなのですが、そちらからご確認いただくことはご無理でしょうか?可能でございましたら、ご確認頂ければ嬉しいです。
回答2件
あなたの回答
tips
プレビュー