テーブルの中に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;
}
No.1ベストアンサー
- 回答日時:
どう見ても表じゃないようですが・・・
またHTMLにもいくつか誤りがあります。trのattr(属性)にはwidthはありません。また、iframeはインライン要素ですから、widthは指定すべきではありません。
[HTML]
たぶんですが、ボタンによってiframe内のHTMLを入れ替えることを考えてらっしゃるのだと思いますが、その場合でもtableを使うデザインはよくありません。HTML5はHTML4.01以上に文書構造に従ったマークアップが求められます。
特にtableは、その目的から特殊な挙動をすることが求められていますから、この場合のtableはまずいです。
スタイルシートのサイズですが、img,object,iframeなどの置換インライン要素は置き換えられた内容サイズを参照しますが、ブロック要素はそれが含まれる親コンテナブロックのサイズを参照します。いったんdisplayプロパティでblockに変更して親コンテナブロックを参照することもよく行われています。
また、ブロックのサイズは、padding辺の内側のサイズです。(IE6はバグで違う)など、基本的な部分が・・
★8.1 ボックスの寸法(Box dimensions) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
この回答への補足
tableは好ましくないのですか・・・
レイアウトを整えるのにはもってこいと思っていたのですが・・・
どうしたらよいものやら・・・
No.2
- 回答日時:
>レイアウトを整えるのにはもってこいと思っていたのですが・・・
そのためのものではありません。「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」は明確に、相当厳しい言葉で否定されています。
どのようにHTMLを書くかは内容がわからないとわかりません(HTMLは文書構造を示すものですから)が、
<div id="listHTML">
_</ol>
__<li><input type="button" value="1"/></li>
__<li><input type="button" value="2"/></li>
__<li><input type="button" value="3"/></li>
__<li><input type="button" value="4"/></li>
__<li><input type="button" value="5"/></li>
_</ol>
_<p>
__<iframe>
_</p>
</div>
でよいです。
★HTMLを書くときにデザインを考えたら失敗します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
Firefoxで見るとli要素レイアウ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
Flexslider2のカーセルスライダ...
-
投稿フォームの整列
-
Firefoxでheight:100%がきかない?
-
初心者html・CSS ウィンドウを...
-
画像の位置指定
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
回り込みについて(間隔が空く)
-
FFにおけるDIVタグ間の隙間につ...
-
html初めてです、教えてください!
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報