- ベストアンサー
ホームページのレイアウトが崩れないようにするには？
今、ホームページを手打ちで作ってます。 マニュアルを見て作っているのですが、初心者なので ちょっと困ったことがありました。 現在、800×600の画面サイズで作成中なのですが、 ブラウザを大きくしたときや、文字のサイズを大きくしたときに レイアウトが崩れないようにするためには、どんなタグを 追加したらいいのでしょうか？ 現在の状態は、画面の線が途切れたりしています。 どなたかご存知でしたら教えて下さい。 よろしくお願いいたします。
- ramji_hime
- お礼率29% (47/162)
- ホームページ作成ソフト
- 回答数6
- ありがとう数0
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
<HEAD> <SCRIPT type="text/javascript"> <!-- function fc(){ if( document.getElementById ){ if( document.body.clientWidth ){ wb = document.body.clientWidth - 600; } else { wb = innerWidth -600; } if(wb > 0){ document.getElementById("Layer1").style.left = wb / 2; } } if( document.all ){ wb = document.body.clientWidth - 600; if(wb > 0){ document.all["Layer1"].style.pixelLeft = wb / 2; } } if( document.layers ){ wb = innerWidth -600; if(wb > 0){ document.layers["Layer1"].left = wb / 2; } } } //--> </SCRIPT> </HEAD> <BODY onLoad="fc()"> <DIV id="Layer1" style="position: absolute; width: 600px;"> 本文ＨＴＭＬ </DIV> </BODY> とすれば、幅600のコンテンツが画面の大きさにかかわらず中央に表示出来ます 単純に<DIV>以下レイヤーで作っても良いですが、デカイ画面で見た時に左に引っ付いてしまいますので、中央に持ってきました 後は、スタイルシートを使ってデザインするだけですが、ブラウザによって表現が違いますので、あまり深く追求しないほうが良いと思います 尚、このスクリプトはＮＮ４（６、７、Mozillaを含む）、ＩＥ４以上で動作します
その他の回答 (5)
- peron
- ベストアンサー率45% (43/95)
>rightegg様 そう言って頂けるとホッと致します （書いた方が、いややめとこ と悩みました） 昔は常套手段だったんですから （私もしっかりやってました） 横レスになってしまいました ご質問者の方をないがしろにしたら怒られますね ごめんなさい（反省）
テーブルタグで作成した場合表示を拡大するとレイアウトは崩れます。 この場合の常套手段は空白の画像を用意して、調整します。 しかし今はやりのユニバーサルデザインの観点から考えると、 プラウザの種類によって意図しないレイアウトに成ります。 例えば、このページを携帯電話でアクセスすると、大概はメモリ 不足で表示出来ません。 皆さんが書かれている様に、レイヤーシート、スタイルシートの採用が推奨されています。 <DIV id="main1" style="position:absolute; width:270px; height:290px; z-index:2; left: 550px; top: 10px;"> 本文 </SPAN> </DIV></div>
- rightegg
- ベストアンサー率41% (1357/3236)
横レスですみませんね。 ＞peron様 いや、別に良いですよ。 僕も知っていながら書いた答えですし。 確かに補足すべきだったかもしれませんね。 ＊というわけで今さらながら補足。 テーブルのテクニックは、古くから使用されているものですが、ユーザー側の生み出したテクニックみたいなものでして、W3Cはじめ、業界の流れとしてはマルチソースを目標にスタイルシートの導入が進んでいます。参考書関連でもそういうふうに解説されているはず。ただ、HTMLを始めたばかりのひとには少し重荷なんですよね、いまだに。 というわけで、手っ取り早い方法として紹介しましたが、スキルアップするとともにスタイルシートへ移行するのがベストでしょう。 ....こんな感じですかね（苦笑）。
- peron
- ベストアンサー率45% (43/95)
＃２様ごめんなさい ツッコミを入れたくはなかったのですが、 Ｗ3Ｃ勧告書の表のカテゴリーに下記のような記述があります 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 下記ＵＲＬの11番 テーブルを参照してください ※ 引用文は当ページからではありません（意味は同じです）
- rightegg
- ベストアンサー率41% (1357/3236)
こんにちは。 簡単なのはテーブルで区切ってしまう事。 サイズを固定し、改行もさせない。 さらに幅100%高さ100%のテーブルを用意し、 TDの設定をalign="center" valign="middle"にしてそこにメインコンテンツを含むテーブルを内包。 これでブラウザの拡大には耐えられます。 縮小に付いても、サイズを固定しておけばレイアウトが乱れず、スクロールバーへ移行します。 サイズが上手く固定出来ない場合はspacer.gif（透明のダミーgif）を利用して固定。 ＊テーブルは数値指定だけでなく、画像を伴うときちんと固定されます。 これ以上はケースバイケースなので何とも言えません。経験値でカバーしましょう。
