こんにちは。
HTMLについて、最近いろいろ考えるようになりまして。。。
IE・NNの独自タグ(以下、独自タグ)がありますよね。例えば<body>タグに使う「leftmargin」「rightmargin」、「marginwidth」「marginheight」など。
自分のウェブページがあって、古いブラウザーにも思う通りのレイアウト表示が可能であるよう、基本仕様として「HTML 4.01 Transitional」(システム識別子なし)でHTMLを書いています。
ところが、最近、「AnotherHTML」を知り、文法チェックを行った結果、「エラーですよ」といわれてしまいました。独自タグだから使うな、スタイルシートを使いなさい ということだと思います。
ここで、ボクが知りたいのは、
■1■
「HTML 4.01 Transitional」(システム識別子なし)で書く場合、独自タグを使ってはいけないの?
■2■
エラーがいやだから、独自タグを全部取っ払って、スタイルシート対応させたらエラーは消えるかもしれないけど、「表示」のほうは大丈夫なの?
以上の2つです。
これといった基準がないようようには思いますが、詳しい方、ご意見を聞かせていただけますか。
どうぞ宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
IEではそれほど問題ではありませんが、確かにNN4.Xまでを視野においた場合、NN用のmarginwidth等は記述しないとmarginが出てしまいますね。
いくら、CSSで<body>に「margin:0px;」としても、NN4.XはCSS導入が不完全(バグではなく不完備)なので、marginが出てしまいます。あとNN4.Xは、前者のようにCSS不完全なので、<h>や<p>などの「margin」を「0」にしても1知行分開いてしまいます。よって、NN4.Xまで視野におき、IEも視野においた場合のCSSの使用は限られてしまいます。
例えば、<h1>見出し</h1><p>本文</p>として、通常、見出しと本文の間に1行分隙間がでますが、これをCSSでくっつけたい場合、<h1>と<p>タグに「margin:0px;」を指定すると隙間が「0」になるのですが、NN4では、空いたままなので、デザイン上統一させるために、<h>や<p>は一切使わず、全て<div>でレイアウトするか、<table>を使用しますね。現在多くのサイトで<table>をレイアウトのために使用されているのはその名残だと思われます。
しかし、本来W3Cでは、レイアウトのために<table>を使うことは推奨されていません。ましてや、<h>や<p>を使わず、<div>のみでレイアウトするのは、HTMLの理論に反しています。HTMLではやはり、見出しがあって、必要ならば中見出しや小見出しがあって、本文や表があるべきです。つまり、
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>本文</p>
<h3>小見出し</h3>
<p>本文</p>
みたいになるのが本当です。
長くなりましたが、「Transitional」なら■1■は使えると思います。「stric」だと一応だめですね。
■2■上記長文を参考にして下さい。もしデザイン的に完璧なクロスブラウザを目指し、正しいHTML文法で作るなら、NN4.Xはあきらめるしかないかと思います。
実際、銀行やお役所関係でNN4.7を使っているところは見たことあるけど、それ以外でNN4.7をブラウザとして使用している会社などは私は見たことがないです。N6やN7はあるけど....。
丁寧なご指導をどうもありがとうございます。
非常にポイントがわかりやすく、痒いところに手がとどくといった感じです。
※やはり、「NN4.x」って問題児ですよね。
これを無視できないのが現状(クレジットカード会社のウェブサイト)なので、表示のために独自タグも(保険として)使わざるを得なんでしょうね。
No.3
- 回答日時:
1.について:
"W3Cが提案・推奨している基準に対して正しい"HTML文書を書くという観点からいうと、HTML 4.01 Transitionalで書く場合は、ブラウザが独自に実装した要素や属性は使えません。 HTML 4.01 TransitionalのDTDで定義された記述規則に則って記述していることを宣言している以上、そのDTDで定義されていない要素や属性値などを使用することは、厳密には出来ないことになります。
HTML-lintなどのHTMLの文法チェッカでエラーとして引っかかっているのは、それを端的に示していると考えてよいでしょう
ただし、独自の仕様を取り込んでいるブラウザについては、HTML 4.01 TransitionalのDTDにない要素の記述についても、ブラウザ独自の解釈を行って、そのまま反映することがあります。 それは、HTMLの記述の正当性とは無関係に、解釈されると思います。
2.について:
独自の要素や属性を排除して、スタイルシートでレイアウト・デザインを整えた場合ですが、スタイルシートを正しく解釈できるブラウザであれば、スタイルシートの記述を誤らない限りは、そのHTMLの表示に問題が出ることはないでしょう。
逆に、スタイルシートにまったく対応していないブラウザであれば、そのHTMLの表示は、スタイルシートで指定したデザイン・レイアウトが一切反映されない表示になります。 こちらの場合、HTMLの書き方によってその影響は変わります。 ホームページビルダーのどこでも配置モードのようにスタイルシートでのレイアウトに過度に頼っている場合は、その文書の編集の手順によっては、まともに見られたものではなくなるかもしれませんし、スタイルシートでの装飾を適度に抑えていれば、プレーンテキストのような味気ない表示になるだけですむかもしれません。
また、Netscape 4.xxのように、スタイルシートの実装にバグの多いブラウザの場合、いろいろなところでスタイルシートの反映具合が異常になることもあります。 このケースへの対応は、非常に困難を極めると思います。
スタイルシートをレイアウトの主体にすることで被る影響については、閲覧側がどのようなブラウザを利用しているのかを、デザイナとしてどう評価するかによって、異なって見えると思います。 スタイルシートに未対応ないし対応に欠陥が多いブラウザの利用者が多いと考えれば、スタイルシートを主体的に使うのは、正常な表示を提供できないという点で、大きなリスクを背負うと考えられます。 逆に、スタイルシートに対応したブラウザを利用している人が大多数と考えていれば、大して問題はないと判断するのが普通でしょう。
スタイルシートの全面的な使用の可否については、最終的にはやはり、そのページに対して要求されていることに対する、デザイナのさじ加減で決められることなのではないかと思います。 想定される閲覧者の環境の大多数で正常な表示を確保するために、HTML 4.01についてvalidな文書ではなくなる(HTML-lintやW3CのHTML Validatorで警告される記述を取り入れる)ことを選ぶのも、現状では一つの実際的な判断とも思いますし、一部のブラウザでは正常に表示できないことを承知の上で、validな文書を公開することに重きをおくのも、一つの立派な選択肢でしょう。
参考になれば…
アドバイスをいただきまして、どうもありがとうございます。
>HTML-lintなどのHTMLの文法チェッカでエラーとして引っかかっているのは、それを端的に示していると考えてよいでしょう
→Transitionalの標準モードでのエラーだと知りつつ、「HTML-lint」のエラーを凄く気にしていました。
ぼくの場合、「互換モード」想定なので、お話とおり「端的なエラー指摘」として受け止めます。
No.1
- 回答日時:
「marginwidth」「marginheight」はフレームに与える属性ですよね?
でしたらHTML4.01 Transitionalではなく、
HTML4.01 Framesetを宣言しなければなりませんが。
1.
HTML 4.01 Transitionalを宣言するのならHTML 4.01 Transitionalに定められたものしか使ってはいけません。
2.
「表示」に限っていえばスタイルシートの方がHTMLよりも優れていると思います。
むしろleftmargin属性などを使うよりはいいかと。
参考URL:http://openlab.ring.gr.jp/k16/htmllint/tagslist. …
この回答への補足
早速のご回答をどうもありがとうございます。
ちょっと補足をさせてください。
>「marginwidth」「marginheight」はフレームに与える属性ですよね?
→お話の通り、フレームの余白指定用の属性でもありますね。ぼくの質問では、<body>タグに記述する属性としての「marginwidth」「marginheight」(←NN用)です。
(「LEFTMARGIN」「TOPMARGIN」はIE専用属性)
ちなみに、フレームページは一切使用していません。
---
>2. 「表示」に限っていえばスタイルシートの方がHTMLよりも優れていると思います。
むしろleftmargin属性などを使うよりはいいかと。
→見栄えに関して言えばおっしゃるとおり、CSSのほうがずっといいと思います。ただ、ぼくが心配しているのは、NN4.xまで考慮したときに、やはり見栄えのほうをCSSだけに頼るのは危険ではなかろうかという部分です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
inline-blockを上下中央揃えに...
-
画面を縮小するとカラムが落ち...
-
セクションをdivで囲むと見出し...
-
1時間30分を簡単に表したいで...
-
ヘッダーを左右に二分割する方...
-
<div>テキスト</div>
-
テキストの揃え方について
-
「見出し画像+小見出し」と「見...
-
リストで画像を右に表示したい
-
XHTMLでループ処理のやり方
-
カラム落ちの対処法について
-
画像の横にテキストを縦方向中...
-
<div>で改行させない方法
-
div要素が重なってします
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報