- 締切済み
ＩＥバーションアップによる反映について～有効なタグ
ＨＰを手打ちで作っています。 自分は、プラウザＩE８の前のバージョンのままで、 アップするかずっと迷っています。理由は、 ・レイアウトが崩れる可能性がある ・しかも、ほかのプラウザでは、同じように反映されない （例：ファイヤーフォックス） 主に、 画像を一枚背景にして定置し、 その上にスタイルシートで文字列を上書きし、 画像の配置と文字列の配置を、自由に（左上２０％の位置・右寄せ・中央寄せなど）決めたいのです。 自分のプラウザでは、一枚の画像で反映されているのですが、 ＦＦでは、画像が繰り返しされ、全面に反映されてしまったり、 画像一枚さえ反映されなかったりしています。 以下のようなタグは、古いのでしょうか。 <Style Type="text/css"> <!-- /*style*/ body {background-color:#ffffff; background-image:url(xxxx.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 50%; scrollbar-face-color:#ffa500; scrollbar-track-color:#ffffeo; scrollbar-arrow-color:#ff8c00; scrollbar-highlight-color:#ffffe0; scrollbar-darkshadow-color:#ff8c00; font-family:Tempus sans ITC;} A{text-decoration:none;} --> </Style> ・・・・・・・・・・ 回答していただきたい点は、 ・バージョンアップしても、対応でき有効なタグ選びにはどんな点に留意すべきか ・なおかつ、ＩＥ以外のプラウザでも、同じように反映して見てもらえるのかどうか ・一枚の画像配置の自由化、その上のテキスト列の配置の自由化 これが、簡易に指定できる、互換性ある有効なタグは、どういったものなのか 勉強不足なのは承知しております。 文字列ですが、主に、 div table で指定しています。 一面の例は以下です。 （こちらは、希望通り反映されています） ・・・・・・・・・・・・・・・・・・・・・・・ <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01//EN"> <html> <head> <title>yyyyyyyy</title> <STYLE TYPE="text/css"> <!-- /*STYLE*/ body{ scrollbar-base-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-arrow-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-track-color:#ffffff; line-height:140%; font-family:"MS UI Gothic" , sans-serif; font-size:11pt; background-color:#000011; background-image:url(xxxx.jpg); background-position:20% 20%; background-repeat:no-repeat; background-attachment:fixed; } A{text-decoration:none } html{ scrollbar-base-color:#ffffff; scrollbar-face-color:#e0eeee; } --> </STYLE> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <META http-equiv="Content-style-Type"content="text/css"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=euc-jp"> </head> <body> <body text="#BC8F8F"> <table width="60%"align="right"bgcolor="#BC8F8F"> <div align="right"bgcolor="#BC8F8F"> <br><br><br><br><br><br><br> テキスト部分 <br><br><br><br><br><br> </div> </table> </body> </html> ・・・・・・・・・・・・・・・・・・・・・・・ また、こちらは画像が繰り返されてしまっています。 ・・・・・・・・・ <Style Type="text/css"> <!-- /*style*/ body {background-color:#ffffff; background-image:url(xxx.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 50%; font-family:Tempus sans ITC;} A{text-decoration:none;} --> </Style> </HEAD> <BODY onContextmenu="return false"> <body bgcolor="#000022" text="#6495ed"Link="#6495ed"ALink="#4169e1"VLink="#1e90ff"basefontsize="4"style="scrollbar-3d-light-color:silver; scrollbar-arrow-color:#c2f500; scrollbar-base-color:#c2f500; scrollbar-dark-shadow-color:#c2f500; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#c2f500"> <table width="900"height="700"border="0"cellpadding="0"cellspacing="0"> <tr align="center" valign="top"> <td align="left" valign=middle"> <div align="left"valign="top"> <br><br><br><br> ～文字テキスト部分～ <br> </td></tr> </table> </body> </html> ・・・・・・・・・・・・・ 不備・間違い・改良点など、ご指摘していただければ幸いです。 これから参考に読む予定のサイト http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#minitoc よろしくお願いいたします。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
他のブラウザ、IE5,IE6,IE7,IE8でテストしましたが、IE5はmargin:autoに対応していないので左によります。その他のブラウザ、Opera,Firefox,safariもほとんど同じに表示されるでしょう。 もちろん、携帯電話やLynxのようなテキストブラウザでも・・ そしてなによりも、ソースがシンプルなのでコピーペーストも楽でしょう。スタイルシートを外部に置けば<style></style>も不要です。 添付はテキストブラウザのLynxのものです。検索エンジンや読み上げソフトはこのように読んでいるはずです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
長文ご苦労様です。・・ 私も、１５年来の手書派です。--何度もオーサリングツールに挑戦しましたが、使いこなせなくて。膨大なマニュアルを読むだけで頭痛がする。 あなたと私が違ったのは、私が始めたころはブラウザはNetscape2が登場したばかりでしたから、ずうっと他のMozaicなどブラウザでも確認し続けていたことでしょうね。 HTML3.2が登場したときは、豊富なデザイン要素に飛びついたのですが、1999年(12年前)にHTML4.01が勧告になって、それまでのHTMLが如何に間違っていたかと気がついて、そこから徹底的に修正を始めました。 2 HTML 4の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html ) を一度目を通されると良いです。 その後の悩みは、Netscapeを駆逐したIEによる(HTML4.1のスタンスに反した)独自仕様です。標準的なブラウザであるNetscape/Mozilaで作成し、IEでも一応表示できるようにするのが大変でした。慣れたらポイントさえ押さえておけば良くなった。 結果的に、IEもWeb標準に大きく舵を切ったため、今はとても楽になりました。 現在、IE7は6.33％、IE6が3.64％、IE5が4.87％（合計でも15％弱）と言う状況で、WEb標準でないブラウザはほぼ駆逐されました。 参考：日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html ) 今ある古いデータは残しておいて、新しいコンテンツは別途フォルダーを作成してそれに入れていけばよいでしょう。 【ざっとHTMLを拝見した限りでは】 ・プレゼンテーションに関わる属性がある。 ・デザインのために表を使用している。 ・行間を調整するために連続したBRがある。(BRは基本的にはまったく使用しない要素です) ・など・・ 14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )で指摘されているいくつもの非推奨マークアップが行われていることですね。 ★HTMLは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より この基本さえ理解していれば、HTMLはきちんとマークアップできるでしょう。 【CSS】 これは、ちゃんとしたHTMLが出来上がってからのことですが、 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) はCSSの基本ですからこれを抑えておくべきです。 1.3.3 簡略化プロパティ（Shorthand properties） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/about.html#shorthand ) これも重要 HTML4.01の例 <body> <div class="header"> <h1></h1> <div class="summary"></div> </div> <div class="section body_text"> <h2></h2> <div class="article"></div> </div> <div class="section annotation"> </div> <div class="footer"> </div> </body> HTML5の例(まだ勧告にいたっていない流動的) <body> <header> <h1></h1> <div class="summary"></div> </header> <section class="body_text"> <h2></h2> <article></article> </section> <section class="annotation"> </section> <footer> </footer> </body> ・・HTML5ではHTML4で不足していた、文書構造を示す要素が多く追加されています。HTML4のマークアップにも参考になるでしょう。私は動画などが多いわけじゃないので基本は、今後もHTML4.01の予定です。 HTML5で採用された要素は、HTML4で一般的に使われていたclass名(日本ではwraperとかcontenerとか変なのが多い)を要素として独立させたのですので、逆にclass名として参考になります。これなら検索エンジンも理解できるしね。 絶対に必要な資料 HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ・・すべてに目を通しておく Cascading Style Sheets, level 2 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) ・・ 書いたら必ずチェックする。その指摘で直せば早い・・ The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 文書が意味的に正しくマークアップされているかはできない。
補足
ご回答ありがとうございます。 詳細はこれからですが、 <br>を使わないというのは、どういうもので代用できるのですか？ また、画像の位置をアタッチメントで、 テキストの位置をテーブルで、 これのどことどこに問題があるのでしょうか。 ベタの画像の上に、スタイルシートで上書きする、 この考えだけでは甘いのでしょうか。
補足
今のところ、ソフトを使う気持ちはないのです。 しかも、私の使っているＨＰは、 コピペしてＵＰすれば、自動的にＵＰしてくれるので、 ここ数年、ずっと同じページは同じタグ並びをコピペしてきました。 私のテキスト部分は詞なので、 改行しなければ、ならない理由があるのですが、 そのために、<br>以外、何を使用すればいいのかわかりません。 （<p>ならば有効なのでしょうか？） 私の考えでは、 画面の中に、配置したい部分をテーブルか何かで範囲で決め、 その中に、文字を改行させて反映させることは、 そんなにむずかしいことなのか、ということです。 具体的に、タグでお応えいただければ幸いです。 つまり、 <div align>で段落の位置を指定することが古いのなら、 代替のタグにはどういったものがあるか、ということです。 いったんレイアウト用のタグ並びを打てば、 同じパターンを、ページを新しくするたびに、 コピペすればいいだけなのです。 一通り、ルールを知ることは必須だということは承知ですが、 抜粋を教えていただけないのでしょうか。 少なくとも、 私自身は、プラウザＩＥを使用し続けるつもりですが、 なるべく多くの方に、レイアウトを崩さず観ていただきたいので、 問題点だけを改善したいという動機のみ、あるだけなのですが。 あわよくば、改善する、 できなければ、自分が見られる自己満足だけでも、ＯＫなんです。