HTMLコーダーをやっています。ブラウザの対応について教えてください。私は、社会人一年目のHT

Question

HTMLコーダーをやっています。ブラウザの対応について教えてください。


私は、社会人一年目のHTMLコーダーです。

ブラウザの対応で悩んでいます。

普段はSafariやChromeで確認しながらコーディングをしています。

しかし、IEやfirefoxで確認すると、レイアウトが崩れていたり、line-heightが消えていたりと、何かと不具合が生じています。

簡単にブラウザごとに表示を合わせるプラグインはないのでしょうか？

皆さんの会社では、どのように対応していますか？

ORUKA1951 · Accepted Answer

HTML4.01が勧告(1999年)されて、すでに15年・・・今更の感がしますが。

当時から「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」とされていたので、strictで作成し、かつIEが標準モードで動作するようにDOCTYPEを記述していれば、それらのブラウザ間の誤差はほとんどなくなるはずです。
＞普段はSafariやChromeで確認しながらコーディングをしています。
　なぜ？？？Firefoxが最もウェブ標準に準拠しています。
　ウェブ開発は、し、代替スタイルシートも扱えるのでプレゼンテーションもいろいろ試せるし、なによりも開発ツールの豊富なfirefoxを使われていると思います。firebug、DOM Inspector、FireMobileSimulator、openWith、Html Validator、Server Switcherとか必要でしょうに・・

　対応ブラウザは、基本的にはIE10以降、Chromeでよいでしょう。タブレットやスマホを考慮するなら、Safariも対象としなければなりませんね。
日本のブラウザバージョン別シェアグラフ2015 （StatCounter Global Statsより）( http://lhsp.s206.xrea.com/misc/browser-share-ver … )
　ヨーロッパ--特にドイツでは圧倒的にfirefoxが多いですし、世界的にはChromeが多い。

　すなわち、HTML4.01でしたら
<!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>Untitled</title>
<meta name="author" content="IRUKA">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/default.css" title="汎用">
<link rel="styleSheet" type="text/css" media="print,handheld" href="./styleSheet/print.css">
<link rel="START" href="../index.html">
<link rel="NEXT" href="./page1.html">
<link rel="SHORTCUT ICON" href="/favicon.ico">
<link rel="ICON" href="/favicon.ico">
</head>
で書いていく。
　これで、基本的にはブラウザ間の差異はほとんどないはずです。

もちろん、HTMLには文書構造しか書きませんし、プレゼンテーションはすべてスタイルシートになります。現在のWeb標準は、HTML4.01strict + CSS2.1 と考えてよいでしょう。
1) プレゼンテーション的な指定はHTMLでは行わない。構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )は基本ですけど・・

　ただし折角その文書定義で記述しても互換モードでブラウザが解釈すれば意味ないですから、きちんと「DOCTYE スイッチ」を指定しておく。(上記ソースはそうなっています。)

　例えば、
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　[表示]メニューから[スタイル(シート)]へ進んでいろいろなデザインを選択してみても、IE９以降とfirefox3.5,4に差はないはずです。もちろんChromeには代替スタイルシートを利用できません。タブレットやスマホ用のブラウザも基本的には代替スタイルシートは利用できない。
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で確認してごらんなさい。

　HTML5やCSS3への対応ですが、HTML5はjavascript(html5.js)で対処して、CSS3はそれが効かなくでも良いように記述していけばよいです。

　なお、段組みにfloatを使ってはならないとか・

gao57830 · Answer

＞Macでもこのソフトを使えばIEのブラウザで見ることができるってものでいいんですよね？
仮想マシンのイメージファイルです。
VirtualBoxやVMwareをインストールすれば使えます。

gao57830 · Answer

IEのテストなら、マイクロソフトがこんな物を出しています。
https://dev.windows.com/en-us/microsoft-edge/
IE6～IE11、Edgeまでテスト出来ます。

zircon3 · Answer

> 特に今回の事で教えていただきたかった事は、IEでline-heightの高さが消えてしまうということでした。

これもまたIE 9以降では結構有名な話。
　とりあえず「ie line-height 効かない」で検索。。。

zircon3 · Answer

えっと。。。
Webサイトの構築、Wenコンテンツ開発を生業とする企業であれば、Webブラウザの違いにどのように対応するかはコーダー個人の知識や技術ではなく組織として持っているのが普通です。
お勤めになられている企業がそういったノウハウや開発標準を持たない組織なのでしたら転職を考えるのも一つの方法です。
個人としては困ったことがあった際にこのような匿名の誰かに支援を求める気持ちはよく理解できますが、一企業として他社様からお金をいただいて請け負った仕事の実現方法をこういった場を使って解決しようとする姿勢は「ちょっと違うのではないか？」と個人的には思います。

少なくとも「HTML ブラウザ 対応」といったキーワードで検索するとそれなりに詳しく解説したページがたくさんヒットするのではないでしょうか？
Webコンテンツの開発本などでも説明されていたりします。
そういった勉強・情報収集の努力（というほどのことはない。プロなのだから）をされたうえでのご質問でしょうか？

ついでに。。。
そのそも「普段はSafariやChromeで確認しながら・・・」というのがちょっと「？？？」です。会社の意向ですか？　Webブラウザのシェアのニュースなどは参照されていますか？
ChromeはよいとしてIEを差し置いてなぜSafari。(^^;
しかもIEはメジャーバージョンごとにいろいろ面倒がある結構やっかいな子であることは個人でホームページを作っておられる方でも知る人の多いもの。。。
うぅ～ん。どうなんでしょう。。。

HTMLコーダーをやっています。ブラウザの対応について教えてください。私は、社会人一年目のHT

HTML4.01が勧告(1999年)されて、すでに15年・・・今更の感がしますが。

＞Macでもこのソフトを使えばIEのブラウザで見ることができるってものでいいんですよね？

IEのテストなら、マイクロソフトがこんな物を出しています。

> 特に今回の事で教えていただきたかった事は、IEでline-heightの高さが消えてしまうということでした。

えっと。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング