ガムランボールの真実

Wikiモードの話続き５

Ｗｉｋｉモードの記事作成画面で段落と段落のあいだに一行、空白行を入れて入力した文章がｈｔｍｌ変換すると、こういうソースになり、ＩＥ７で見ると、二つ目の段落以降が右寄せした画像の下に配置される、というもの。

「Wikiモードの話続き２」を参照のこと。

<div class="wiki">
<img src="ibrush_stand.jpg" width="196" height="228" alt="イメージ 1" class="popup_img_196_228 clearFix alignRight">虫歯菌だけを除去するタブレット<br />
新宿の東急ハンズで、虫歯菌だけを除去するというＩｇＹ抗体？入りのタブレットを見つけたので買ってみました。<br />
「ティースエステＹＧ」という商品です。<br />
</div>
<br />
<div class="wiki">
ミントとピーチとグレープの３つの味があって、アルミの袋に小さいタブレットが２０ｇ入ってます。価格は５００円。<br />
ワタシが買ったのはミント味です。まあ、ふつうにおいしいです。<br />
</div>
<br />
<div class="wiki">
口の中には悪玉菌もいれば善玉菌もいるんだけど、これまで殺菌力があるという洗口液は、口の中の常在菌のうち、悪玉菌だけでなく善玉菌も殺してしまうのではないかといわれていました。<br />
だから、もし虫歯菌だけを殺すことができれば、最高ですね。<br />
虫歯菌て有名なのはミュータンスですが、乳酸を作る虫歯菌は６種類いるそうです。<br />
</div>

 

次に、空白行の行頭にスペースを挿入すると、右寄せした画像の脇に配置される＝ユーザ間で「解決策」とされたもの。ｈｔｍｌ変換されたソースがこちら。

<div class="wiki">
<img src="ibrush_stand.jpg" width="196" height="228" alt="イメージ 1" class="popup_img_196_228 clearFix alignRight">虫歯菌だけを除去するタブレット<br />
新宿の東急ハンズで、虫歯菌だけを除去するというＩｇＹ抗体？入りのタブレットを見つけたので買ってみました。<br />
「ティースエステＹＧ」という商品です。<br />
<div class='indent'>
<br />
</div>
<br />
ミントとピーチとグレープの３つの味があって、アルミの袋に小さいタブレットが２０ｇ入ってます。価格は５００円。<br />
ワタシが買ったのはミント味です。まあ、ふつうにおいしいです。<br />
<br />
<div class='indent'>
<br />
</div>
<br />
口の中には悪玉菌もいれば善玉菌もいるんだけど、これまで殺菌力があるという洗口液は、口の中の常在菌のうち、悪玉菌だけでなく善玉菌も殺してしまうのではないかといわれていました。<br />
だから、もし虫歯菌だけを殺すことができれば、最高ですね。<br />
虫歯菌て有名なのはミュータンスですが、乳酸を作る虫歯菌は６種類いるそうです。<br />
</div>

シアン色の背景色をつけた範囲が、ひとつの段落として、変換されてます。

つまり、最初のソースでは三つの段落に。次のソースでは一つの段落に。
赤文字の箇所が空白行として表示させるために追加されたタグ。

 

見た目の問題で騒ぎが起きたみたいだけど、書き手が元々、文章を三つの段落に意図的に分けるつもりで書いた（空白行を入れた）のだとしたら、最初のｈｔｍｌ変換は間違ってはいない。

 

個人的には
画像の横に文字が回り込むことと、画像の下に配置されることの「違い」は大したことではないと思うのです。
でもレイアウトにこだわって書いてきたユーザにとっては、「見た目が異なるようになった」ことは”大した問題”だったのでしょう。

 

ヤフーがわかるように利用者に説明すれば混乱は起きなかったと思うのですが。

本来の文書構造を適切にマークアップする作業と、見た目のレイアウトを「どのブラウザで見ても一致させる」という作業がうまく同期しなかっただけだから。

 

 

Wikiモードの話続き４

「Wikiモードの話続き３ 」で書いた、

ＩＥ６とＩＥ７で、画面の見た目が異なるのは、ブラウザのバージョンのせいではなく、ヤフーブログの設定したスタイルの適用方法のせい。

仮説実証編（笑）。

 

下の画像は画面左側が｢以前Wikiモードで書いた記事」をＩＥ６で見たもの。
画面右側は、「かんたんモード・空白行の処理」で説明した、ユーザースタイルシートでヤフーブログの設定スタイルを上書きする」を実行したもの。
適用したスタイルの内容はこちら。

/* ＩＥ６のみ解釈 */
* html div.entryBody td.entryTd div.wiki {
 height: 1%;
}

 

見ての通り、どちらも同じＩＥ６での表示です。
いつも記事に大きめの画像を貼り付けているので、ＩＥ６デフォルトで見ると、回り込んだテキストが数文字で折り返されて、これはこれで見にくいですね。

 

画面右側はＩＥ７以降のブラウザで見ている方と同じ見た目。

 

ということで、おあとがよろしいようで・・・・（ホントによろしいのか自信ないけど。）

Wikiモードの話続き３

Wikiモードの話続き2 の続き。

ヤフーブログの利用者の環境は人それぞれ
使っているＯＳも違えば
ブラウザも異なる。
バージョンも様々。
なもので、サービス提供側は、個人のＷｅｂサイトみたいに「このＨＰはＩＥ８で見てください」なんて言えない。

 

どのブラウザで見ても、大きなレイアウト崩れが起きないように、色々おまじないをしている。
そのおまじないの一つに”ｃｌｅａｒＦｉｘ”というのがあって
このおまじないは普通、テンプレートのレイアウト用途に適用することが多い。

 

ここのテンプレートで見ると、左右どちらの狭いスペースにサイドバー、広い側にメインコンテンツ、ブログ表示画面を配置している。
このサイドバーとブログ表示画面のレイアウトを
サンプルページの内容に置き替えて考えてみよう。

 

ＩＥ６では、最初のブロックから、右に配置させた画像がはみ出している。

 

ブログの内容画面として見たら、利用者的には「おかしいことではない」けれど、
テンプレートのレイアウト、として見たらどうか？

左右のブロックの高さが揃っていないのは見た目が悪い。

そこで、さっきのおまじないを、チチンプイプイ。

ほら、ブロックの高さが揃った。

 

推測だけれど、ヤフーブログは本来、ＩＥ６でもＩＥ７ ｌａｔｅｒと同じように、上の画面のようなレイアウトに表示されるようにスタイルを組んでいたのではないか。
おまじないは、おまじないが効くところにかければ、おまじないはうまく効く。

 

しかし、かけてはマズいところにかけると、思わぬ計算違いが生じる。
今回は、おまじないを画像にかけた。それが敗因のように思う。

画像にかけずに、ブロックのほうにかけると、以下のようになる。

 

黄色い背景色の範囲は、おまじないを画像にかけたサンプル。（ブログのデフォルト）
ピンクの背景色の範囲は、おまじないをブロックにかけたサンプル。

見比べてクダサイ。

この画面表示はＩＥ７でも同様の結果。

 

つまり
ココはＣＳＳの用語を使って書くけれど、ＩＥ６だけにかませるスターハックのｃｌｅａｒＦｉｘ、
height: 1%の指定;をｉｍｇ要素に設定しているから、有効にならず、親要素は子要素の高さを算出しない、ということ・・・。
クラスセレクタ wikiに”ｏｖｅｒｆｌｏｗ：　ｈｉｄｄｅｎ；”の指定があるにもかかわらず。

 

だから
ＩＥ６で「画像の横にテキストが回り込む」のは、実はヤフーブログのスタイル設定ミスだった？のではないでしょうか。

あるいは、他ブラウザで発生する問題への対処を含めた上での設計だったのか、、
あくまで、これは海南サンの推測の域を出ない、結論であります。

勝手に結論。
ＩＥ６とＩＥ７で、画面の見た目が異なるのは、ブラウザのバージョンのせいではなく、ヤフーブログの設定したスタイルの適用方法のせい。

 

 

Wikiモードの話続き２

前の記事「Wikiモード・IE6とIE7 」の続き。（なんだか、どんどん泥沼）

Wikiモードで空白行を入れた文章を書くと、html変換されたソースはこんな感じ。

<div class="wiki">
<img src="ibrush_stand.jpg" width="196" height="228" alt="イメージ 1" class="popup_img_196_228 clearFix alignRight">虫歯菌だけを除去するタブレット<br />
新宿の東急ハンズで、虫歯菌だけを除去するというＩｇＹ抗体？入りのタブレットを見つけたので買ってみました。<br />
「ティースエステＹＧ」という商品です。<br />
</div>
<br />

<div class="wiki">
ミントとピーチとグレープの３つの味があって、アルミの袋に小さいタブレットが２０ｇ入ってます。価格は５００円。<br />
ワタシが買ったのはミント味です。まあ、ふつうにおいしいです。<br />
</div>
<br />
<div class="wiki">
口の中には悪玉菌もいれば善玉菌もいるんだけど、これまで殺菌力があるという洗口液は、口の中の常在菌のうち、悪玉菌だけでなく善玉菌も殺してしまうのではないかといわれていました。<br />
だから、もし虫歯菌だけを殺すことができれば、最高ですね。<br />
虫歯菌て有名なのはミュータンスですが、乳酸を作る虫歯菌は６種類いるそうです。<br />
</div>

このソースをＩＥ６で見ると、右に回り込んだ画像の横にテキストが流れ込むのに、ＩＥ７で見ると二つ目の段落は最初の段落に含まれる画像の下に配置されるという現象。
こゆうときはスタイル設定をリセットして初期状態にまず戻してみる。

1. 画像の配置を変えず、編集画面の文頭に挿入し、その後にテキストが続く状態にしてみる。
2. 画像の配置だけ変えてみる。(画面右側に配置)

二つのサンプルを１ページ内で実行。
画面上が１．赤矢印以下、画面下が２．
わかり易くするために、段落の周囲を赤いボーダーで囲ってます。

 

この時点で、余計なスタイルを設定しなければ、ＩＥ６でもＩＥ７でも画面表示は変わらない。

 

１．の「画像の配置を変えず、編集画面の文頭に挿入し、その後にテキストが続く状態にしてみる。」では、画像の下端に揃えて一行目のテキストが表示される。
これは画像がデフォルトで、htmlでは「行内に配置される要素」だから。
行内に配置される画像やテキストなどの要素は、テキストのベースラインにセットされます。

 

もともと、HTMLはアッチの国で出来たマークアップ言語なので、欧文文字にはベースラインがあります。（日本語にはないんだけれど、文字の下辺ラインと考えてください。）
一行目の表示は画像の下端と文字の下辺ラインで並ぶことになる。

 

青線の箇所。

「虫歯菌だけを除去するタブレット」で改行しているので、二行目はその下に流し込まれてます。

 

ブラウザでは記述した順番に、上から下へ、画面表示されるので、二番目の段落、三番目の段落と空白行をはさみながら下に続きます。

 

次が２．の「画像の配置だけ変えてみる。(画面右側に配置)」
※画面右側、正しくは「段落内の一行目の右端」。

ここから、段落のことを”ブロック”と呼ばせてください〜。

 

「画像をブロック内の右側に配置してくだしゃい。」
すると、画像はブロックの右側に、ひょ〜ろひょろひょろと移動。

 

画像が移動した（回り込んだ）ので、最初のブロックはテキストだけになり、ブロックの高さが低くなります。（※）
そして、その下に二番目のブロック、三番目のブロックが垂直に配置されます。
それが最初の画像の、矢印以下の画面。

 

ただ、この時の「右側に移動して」っていう指示は、正しくは右側に移動して貼り付けっていうよりは、
右側に浮遊して立ち位置をキープしててくれって言ったほうがわかり易いかも。

 

だから、ブロック自体は、浮遊した状態の画像の「後ろ側」にいます。

画像の透明度を下げて表示させてみると、わかるかな。

画像に、うっすら〜、ブロックの背景色やボーダーが透けて見えますね。

ブロック内のテキストは、上に浮遊している画像が存在するので、画像の左端で、折り返される。

 

実際に画像が浮遊しているわけじゃないのですが。

 

長いこと、HTMLやらCSSをほっぽってるので、どこかでウソ書いてるかもしれません。

で、まだ続く。

 

 

 

 

Wikiモード・IE6とIE7

「かんたんモード・空白行の処理」での、藪さんに戴いたコメント。
ちょっとコチラに転載させてもらいます。

ヤフーウィキの編集画面で、例えば[[attached(1,right)]]を書いた後に文章を書いて、その文章に空白行を入れると･･･ＩＥ6では問題なく左側の画像の右側に、空白行入りの文章が配置されているのです。しかしそれをＩＥ7で見ると、空白行より下の文章が画像の右横ではなく、画像の下に配置されてしまうのです

 

確認しましたあ〜。でも、ＩＥ６での表示を確かめることができなかったので、
ここは他力本願モードで「複数ブラウザでのスクリーンショットを撮れるサイト」でＩＥ６のスクリーンショットを生成してもらいました。

表示されているのはテスト用に仮作成した記事画面。

画像１枚と３つの段落からなる記事ですが・・

ありゃまー

 

なんでやねん。
ググってみたら、ヤフーブログでこの件に関する記事を書いていたブログあり。

ショック！！(T□T)〜解決編〜 - ９６（キュロ）チャンネル - Yahoo!ブログ
http://blogs.yahoo.co.jp/tatyukichi/6641491.html

 

ふうん、２００８年の暮れの出来事だったんですね。

今現在、２０１０年春の時点で、（会社サイトのデータによれば）すでに６０％近いユーザがＩＥ８に移行してますが、ＩＥ７とＩＥ６の利用者もそれぞれ、２０％前後いらしゃいます。
まだまだＩＥ６は仲間ハズレにはできないってことですね。

ただ、知恵袋のほうも見ましたけども、見え方の違いはブラウザのバージョンの違い、という答えではワタシ的にはモヤモヤが残ります。
たぶん、ＣＳＳプロパティのブラウザの対応・未対応、または設定の不具合あたりが原因ではないかと思いますが。

 

で、ヤフーブログで使われているのと同じスタイル設定のページを作って、さらに検証、、と
でも前述のスクリーンショット生成サイトは画像がアップされるまで時間がかかって面倒なので
何かいいツールはないかと探したところ

 

ありました。複数のバージョンのＩＥのブラウジングテストが出来るツールを見つけ。

それはIETester。

早速ダウンロードしてインストール。
いちいちサーバにファイルをアップしてブラウズするの、これも面倒だから
ローカルホストで実験。

 

見やすくするために段落の背景に色をつけてます。

と、ココまで書きましたが、今日はもう眠くなっちゃったので、続きはまた明日書きます(笑)

---