MB-Support

パソコン初心者のサポートページ

サイトのスタイルシートを変更しました

 ほぼ全てのページで利用する外部スタイルシートを変更しました。 本当はやる事が山積みで、スタイルに気を遣ってられないのですが、IE8 Beta 1 をインストールした事で、後に変更作業を強いられる事実を確認しました。


現在最新版となるブラウザ Internet Explorer はバージョン7となりますが、 Internet Explorer 8 Beta1 (以下、IE 8) が既に公開されています。 英語版のみとなりますが、これらのベータは特定の期間利用する事で検証する事になります。 しかしながら、管理人の場合はインストールする環境がありません。とりあえず、危険ではありますが、既存の環境にインストールしてみる事にしました。 アンインストールも正常に行えるかどうか知る必要もありますし。インストールしたスクリーンショットが右です。



いろいろ問題がありすぎて、どうしたら良いものやら正直戸惑います。 IE 8 では 3 種類のモードがあり、当初は IE 7 と同じモードがデフォルト設定となる予定でしたが、最新の Web 標準となる IE 8 のモードがデフォルトに変更されました。 これにより、IE 7 を基準にして制作したサイトの表示が崩れる可能性があります。 単純に、Web 標準を意識してサイト制作を心がければ良いのですが、最も利用されているブラウザが Web 標準で無い現状。 このモードを切り替えるボタンがタブの隣に設置され、そのボタンで表示できないサイトを IE 7 と同じく表示する事は可能。 しかし、できれば通常モードで表示させたいと思うのが一般的。



日本語版でないため、操作方法が分からない点が多かったですが、とりあえずサイト変更を強いられる事は確認できました。 前回、IE 6 から IE 7 への以降に対応するため、分かりやすく言えば、Windows Vista(ウインドウズビスタ)のメイリオフォントに対応するために時間がかかりましたが、その時に次ぎの変更を予測して、得意な表示をなるべく無くしました。 今回は、スタイルシートの変更を経て、何回かに分けて対応を検討したいと思います。既に変更作業は完了していると思われます。

思われると言うのは、今までサイトを変更してきた互換性を維持するために、CSS にゴミが溜まっていました。 今回は、互換性を無視する事で、主となる CSS のファイルサイズを 25KB から 14KB に減量しています。 これにより、もしかすると現時点で表示がままならないページが存在しているかも知れません。見つけ次第対処したいと思います。



今回実行したのは、お友達に教えて頂いた右のサイトを参考にしました。 CSS の最初に、全てのタグを初期化する文を加える事で、複数のブラウザで互換性を維持する事が容易になります。 その代わり、全てのタグをピクセル単位で指定する必要があります。 たとえば、初期化する事で、ブロックレベル要素の <p> や <div> の上下に空白が無くなります。 新しくサイトを制作するユーザーは楽ですが、既存のサイトでこれを実行するには結構大変かも知れません。

Eric's Archived Thoughts: Resetting Again

現時点で管理人が確認している環境は、Windows Vista 上の、IE 7 、Firefox 2 、Apple Safari 。Windows 2000 上の IE 6 となります。最もユーザー数が多いと思われる Windows XP でのテストが行われていないのが不安ですが、管理人が揃えられる環境が乏しいため致し方ありません。



今回の変更により IE 8 で表示可能なのか気になる所ですが、変更作業に IE 7 が必要だったため、既に削除してしまいました。IE 8 のインストールとアンインストールを実行した結果、今のところ特に問題は生じていません。アンインストールは「コントロールパネル」の「プログラムと機能」から実行します。



最初は壊れているかと思ったのですが、IE 8 ではアドレスバーのドメインが強調表示されていました。



Emulate IE 7 ボタンを押しても、スタイルが崩れていたのが気になります。IE Developer Toolbar は、IE 7 と同様の使い方はできませんが、別窓表示で利用可能でした。





Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項