| 今回はブラウザによって「easy my web」の見え方の
違いはスタイルシートが原因かな？と言うお話。
よって今回も「easy my web」をご利用の方に向けたお話です。
前回、ブラウザによってデザインが崩れると言うお話をさせていただきました。結果としてInternet Explorer7、Opera 9、Sleipnirでは正常表示され
Firefox 3、Google Chrom、Safariでは形が崩れた表示となりました。
SleipnirはInternet Explorer7と同様HTMLレンダリングエンジンのTridentを使用しています。また、Google Chrom、SafariのHTMLレンダリングエンジンはwebkit、Firefox 3はGecko、
Opera 9はPrestoが使用されています。
つまり、
Trident、Presto使用のブラウザ ＝ 正常表示
Gecko、webkit使用のブラウザ ＝ デザインが崩れる
と言えます。
検証のためにTridentとGeckoのエンジンに切り替えられる
Sleipnirで表示させてみました。
画像1番目左がGeckoのエンジン使用のSleipnirで
デザイン「苔玉」を表示させたものです。
右がエンジンTridentを使用したものです。
Geckoエンジンを使用するとデザインが崩れているのがお分かりになるかと思います。
では、なぜデザインが崩れるのか？原因は？
HTMLレンダリングエンジンの仕様を細かく調べるのは
至難なので取り合えずブログの方を調べてみました。
このブログで通常使用のデザイン「ブルーボトル」と
前回デザインが崩れる例とて使用した「苔玉」にて検証します。
それぞれのデザインで表示し、ページをハードディスクに保存します。
(ファイルのソースコード等の閲覧・変更・使用等の行為に
関しては、利用規約に明確な記載はありませんが、
同様のことを行う方は自己責任で。
得にCSSなどのスタイルシートのファイルの著作権は
サービス会社にあります。)
保存場所には「タイトル名.html」と使用画像等の
ファイルのフォルダができます。
まずはhtmlファイルから。
エディタ等で開くとソースコードが見れます。
デザインが崩れるのは主に左のメニューです。
70行目付近からメニューの項目になります。
以下にソースの一部(ブルーボトル)。
～略～
<div class="xBox_rank">メッセージ</div>
<div class="mid_rank">
<div class="sub_text" id="m06">メールにてメッセージを送ります。</div>
～略～
<div class="xBoxLast_rank"></div>
<div class="xBox_bn">カレンダー</div><div class="mid_bn">
<div class="shospace"></div>
～略～
div class="xBoxLast_rank"等、スタイルシートでデザインが指定されている
ことがわかります。
ここでスタイルシートのリンクを探すと、
12行目付近にあります。
<link rel="stylesheet" href="/t118_bluebottle.css">
そのためスタイルシートが保存されているフォルダから
スタイルシートをエディタで見てみます。
以下にソースの一部(ブルーボトル)。
～略～
.xBox_rank {
MARGIN-TOP: 0em; MARGIN-LEFT: 0em; PADDING-LEFT: 0.4em; FONT-WEIGHT: bold; FONT-SIZE: 12pt; BACKGROUND: url(tamplate/180.gif) no-repeat 50% bottom; WIDTH: 200px; COLOR: #ff0099; PADDING-TOP: 0.1em; PADDING-BOTTOM: 0.1em; FONT-FAMILY: "Verdana", "ＭＳ ゴシック", "Osaka"; HEIGHT: 23px; TEXT-ALIGN: center
}
.mid_rank {
BACKGROUND: url(tamplate/) repeat-y 0% top; MARGIN-BOTTOM: 0px; WIDTH: 200px
}
～略～
196行目のコメント/* 送信ボタン */以降がメニューで使われているデザインの指定となっているようです。
ここで上記の部分のソースを「苔玉」と比較してみます。以下にソース(苔玉)
～略～
.xBox_rank {
MARGIN-TOP: 0em; MARGIN-LEFT: 0em; PADDING-LEFT: 0.4em; FONT-WEIGHT: bold; FONT-SIZE: 12pt; BACKGROUND: url(tamplate/t109_kokedama/180.gif) no-repeat 50% bottom; WIDTH: 200px; COLOR: #990000; PADDING-TOP: 0.1em; PADDING-BOTTOM: 0.1em; FONT-FAMILY: "Verdana", "ＭＳ ゴシック", "Osaka"; HEIGHT: 0px; TEXT-ALIGN: center
}
～略～
画像2番目に一部
どうも縦幅の設定「HEIGHT: 」が異なっているようです。
ブルーボトル ：HEIGHT: 23px苔玉 ：HEIGHT: 0px
なので苔玉の196行目以降のHEIGHT: 0pxを23pxにしてみてFirefox・Google Chromにて表示させてみました。
画像3番目
また、HEIGHTの設定をなくして、設定を行わなかったものをFirefox・Google Chromにて表示させてみました。
画像4番目
画像を見ていただけるとお分かりになるとおり
デザインが正常に表示されました。
どうも、Trident、PrestoとGecko、webkitでは指定されたものによる
振る舞いに違いがあるようです。
だからと言ってブログにてCSSファイルを変更して使用する
ことは出来ません。
結論として、使用する側として出来ることとしては、
Firefox 3、Google Chrom等でデザインが崩れないものを
選ぶしかないと思います。
しかし、気に入ったデザインを変更したくない！と言う方もおられるのではないかと。
私は「苔玉」が使いたかった！。
現状では、崩れるのを我慢するしかないのかな？
と思います。Internet Explorerで見てくださいと言う記載を行う方法もありますが、
Windows以外で閲覧されている方もおられます。
MacOSX などではSafariをLinuxではFirefox を
使用している方が多いと思いますので。
とここまでで終わりにしようと思いましたが、
正常表示されないことをケーブルテレビに問い合わせてみました。
以下お返事の一部抜粋。
弊社でも把握しており、サーバ管理元で
順次修正対応していく予定となっております。
誠に申し訳ございませんが、しばらくお待ちください。 とのことです。
待っていれば解決しそうです。
最後に
ケーブルテレビ株式会社様、私のようなものの質問に丁寧
かつ迅速な、お返事ありがとうございます。
画像中のFontには前回同様
STUDIO twoGさんの
オリジナル手書きフォント
S2GP海フォント
を使用させていただいております。
|
|
コメントする
