• 締切済み

コンテンツをウインドウの中央に固定

以下のコードで、コンテンツをウインドウの中央に固定しようと思っているのですが、 上手くいきません。 ウインドウのサイズに合わせながら、中央に常に表示できればいいのですが、 そういったコードはありますか？ <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <TABLE border="0" width="100%" height="100%"><TR align="center"><TD align="center"> <div class="centerdiv"> <script src="ジャバファイル" type="text/javascript"></script> </div> </TD> </TR> </TABLE> </body> </html>

みんなの回答

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.5

javascriptがどうのようなコンテンツか知りませんが、 TABLEを使い（CSSはデフォルト前提）尚且つ互換性を考慮するなら以下で。 （※ TABLEを使わない方法が推薦ですが） <body style="margin:0; padding:0;"> <div style="text-align:center;"> <table style="margin: 0 auto; height:100%;"><tr><td> <div class="centerdiv"> <script src="ジャバファイル" type="text/javascript"></script> </div> </td></tr></table> </div> </body>

回答No.4

表でも、中央に配置されるのではありませんか。 ＜IE、FireFox で＞下記で確認。 <HTML> <TITLE></TITLE> <BODY> <DIV> <TABLE border="0" width="100%" height="100%"> <TR valign="middle" align="center"> <TD ><script src="ジャバファイル" type="text/javascript"></script><br>ジャバファイル </TD> </TR> </TABLE> </DIV> </BODY> </HTML>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

×tableでレイアウトしない 　単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ×非推奨属性(topmargin,leftmargin,marginwidth,marginheight,width,height,align)は使わない 　14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ★リンク先を読んでおくこと。 そのためには、strictで作成すること。transitinalは、使えなくなる要素、属性をたくさん含んでいます。 とりあえず基本形を上げておきます。ウィンドウ巾450px以上に対応してます。 もちろん、 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証してあります。 ★なお、＿に戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{background:gray;margin:0;padding:0;} div.header,div.section,div.footer{ ＿width:80%;min-width:450px;max-width:900px;margin:0 auto; ＿background-color:white; ＿border:solid 1px white; } div.section,div.footer{margin-top:5px;} div.section{min-height:400px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>段落</p> ＿</div> ＿<div class="footer"> ＿＿<h3>文書情報</h3> ＿</div> </body> </html>

  • oct1290
  • ベストアンサー率35% (75/213)
回答No.2

<html> <head> <title></title> <link href="../style.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <table border="0" height="100%" width="100%"> <tbody> <tr> <td align="center"> <table bgcolor="#9999cc" border="0" cellpadding="10" cellspacing="1" height="360" width="600"> <tbody> <tr> <td bgcolor="#eeeeff" valign="top"> <font color="#0000ff">テ スト</font><br> <br> <font color="#999999">此処に何か書く<br> </font></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>

回答No.1

JavascriptはJAVAじゃねえっ！！！！！ それはともかく。 そもそも「コンテンツをウインドウの中央に」しようという意図の見える記述がどこにもありませんが抜粋ミス？ コンテンツ全体の中央寄せは、全体を包む<div>を用意してCSSでmargin:autoが一般的です。 ほかにもいくつか手法はありますが、「CSS　ボックス　センタリング」で検索してお好みの方法を使えばいいかと。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • 他のページに移ると、テーブルの縦のサイズが短くなる？

    WINXP、IE6を使っています。 最上段に、リンクバーを作り、その下にテーブルでレイアウトしています。 設定した直後に表示させると、うまくゆくのですが、他のページに移り戻ってきますと、縦のサイズが短くなって、最下段の画像が下から浮いています。 サイズを変えても、結果は同じです。 (コード) <body topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" background="top1.jpg> リンクバーのコード省略 <table border="0" cellspacing="0" cellpadding="0" width="100%" height="96%"> <tr valign="top"> <td> </td> <tr valign="bottom"> <td align="right"> </td> </tr> </table> </body></html> どこが悪いのでしょうか？ お分かりの方、教えてください。 よろしくお願いします。

  • テーブルが左右に動いてしまう。

    テーブルを中央に配置してレイアウトしようと思っています。 が、リンクをクリックして、IE6.0ブラウザの「更新ボタン」を押すと左右に5ピクセルほど動きます。 交互に押すたびに左右へ動いてしまいます。 これはバグ？なのでしょうか？ 回避する方法はありますか？ できればCSSを使わずに、と思っているのですが。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>中央寄せ</title> </head> <body bgcolor="#FFFFCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center"> <table cellspacing="0" cellpadding="0" width="750"> <tr> <td> <p><a href="1.html">NEXT</a></p> </td> </tr> </table> </div> </body> </html>

    • ベストアンサー
    • HTML
  • Netscape7.1 での表示方法を教えてください。

    初めまして。 現在ホームページを作成中なのですが、以下のソースでページを表示しようとすると、 Netscape7.1だけ正しく表示されません。素人考えなのですがNetscapeではテーブル タグのheight="%"が無視されているように思えます。Netscapeで正しく表示される方 法をお教え下さると幸いです。よろしくお願い致します。 <html> <head> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div style="text-align:center"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="margin:auto;text-align:left"> <tr> <td height="6%" align="center" valign="center" bgcolor="#000000"></td> </tr> <tr> <td align="left" valign="top"> <iframe name="contents" src="a.html" width="100%" height="100%" style="border:solid 0pt;border-color:#000000;" scrolling="no" frameborder="0" allowtransparency="true"></iframe></td> </tr> <tr> <td height="6%" align="center" valign="center" bgcolor="#000000"></td> </tr> </table> </div> </body> </html>

    • ベストアンサー
    • HTML
  • このような外枠を作るにはどうすれば？

    今、下記のようなコードでＷｅｂサイトを作っています。 <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY BGCOLOR="#F0F0F0" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="760" BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#FFFFFF" align="center"> <TR> <TD WIDTH="760"> 【ここにコンテンツをいれこみます】<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </TD> </TR> </TABLE> </BODY> </HTML> http://www.kysmaq.co.jp/index.html のサイトにあるような影の付いた外枠を作りたいのですが、どのように作っていったらよろしいのでしょうか？ 影は画像で作っているのでしょうか？ ご教授ください。

  • cssでテーブルを中央配置にするには？

    よろしくお願いします。 テーブルを中央配置にしたいのですが、 <center>、<div align="center">は、W3Cの非推奨タグであるため、代替方法として、<div style="text-align:center">を使用してみたのですが、うまくいきません。 <body> <div style="text-align:center"> <table> <tr> <td>あいうえお</td> </tr> </table> </div> </body> としたとき、WinXP IE6.xではテーブルが中央に配置されるのですが、WinXP Netscape 7.x では中央に配置されませんでした。どなたか解決策をご存知でしたらご教授願います。よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLタグについて

    <!-- #EndEditable --> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="古いデーター/text.css" type="text/css"> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="5" marginwidth="0" marginheight="5"> <table width="760" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><div align="center"><img src="toppu2.gif" width="700" height="92"></div></td> </tr> </table> <div align="center"> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img src="botan4.gif" width="700" height="57" border="0" usemap="#Map6"></div></td> </tr> <tr> <td><div align="left"><!-- InstanceBeginEditable name="contents" --> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 　上記のタグで 【<link rel="stylesheet" href="古いデーター/text.css" type="text/css"> 】が文字化けしてるから可笑しいと思うのですが、これを テンプレート上で下記のように修正してもエラーが出て 上手くいきません。 <link rel="stylesheet" href="../../text.css" type="text/css"> 　この他におかしい部分が多分あると思うのですが、 そこをお教えください。 　宜しくお願い致します。

  • HTMLをCSS

    ●<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> ●<table cellpadding="0" cellspacing="0"> 上記HTMLをCSSで設定するにはどういうソースになるのでしょうか？ 教えて下さい。

    • ベストアンサー
    • HTML
  • ネスケでの右余白

    よろしくお願いします。 IEだと隙間なく表示されるのですが、ネスケだと右余白が空いてしまいます。 (デフォルトでスクロールバーの領域なのでしょうか…?) 隙間なく表示するようにするにはどうしたらよいでしょうか? <body style="margin:0" bgcolor="#000000" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <table width=100% cellpadding=0 cellspacing=0 border=0 height=100> <tr height=50> <td bgcolor=#ff6600>&nbsp;</td> </tr> <tr height=50> <td bgcolor=#00ccff>&nbsp;</td> </tr> </table> 以下内容－－－－

    • 締切済み
    • CSS
  • コンテナ内で文字を中央に表示したい

    <div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • 更新するとずれる？

    ホームページビルダー8でトップページを作成しました。 <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> の下にすぐ<table>をつくりその中にメニューアイコンをいくつか並べました。もちろん<tr><td>で区切っております。 さて、アップロードしきれいに仕上がったのですが、更新（リロード）すると中の画像が微妙ですが位置がずれるのです。これはなぜなんでしょうか？ 以後更新してもそのままなのですが、再度ＵＲＬをたたくとずれてます。・・・？ 何か原因があるのでしょうか？だれか経験あるかたご教授おねがいします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する