FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リストタグの「表示の乱れ」

友人のサイト構築を手伝っている時に,素人のウェブデザイナーにとっては実に不思議としか言いようがない経験をしました。

何はともあれ次の画像をご覧下さい。

リストタグの表示の乱れ


「ネックレス」の部分(注:赤色の囲み)が左に寄っています。他の項目とテキスト以外は同じですから,CSSの書き間違いではありません。

正しくは

リストタグの正しい表示


このように表示されなければなりません。

この現象が発生するブラウザはインターネットエクスプローラー(=IE)です。今回は【IE7.0】が手元になく確認できませんでしたが,【IE6.0】と【IE8.0】で確認しました。

  ※他の主なブラウザ(Safari, Firefox, Chrome)の最新版では発生しませんでした。

なおかつ,

ここからが摩訶不思議なことなのですが,

友人のサーバーと私のサーバーにまったく同じデータをアップロードしたところ,【私のサーバー + IE8.0】という条件では表示の乱れはありませんでした。

しかし,

【友人のサーバー + IE8.0】において,上記の現象が発生しました。両者のサーバーは「さくらインターネット」のレンタルサーバーです。

全く同じデータがサーバーによって表示が異なるなんてことがあるのでしょうか?!

さらに,

両者のサーバーのデータを【IE6.0】で表示させると,どちらにも表示の乱れがありました。

これらは複数のマシンで確認しましたが,どのマシンでもまったく同様の結果です。



リスト表示の乱れの原因



この現象にあってから数時間を要してやっと原因を見つけました。(と自分では考えています)

表示が乱れた時の「問題箇所のソース」は

ソース01


このようになっています。赤色の部分に注意です。『改行』していることを表すために赤色で塗って視認性を高めています。

これは何かの本に書いてあったのですが,文書構造を分かりやすくする為に「ソースを美しく書く」を実践しているからです。実際,ソースを秩序正しく整理しておくと確認や修正の際に該当箇所を見つけやすくなります。また,間違いの発見もより容易です。

上記のソースを

正しいソース


のように書き換え,『改行』を無くしました。

そうすると

確認可能なすべの条件で表示の乱れが無くなりました。(^.^)v


これでリスト表示の乱れは解消できましたが,疑問は残ったままです。

1.サーバーによる表示の違いは一体何だったのか?

2.ソースはどこまで美しく書けばよいのか?

これらの疑問は解消されていません。どなたか情報をお持ちでしょうか。特に,『2』の疑問に対する答えは何としてもガイドラインとして知っておきたいと思います。
SEO初心者による初心者のための情報でした。


2009年10月20日

東雲の星@素人ウェブデザイナー



にほんブログ村 IT技術ブログ SEO・SEMへ
にほんブログ村 ★応援よろしく!


スポンサーサイト

テーマ : webサイト作成
ジャンル : コンピュータ

Internet Explorer のバージョン比率

サイトのリニューアルを始めた今年の春からアクセス解析のツールとして【Google Analytics】を導入し使っています。同時に他の無料のアクセキ解析ツールは隠し広告があったり「XHTML」とは相性が悪かったりで,何年も前に自分で導入したCGI以外はすべて削除しました。それだけ,【Google Analytics】が優秀だということでもあるのですが。

その【Google Analytics】で1つ困っていることがありました。ブラウザーの種類は解析でデータとして出てきているのですが,バージョンの比率が分かりません。解析していないことはないだろうと思っていろいろ見ても入り口が分かりませんでした。

先ほどネットで検索してみると,どなたかのブログで「バージョン情報」を見たと書いてある記事がヒットしました。再度確認すること数分かかってやっと入り口を見つけました。

分かってみるとどうってことなく,ブラウザの名前をクリックしたら良いだけでした。まったく,とんまな話です。穴があったら入りたいほど恥ずかしいです。

気を取り直して,早速バージョン比率を確認しました。知りたかったのは,Internet Explorer がどれくらい占有率を伸ばしたかということでした。一番アクセスの多いサイトを確かめてみました。

バージョン比率
大きな画像を見るにはクリックして下さい



このアクセス解析の結果を見ると,この数ヶ月でかなり比率に変動があったことが分かります。

最新バージョンの「8.0」が1位です。

「6.0」が相変わらず占有率が高いですね。「7.0」の時と比べて最新バージョン「8.0」の占有率がよく伸びていると思います。期待通りです。「7.0」よりも動作がかなり軽くなったからでしょうか。それでも私には重く感じられ,主ブラウザとしては Safari や Firefox の方を使っていますが。

素人なりに判断すると,

「6.0」が頑張っているのはウィンドウズXPのユーザーが多く,アップデートを行っていないため?

「7.0」が「6.0」と同程度,あるいは少ないというのは,ヴィスタのユーザーが少ないため?

「8.0」の躍進振りがちょっと謎。ヴィスタが少しでも軽くなるならと思ってアップデートする人が多かった?

ということでしょうか。

このようなデータは,ウェブサイトを制作するときに言われる「ターゲットブラウザ」を決めるのに役に立ちます。私のような素人デザイナーが「5.x」を考慮しないで済む「言い訳」にもなります。(^^ゞ

「6.0」と「7.0」が圧倒的な少数派になってくれたら「XHTML+CSS」によるレイアウトがより楽になるのですが。

P.S. みなさん,ブラウザは最新のものを複数使ってみましょう。新しい発見がありますよ。


SEO初心者による初心者のための情報でした。


2009年10月13日

東雲の星@SEO初心者




にほんブログ村 IT技術ブログ SEO・SEMへ
にほんブログ村 ★応援よろしく!


テーマ : webサイト作成
ジャンル : コンピュータ

リスト画像

プロのデザイナーには当たり前のことでしょうが,ちょっとした発見をしました。

項目を「リスト」形式にして,さらにデフォルトのリストマークを好みの画像で表示したい場合があります。

これを実現するには「リストマーク」の代わりに任意の画像を指定すればよいだけのことですが,ちょっとした問題があります。

画像がデフォルトの「■」や「●」ぐらいの大きさであれば問題無いのですが,文字と同じくらいの大きさになるとリスト画像の位置がズレます。つまり,上下の位置で上方にズレます。これはちょっと不自然です。どうにかならないものかと思い,結局は不自然さを避けてリスト画像を小さくして使っていました。

つい先ほど,「リスト」の背景画像として指定したらどうだろうと思い付いて,早速やってみたらOKでした。(^.^)v

方法は,

背景画像として指定し,リピートを禁止にし,左に置いて,文字列の左にパディングを指定する

とイメージ通りになります。これで気になっていることが1つ解決しました。

と思って「リスト」を多用している構築中のサイト【アクセス向上対策と検索エンジン最適化(SEO)はこれで委員会?!】で実際にやってみて確認すると1つ問題が…

「リスト」のテキストが2行になっているのがあります。この場合だと2行の上下中央位置にリスト画像が来てしまいます。

これを防ぐには「リストテキストを1行におさめる」ということになるのでしょうね。(^^ゞ

SEO初心者による初心者のための情報でした。


2009年10月13日

東雲の星@SEO初心者




にほんブログ村 IT技術ブログ SEO・SEMへ
にほんブログ村 ★応援よろしく!


テーマ : webサイト作成
ジャンル : コンピュータ

カレンダー
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
プロフィール

東雲の星

Author:東雲の星
サイトを構築しながら,同時進行でSEOを勉強している趣味レベルのウェブデザイナーです。ここはそのブログ編という位置づけです。

にほんブログ村 IT技術ブログ SEO・SEMへ
にほんブログ村

最新記事
カテゴリ
リンク
最新コメント
最新トラックバック
月別アーカイブ
アクセスランキング
[ジャンルランキング]
コンピュータ
10163位
アクセスランキングを見る>>

[サブジャンルランキング]
Webサイト作成
467位
アクセスランキングを見る>>
検索フォーム
メールフォーム

名前:
メール:
件名:
本文:

RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。