このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Firefox:動画を全画面にしたときに出るメッセージを消す (01/23)
  • iPhone:ネット検索をやめて「調べる」の表示を速くする (01/20)
  • スクフェス:「キャラスコア比較」が新仕様に対応しました (01/18)
  • ニコニコ動画:再生速度が変更可能になったから使ってみた (01/16)
  • Firefox:誤爆や競合を起こすショートカットキーを無効にする (01/13)
  • 管理人より
    2017年もよろしくお願いします。

    IE7の新機能を使うときの注意点

    このエントリーをはてなブックマークに追加
    IE7


    今回は私が苦労した Internet Explorer 7CSS注意点についてまとめようと思います。
    この記事は自分用の備忘録のような扱いとなりますが
    もし同じことで困っている人がいたら少しでも参考になれば幸いです。


    CSSの解釈方法を切り替える「標準モード/互換モード」

    CSS(スタイルシート)の解釈はブラウザ毎に多少間違いがあります。
    この解釈の間違いは新しいブラウザがリリースされる度に徐々に修正されています。

    一見とても良いことに見えるのですが
    CSSの解釈に修正,変更があったことで
    前バージョンのCSS解釈に合わせて作ったホームページのレイアウトが崩れるかもしれません。

    ホームページを作った人はどう思うでしょう?
    「せっかく作ったのに新しいバージョンの解釈に合わせて作り直さなくちゃ、大変だ…(泣)」

    これは困りますよね。


    実はちゃんとこのような困った状況が起こらないように。
    ブラウザには「互換モード」と「標準モード」の2種類が用意されています。

    「互換モード」は前バージョンのCSS解釈で表示するモード
    「標準モード」は新バージョンで変更,修正されたCSS解釈で表示するモードです。

    IE7で同様に考えてみると
    「互換モード」はIE6のCSS解釈(間違ったCSS解釈もそのまま)で表示するモード
    「標準モード」はIE7のCSS解釈(間違ったCSS解釈は修正済)で表示するモードです。

    ホームページの制作者はこのモードを自由に選択できるようになっています。

    IE7のCSS解釈に基づいてホームページを作ったのに
    「互換モード」で表示してしまっては何の意味もなくなってしまいます。
    モードの選択を間違えないようにしましょう!


    「標準モード/互換モード」を切り替えるDOCTYPE宣言

    このモードの選択をするには「DOCTYPE宣言」というものを使います。
    このDOCTYPE宣言は
    HTMLタグ<html>よりも前、つまりHTMLの記述の1行目に書く必要があります。

    DOCTYPE宣言には次の3種類があります。

    HTML 4.01 Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    IE7が「標準モード」で動作し、IE7から新しく実装された機能も使うことができます。
    ただし、一部のタグやフレームを使用する事が出来ません。
    「"http://www.w3.org/TR/html4/strict.dtd"」の記述を省略しても「標準モード」で動きます。

    HTML 4.01 Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    IE7が「標準モード」で動作します。
    HTML 4.01 Strictで使えなかったタグが使用できるようになりますがフレームは使うことができません。
    「"http://www.w3.org/TR/html4/loose.dtd"」の記述を省略すると「互換モード」で動きます。
    「互換モード」ではIE7で新しく実装されたCSSを使うことはできません。

    HTML 4.01 Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    IE7が「標準モード」で動作します。
    タグに加えHTML 4.01 Transitionalで使えなかったフレームも使用できるようになります。
    「"http://www.w3.org/TR/html4/frameset.dtd"」の記述を省略すると「互換モード」で動きます
    HTML 4.01 Transitionalのときと同様に
    「互換モード」ではIE7で新しく実装されたCSSを使うことはできません。


    現在主流で使われているのは「HTML 4.01 Transitional」のようです。
    また、DOCTYPE宣言自体の記述を省略した場合には「互換モード」になります。
    気をつけて下さい!


    この記事を作成するに当たり下記サイト様を参考にさせて頂きました、ありがとうございました。

       → !DOCTYPE スイッチW3G - World Wide Web Guide 様)
       → DOCTYPE スイッチについての検証とまとめと一覧表hxxk.jp 様)
       → DOCTYPE宣言 主要一覧と説明HTMLMAKER 様)
       → DOCTYPE宣言がないとIE7でも表示は古いままAll About 様)








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ