縦横ともに画面中央にレイアウトするには、どのような方法が良いのでしょうか?
http://www.salon-de.net/main.html
このサイトではテーブルを縦横100%にしてセルで中央にレイアウトされるように指定しているようですが、テーブル縦100%を認識しないブラウザでは中央レイアウトになりません。
http://www.parkhyatttokyo.com/
このサイトでは、なぜかフレームを縦2段で100%と相対に指定し、100%の方に内容の入ったHTMLファイルを表示させています。
画面中央にレイアウトされたページでは、このようにフレームを縦2段にして100%と相対に指定したものが多く見受けられますが、これにはどのような意味があるのでしょうか?
さらに、
http://www.toraya-cafe.co.jp/
では同様のフレームが2重になっています。
また、なぜか「TD」タグ内では「vAlign=center」「align=middle」のようにダブルクォーテーションを付けない書き方が多数派となっています。
この理由はなぜでしょうか?
詳しい方お教え願います。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
最良の答えは常にひとつ。
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<TR>
<TD align="center" valign="middle">
ここにコンテンツが入ります。
</TD>
</TR>
</TABLE>
縦100%に対応していないブラウザ、私は知りません。
あったとしても、サイト案の段階で切り捨てます。
古くても旧NNに対応していれば、文句を言うユーザもいませんから。
あと、質問と質問名からは、テーブルを使えば良いのか、フレームを使えば良いのかがわかりません。フレームを使うのなら、先のテーブルにIFRAMEを入れるか、定石通りページを5分割する方法をとれば良いでしょう。これなら縦100%に対応していないブラウザでもOKかな?
>なぜかフレームを縦2段で100%と相対に指定し~
100%でないページは、
・JavaScriptの変数や、カウンタ用のCGIを入れたりするため。
・アドレスバーにドメイン名のみを表示するため。あるいは、トップページをブックマークさせるため。
たいてい後者です。
>なぜか「TD」タグ内では~
こういったコードは人が書いたものではありません。
おばかなジェネレータ(DreamWeaverなど)が吐き出したものです。
よって、気にすることはありません。「valign="middle"」などときちんと書けば良いのです。
コードはシンプルに。頭で正しいと思えば、たぶん、それが正解です。
No.1
- 回答日時:
>縦横ともに画面中央にレイアウトするには、どのような方法が良いのでしょうか?
いろいろなサイトを周ってみてよさげなところからソースを引っ張ってくるのが簡単で手っ取り早いと思われます。
>テーブル縦100%を認識しないブラウザでは中央レイアウトになりません。
想定ブラウザにあわせたサイト作りをすればよろしいと思います。
>なぜかフレームを縦2段で100%と相対に指定し
これは表示してみれば分かるのですが、フレームで分けると、横のスクロールバーを消すことができます。
スクロールバーが表示されるのを嫌ったのでしょう。
>また、なぜか「TD」タグ内では「vAlign=center」「align=middle」のようにダブルクォーテーションを付けない書き方が多数派となっています。
この理由はなぜでしょうか?
たまたま多数見かけただけとは思いますが。
基本的に半角の英数字ならば普通に動くからクウォーテーションをつける手間を省いたのではないでしょうか。
多分「動けばいいじゃん」的な考えでしょう。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- WordPress(ワードプレス) ワードプレスで記事を書くスペースの横幅を広げたいです。 1 2022/09/24 18:16
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
- その他(IT・Webサービス) google サイトの目次表示について 1 2023/06/17 23:24
- Chrome(クローム) youtubeのサムネイルを縦4列配列にしたい。 1 2023/03/09 22:35
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- ホームページ作成・プログラミング 横にリンク先を3つ並べたいのです 3 2022/04/06 21:10
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
target="_parent"
-
フレームの片方だけを更新(リロ...
-
pythonのエラーについての質問...
-
フレームで指定している送信先...
-
フレームページが表示されない...
-
iPadの標準ブラウザでローカルH...
-
googleドライブで、PDFファイル...
-
HTMLからフォルダを開きたい
-
ページ内の画像だけを一定時間...
-
java_run.batがダウンロードで...
-
URLに「.html」の拡張子がなく...
-
ダウンロード完了後メッセージ...
-
、URL化させるにはどうしたらい...
-
CSSデータの作成方法について(...
-
iPhoneです。 Adobeフラッシュ...
-
form action="#"
-
Duolingo のソースコードの名前...
-
HTMLファイルのインクルードで...
-
Excelで、社外秘(閲覧のみ)と...
-
「同意しない」とジャンプでき...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
どのページもすべて同じURLなの...
-
フレーム内のPHPへPOSTで情報を...
-
pythonのエラーについての質問...
-
2つのページを重ねたい
-
フレームの片方だけを更新(リロ...
-
html 左メニューから右への表示...
-
URLを変えないで表示する方法
-
フレームページが表示されない...
-
スクロールできない
-
フレームで指定している送信先...
-
フレームが表示されない><
-
html リンクを別フレームに表...
-
ブラウザで4分割表示できますか?
-
直リンクとは。
-
frameの内容が表示されない
-
HTMLファイルの置き方による読...
-
CSSを使って画像をクリックする...
-
フレーム分割した全体をスクロ...
-
フレームの表示と非表示の切り替え
-
HPの一部に他のHPを表示
おすすめ情報