マルチブラウザ対応HTML作成ソフトについて

質問

Dreamweaver MX 2004であるサイトを作成したのですが、Mozilla Firefoxで見ると、罫線に色をつけていないのに枠線に色が付くなど、Internet Explorer(WIN）とは異なる表示が出ることに悩んでいます。ブラウザ間で異なるHTMLの解釈を行うことは理解できるのですが、私のようあまりテクニカルでない人間でも、WinでもMacでも一般的に使われているブラウザで大きな差異が無くHTMLを作成できるオーサリング・ソフトはあるのでしょうか。それとも、どれもタグ・ベースで見ていかないといけないのでしょうか。よろしくお願いします。

回答No.5

神崎 渉瑠（@taloo） · ベストアンサー

> WinでもMacでも一般的に使われているブラウザで大きな差異が無くHTMLを作成できるオーサリング・ソフトはあるのでしょうか。
テーブルレイアウト、画像使用のデザインでは、Dreamweaverの得意分野でもありますし、
メジャーなグラフィカルブラウザではDreamweaverのプレビューとほぼ同じ表示になると思います。

スタイルシートデザインでは、オーサリングソフトとしてはないと思います。
現状、Dreamweaverがオーサリングソフトの最高峰だと思いますが、
それでも対応していないわけですから。

Firefoxにアドオンを使って、HTMLやスタイルシートを編集する機能を持たせることが出来ますので、
それを使って、実際のブラウザでプレビューしながら編集することが出来ます。
「プレビュー機能」としてみた場合、Dreamweaverのプレビュー画面よりかは優秀と思います。

・HTMLタグやスタイルシートをどの様に書けば、ブラウザでどの様に表示されるか
・Dreamweaverでどの様に指定すれば、ブラウザでどの様に表示されるか

どちらかを必ず覚えなければなりません。
Dreamweaverの操作方法を解説されているサイトや書籍は少ないので、どうしても自分で試行錯誤することになりますが、
タグ、スタイルシート手打ちにしても結局試行錯誤になります。

Firefoxの拡張機能は「スタイルシートを覚える＋Firefoxのアドオンの使い方を覚える」という方法になります。
もちろんFirefoxを使用したプレビューになりますから、IEで表示するときに違う表示になると思いますし、
そのときはまた、それように調整しなければなりませんし、そこにはまた試行錯誤が待っています。

参考URL：

http://www.mozilla-japan.org/products/firefox/,http://editcss.mozdev.org/,http://chrispederick.com/work/webdeveloper/

お礼

詳細なご説明有難うございました。
取り合えずDreamweaverを最新バージョンにアップデートして、もう少しスタイルシート等を勉強しようと思います。

回答No.4

sikiminomo

>一般的に使われているブラウザで大きな差異が無くHTMLを作成できるオーサリング・ソフトはあるのでしょうか。

今の所ないと思います
私はDreamweaver8を使っていますが基本知識が足りないので、ブラウザチェックとサイトレポート機能を使い、地道に直しています。

他の方も書いていらっしゃいますが、実はInternet Explorer(WIN）だけ表示がおかしいというケースも多いみたいですよね。
web標準で考えるプロに言わせると、実はIEの方がおかしい
「何故、こんな表示になるんだ？」と言いたい位だそうです。
でも絶対的にユーザー数が多いし、アクセス解析かけると訪問者の殆ど『IE』なのが丸わかりだったりします。
どのブラウザから見ても完璧なサイトは素晴らしいと思いますが

　HTML・CSSの本でIEでしか使えないもの等は避ける
　取り敢えず80点の出来で我慢

あとは素人の趣味だと割り切り、デザインの完璧さよりも、サイトの中身(コンテンツ)を充実させる方が、本人にも閲覧者にも良いと思います。

回答No.3

MAN_MA_RUI

ここら辺参考にソースを検証すると良いです。
http://openlab.ring.gr.jp/k16/htmllint/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

ちなみにCSSに関してはいろいろな都合があると思うのでエラーをゼロに出来ないかもしれませんがなるべくエラーを出さないという方向で行くと良いと思いますよ^^

回答No.2

MAN_MA_RUI

実際に表示を検証していくしかないでしょうが、あまり特定のブラウザに依存しないソフトを何か補助的に使ってみたりウェブ標準を意識してみるといいかも知れません。
オーサリングソフトを使うと無駄なコードを書いてしまうことが多いと思うので、最終的にはやはり表示確認で細部を手直しするしかないと思いますが…。

お礼

ご回答有難うございます。
いただいたアドバイスに従い、HTML検証ソフトのようなものをためてしてみようと思います。

回答No.1

RH01

こんにちは。
ブラウザ間の表示の違い、はWEBサイト作成しているとぶちあたる大きな壁ですよね！私も日々悩んでます。。

Dreamweaverはプロも使っているソフトなので、結構よくできたソフトだと思います。
でも、そこまではすごくないというか、やはり自分でタグベース、CSSベースで対応させていく必要はあると思います。

ただ、一応「ブラウザエラーチェック」と言う機能がついていて
「コード 分割　デザイン」　ボタンのあるところに
黄色い△の中に！が書いてるマーク（わかりずらくてすみません）があって、そこをクリックして、次のエラー、とやると、登録してあるブラウザーで対応していないcssなどのエラーを教えてくれます。
万能か、というと、参考程度にしかなりませんが。

特に、windowsで作成している場合は、Macのブラウザsafariが入っていないので、結局この機能も使えません。

参考URL以外でもバグを紹介しているサイトもありますし、
変だ！と思う項目を、そのまま検索すると、案外答えが出てきたりしますので、そういったところから情報を仕入れて自分で対応するしかないかもしれません。
ちなみにどちらかというと、Firefoxがおかしいと言うよりはInternetExplorerがおかしい場合が多いです。
ネスケ、Firefox、safari、Operaで同じ表示なのにIEだけ違う・・というのが多いので。

このブラウザ間での表示の差にどこまで対処するか、にプロとアマの違いがあるんじゃないかって思うくらい、案外大変な作業ですが、複雑なfloatとかしない限りは、よくあるバグや違いにだけ気をつければ大丈夫だと思います。

参考URL：

http://cssbug.at.infoseek.co.jp/index.html

お礼

早速のご回答有難うございます。
やはり、タグベース、CSSベースで対応していくしかないのですね。
素人には、やっかいな問題です。