Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
はじめて質問させて頂きます。
こちらで質問して良いものかと思いましたが自分ではどうにもできず、ご教示よろしくお願い致します。
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/ツール等のバージョンなど)
より詳細な情報
ご回答有難うございます。
初心者レベルの為、今一度教えて頂ければ嬉しいのですが
<div>ではなく<code>にすればよいということでしょうか？
質問文入力にはマークダウンという仕組みがあり、そのための編集ボタンが編集画面内上部にあるはずなのですが、編集ページにある「 B I A 」などのボタンのならびにある「<code>」のボタンを押すことでコードブロック化できるという意味です。
早々に有難うございます。コードブロック化ができました。
こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。
再度やってみましたが、いかがでしょうか？
2016/10/04 14:03 が最終更新（内容は更新されていない）になったままですね。
何度もそうなるようであれば、運営に連絡してみてください。使用しているブラウザも一緒に伝えると良いと思います。 https://teratail.com/contact/input
度々のご連絡を有難うございます。コードは該当のソースコードに記載のとおりなのですが、そちらからご確認いただくことはご無理でしょうか？可能でございましたら、ご確認頂ければ嬉しいです。
回答2件
0
質問者さんの意図にそえてるかわかりませんが回答します
記載されているコードの
html
1<td width="50%"> 2<a href=" "><img src="hoge.png" width="100%" border="0" style="margin:10px"></a> 3</td>
これだと
imgのwidthに100%を設定している時点でtdのwidthとイコールになっているのにさらにmarginを設定しているためはみ出してしまいます
marginを設定したいならimgのwidthとmarginの合計が100%になるようにしてください。
例えば
html
1<td width="50%"> 2<a href=" "><img src="hoge.png" width="98%" border="0" style="margin:1%"></a> 3</td>
とか。
marginは画像の左右につくので imgのwidth = 100% - margin*2 です。
見当違いの回答してたらもうしわけないです
投稿2016/10/04 09:12
総合スコア15
ご親切な回答を有難うございます！
今日は退勤してしまいましたので、明日 早々にやってみます。
0
ベストアンサー
terumikawaiiさんの回答で解決しそうなので、細かいことを指摘します。
1箇所「">」が抜けている
HTML
1<!-- >Before< --> 2<div style="font-size:10px;height:25px;overflow:hidden
HTML
1<!-- >After< --> 2<div style="font-size:10px;height:25px;overflow:hidden">
width border cellpadding bgcolor は非推奨の書き方で、table-layout はCSSなので書き方が違います。（そもそもレイアウトのためにテーブルを使うことは推奨されていません（実は挙動が難しかったりする）のでdivとかでレイアウトするほうがお勧めです）
HTML
1<!-- >Before< --> 2<table width="100%" border="0" cellpadding="0" bgcolor="#e7e9e9" table-layout="fixed">
HTML
1<!-- >After< --> 2<table style="width: 100%; border: 0; border-collapse: collapse; background-color: #e7e9e9; table-layout: fixed;">
【<table> - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
width border cellpadding bgcolor は非推奨の書き方です。
HTML
1<!-- >Before< --> 2<img src=" " width="100%" border="0">
HTML
1<!-- >After< --> 2<img src=" " style="width: 100%; border: 0;">
投稿2016/10/04 17:40
総合スコア69398
非推奨の書き方から細かな箇所までご指摘下さり、本当に有難うございました！
お蔭様で画面からはみ出すのを修正できました。
心からお礼申し上げます。本当に本当に有難うございました。
あなたの回答
tips
プレビュー
