- 締切済み
GoLiveで作ったHPのブラウザ表示
GoLive CS2でHPを作成しています。 GoLiveで作ったHPをIE6とoperaで確認してみたのですが、表示がそれぞれ異なっています。 具体的に言うと一番上に表示されている画像や文字がoperaでは隙間無く表示されているのですが、IEでは一文字分程度の空きができてしまっています。空きができないようにするにはどの部分をいじればいいのでしょうか？ それから、より多くのブラウザでレイアウトが崩れないようにするにはどこを意識して作ればいいのでしょうか？ ご教授お願いします。
- neko3214
- お礼率73% (14/19)
- ホームページ作成ソフト
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Phoebastria
- ベストアンサー率21% (177/817)
見た所あまりCSSとXHTMLについては勉強なされていないのでしょうか？ 一度調べてみる事をオススメします。 質問の「隙間」についてですがマージンの設定がされていないように思います。cssファイルを見たわけではないので何とも言えませんけど。 色々なブラウザで解釈が違うので、最初の方の回答にあるようにCSSハックを行わなければいけないわけですがまずそれ以前にCSSとXHTMLについて勉強して下さい。 とりあえず気になった所を列挙してみます。 ・xhtmlなので<?xml version="1.0" encoding="UTF-8"?>のような宣言をDOCTYPEより先に書いておきましょう。 ・metaのgeneratorは特に意味がないので消しましょう。 ・外部cssがあるので、htmlにstyleを書くのはやめましょう。（body { color: black;～の部分です） ・cssを使っているので<meta http-equiv="content-style-type" content="text/css" />も追加しておきましょう。 ・<div align="center">はやめましょう。cssでやって下さい。 ・imgにborderを指定するのはやめましょう。cssでやって下さい。 ・tableは表を書く為のタグです。メニューに使うのはやめましょう。 ・メニューはliなどの使用が望ましいと思われます。 ・linkでtargetを使うのはやめましょう。制作者側から指定する物ではないです。 ・その他、cssで基本的に指定しておく物は指定しましょう。ex:マージン、パディング、フォント等
- Phoebastria
- ベストアンサー率21% (177/817)
具体的なソースを晒してもらわないとちょっと答えるのが難しいですね。
補足
すいません、やはり文章だけでは説明が難しいですね。以下の通りです。宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Adobe GoLive" /> <title>menu</title> <link href="../css/basic.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="screen"><!-- body { color: black; background-color: #fff; background-image: url('../images/bg/TT shima.gif'); background-repeat: repeat-x; background-position: 0 0; } --></style> </head> <body> <div align="center"> <img src="../images/rogo/TT_rogo.gif" alt="" height="51" width="214" border="0" /> <table width="281" border="0" cellspacing="2" cellpadding="0" bgcolor="white"> <tr> <td><a href="introduction.html" target="top"><img src="../images/rogo/introduction.gif" alt="" width="98" height="20" border="0" /></a><a href="" target="top"><img src="../images/rogo/blog.gif" alt="" width="41" height="20" border="0" /></a><a href="gallery.html" target="top"><img src="../images/rogo/gallery.gif" alt="" width="62" height="20" border="0" /></a><a href="link.html" target="top"><img src="../images/rogo/link.gif" alt="" width="38" height="20" border="0" /></a><a href="" target="_blank"><img src="../images/rogo/clap.gif" alt="" height="20" width="38" border="0" /></a></td> </tr> </table> </div> </body> </html>
- skycolor
- ベストアンサー率37% (3/8)
えーと、 ＞それから、より多くのブラウザでレイアウトが崩れないようにするにはどこを意識して作ればいいのでしょうか？ の質問しか答えられないので、申し訳ないのですが・・・。 プロの方はCSSハックという手法を用いてブラウザのバグを回避しています。 これはブラウザのバグを逆手にとって利用したものです。 詳しいブラウザのバグの回避法はこちら http://www.lucky-bag.com/archives/2006/06/css-hacks.html 「CSSハック」とgoogleなどで検索すればたくさん出てきますよ。
お礼
そんな方法があるとは…勉強になりました。ありがとうございました。
お礼
まだまだ至らない部分がありすぎて何から手をつければいいのやら…という感じです。少しずつ勉強してみようと思います。 ありがとうございました。