- ベストアンサー
tableの縦横センタリングについて
- HTML4.01のDOCTYPEをURL付きに変更した際、tableのセンタリングができなくなりました。横方向はできますが、縦方向がうまくいきません。
- ネット検索したいくつかの解決策も試しましたが、うまくいきません。テーブルのborder色を赤に指定していますが、この赤を画面の中央に表示させたいです。
- 画面サイズを変更してもセンタリングがうまくいかない問題について、アドバイスをいただきたいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たとえば、 ★Another HTML Lint Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みのHTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 ★印刷やガラケーには適用されない。 <!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" media="screen"> <!-- html{padding:0;position:relative;background-color:black;height:auto;height:100%;} body{position:relative;width:95%;height:95%;padding:0;background-color:gray;border:red solid 1px;margin:1.25% auto;padding:0;} p{height:50%;text-align:center;position:relative;margin:0;} p span{display:block;position:absolute;bottom:0;width:100%;} --> ＿</style> </head> <body> ＿<p><span><input type="button" value="新規(N)" tabindex="1" accesskey="N"><input type="button" value="変更(C)" tabindex="2" accesskey="C"></span></p> ＿<p><input type="button" value="戻る(R)" tabindex="3" accesskey="R"></p> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPEはそれで良いでしょう。 そのDOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&hl=ja )だと、すべてのブラウザが標準モードで動作します。 ※できれば、strictのほうが良いですよ。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 XHTML1.1、時期HTMLであるHTML5は、strictしかありません。 ★標準モードと互換モードの違い 主にIEが元凶なのですが、IE5あたりから、他のブラウザを蹴落とすためにIEは独自の解釈によるデザインを採用してきました。 ウェブがW3Cの規定するウェブ標準に変わっても、過去との互換のために古いモードを標準としてきました。 例えば、blockのサイズが標準では当然表示領域であるのに、borderの内側とか・・tableをheight:100%でウィンドウ高さにしてしまうとか・・・。数え上げたら切がない。 ところがさすがのIEも8以降は、標準モードをデフォルトにしましたが、それでも互換モードを前提でページには互換モードで起動するようにしていました。それがDOCTYPEにURLがあるかないかで判断していた。 すなわち、本来は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と書くべき( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#version-info )ものを、それが書かれていない不整なHTMLは互換モードで動作する!! ★標準モードにする利点 ・なんと言ってもブラウザ間の誤差がほとんどないこと ・tableはもっぱら表のために使用しなければならない。 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) 本題ですが、HTML自体は <!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"> <!-- --> </style> </head> <body> <p> <input type="button" value="新規" tabindex="1" accesskey="N"> <input type="button" value="変更" tabindex="2" accesskey="C"> </p> <p><input type="button" value="戻る" tabindex="3" accesskey="R"></p> </body> </html> で良いはずです。( http://www.htmllint.net/html-lint/htmllint.html ) あとはスタイルシートで・・画面サイズを変更しても、この赤(枠)が、画面横縦に中央に表示されるように指定すればよい。 DIVはデザインのための物ではありません。 DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )ものです。HTML5ではDIVはむやみに使えなくなります。
お礼
ORUKA1951 さん、ありがとうございます。 細かな説明をしていただき、感謝いたします。 tableを使ってのセンタリング、推奨されないこと理解しております。 cssがイマイチ苦手なので、ついtableのままにしておりました。 上記のように<p>などを使用するよう修正しました。 が、横中央はできても縦中央ができない。 で、 縦中央にすると横が中央にならない。 なかなか一筋縄ではいかないようです。 tableだと楽でしたのに、cssでの縦横センタリングは 結構複雑ですよね。 縦横組み合わせのサンプルを試しても うまくいきません。 この辺りのアドバイスをいただけると幸いです。 よろしくお願いいたします。
お礼
ORUKA1951 さん、ありがとうございます。 サンプルコードにて思ったように、縦横の自動センタリングがされることを確認できました！ 実際には、少し直す部分があり、ボタンの間隔をあけたり、サイズを大きくしたり、、、でテコヅリ、 ボタンとボタンの間隔を全角スペースであけることしかできなく、そこだけちょっとしっくりきませんが なんとか実際に使えるｈｔｍｌができました！ まだ今回のcssを正しく理解できないでいますが 少しずつ理解できるように努めたいと思います。 有難うございました！
補足
お礼をしてしまったので、この欄に追記させていただきます。 うまくいったと思ったのですが、 実際の運用にあわせて、このhtmlを window.showModalDialog で表示させたところ、ボタンがはみ出してしまい 正しく表示されませんでした。 showModalDialogでは幅と高さを小さく指定しているので 大きくして見ましたが、結果は同じでした。 htmlを直にクリックすると思ったように表示されます。 showModalDialogだと何が違うのでしょうか？ これは別スレッドにしたほうがいいでしょうか。。。