HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。 yozoの気が向いたと記2.0

2006年08月17日

HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。

　yozoの別ブログのうさもの気が向いたと記の2006年8月9日の記事BlogPet俳句を求めて三千里～マルコyozo＆うさみちゃん編～＠後姿ラブリー同盟で、BlogPetの俳句の画像は表示されても、記事本文が表示されたりされなかったりという不具合がありました。記事内のタグの閉じ忘れやら、記述ミスのチェックをしても、これといったミスもなく、どうしようもなくなったので、シーサーサポートにメッセージを送って回答をもらいました。（実は２回メッセージのやりとりをしました。）

　背景画像を使用している箇所に、align属性の入っている画像タグを挿入した際に、Windows IEで連絡した現象が発生しており、下記方法での記事の編集をしてほしいとのこと。
・imgタグにalign属性を挿入しない
・align属性を挿入せず、tableを使用して記事の投稿を行う

BlogPet俳句を求めて三千里～マルコyozo＆うさみちゃん編～＠後姿ラブリー同盟の記事では、下のように記事にしていました。

[記事表示]
　うさみちゃんは、ここうさもの気が向いたと記のyozoんちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑）
「このしたは　選択したり　よろしけれ」
　これは、４回目のクリックで詠んだ俳句でした。
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

[投稿内容]

<img src="画像URL" width="128" height="168" border="0" alt="usami_575.jpg" align="left"> 
　うさみちゃんは、ここ<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>の<a href="http://www.blogpet.net/profile.php?id=efb6110af1f8aec81f5a51b33c3da27e">yozo</a>んちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑） 
<div align="center">「このしたは　選択したり　よろしけれ」</div> 
　これは、４回目のクリックで詠んだ俳句でした。 
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

おもいっきり、<img>の中にalign="left"が入ってますね。でも、これをなくすと、画像の右に文字が回り込みしてくれないので、tableを組むと重くなるので嫌だし･･･っとそこで、愛用の標準HTML、CSS&JavaScript辞典で調べると、CSSを使って、次のようにするとありましたので、やってみました。

<img src="http://～省略～" style="float:left;">･･･････････画像の右側の文章････

これでこの記事すべての<img>タグ22個を修正して、再投稿すると、見事に表示のエラーは消えてくれました。(*^-ﾟ)vｨｪｨ♪

　お友達のROOM-Mのmioさんの記事HTML4.01から、XHTMLへの記事で紹介されていたAnother HTML-lint gatewayでエラーのチェックをしました。(下は2006/08/17現在の結果です。これでも最初よりもエラーの数は200個は減ってます。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･ )

http://yozoblog2.blog63.fc2.com/ を XHTML1.0 Transitional としてチェックしました。530個のエラーがありました。このHTMLは -50点です。タグが 41種類 1521組使われています。～以下省略～

　このAnother HTML-lint gatewayは、URLを入力するだけで、ブログのエラーのチェックができて、解説もでてくるという優れものです。みなさんも是非トライしてみてくださいね。とてもいい勉強になりますよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

　そして昨日(8/16)、これまたお友達の、のんびり前進じたばた生活のまゆびさんの記事HTML4.01とXHTMLによりますと、ブログの世界では、HTML4.01からXHTMLへと移行していて、XHTMLに対応させておかないと、ブラウザによっては上手く表示されない等の不具合を招くことにもなりかねないとのこと。まさしく今回のyozoのケースそのものでした。

　お二人の記事と、Another HTML-lint gatewayのチェック結果の解説により、以下の項目を修正しました。楽しくブログを続けるためにも、エラーのない記事を作成して、どのブラウザでも正しく表示できるようにしたいなぁとあらためて思いましたよ。
　また、以前のyozoの回り込みやセンタリングについての記事センタリング♪についても、全面的に修正させていただきました。m(_ _)m

<img>の中のborderはCSSで設定するので、削除しました。
また、align="left"については、style="float:left;"に書き換えました。
終わりに「半角スペース+/」を挿入しました。<img />
による文字サイズや色などの設定はすべてCSSでするようにして、は使わないようにしました。
<div align="center">はとしました。
不要な は削除しました。必要な分は に変更しました。
は に変更しました。

<img src="画像URL" width="128" height="168" alt="usami_575.jpg" style="float:left;" />　うさみちゃんは、ここ<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>の<a href="http://www.blogpet.net/profile.php?id=efb6110af1f8aec81f5a51b33c3da27e">yozo</a>んちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑） 
「このしたは　選択したり　よろしけれ」 
　これは、４回目のクリックで詠んだ俳句でした。
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

お友達のXHTML関連記事の案内
記事名をクリックすると設定記事が別窓で開きます。
参考にしてくださいね。m(_ _)m

ROOM-Mのmioさんの記事HTML4.01から、XHTMLへ
のんびり前進じたばた生活のまゆびさんの記事HTML4.01とXHTML
KOROPPYの本棚のKOROPPYさんの記事ブログの文法をチェックしてみました
徒然冩眞館のmaRkさんの記事 HTML4.01からXHTMLへについて

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

2006/08/19修正

は削除しました。
↓
 は削除しました。 に変更しました。

　また、同様にコード見本に を追加しました。
よろしくお願いしまーすということかな？（笑）
↓
よろしくお願いしまーすということかな？（笑）

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New BlogPetうさもwithうらら　２匹deﾂｯｺﾐ＠後姿ラブリー同盟 | Top | プラグインや最新のコメントなどにスクロールバーを設置する Old≫

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ HTML4.01とXHTML from のんびり前進じたばた生活
最近「naoKの｢ホイきたー!」」のnaoKさんと交流する機会がありまして、いろいろと教えていただいているのですが、最近衝撃を受けたのが、この話題でした。実はまだまだチンプンカンプンなのですが、まゆびなり [Read More]

トラックバック

≫ ブログの文法をチェックしてみました from KOROPPYの本棚
Another HTML-lint gatewayで、ブログのHTMLの文法を採点してみました。最低限のレベルとして、ブラウザでエラーマークが出ない程度には仕上げてあるつもりでした。しかしチェックしてみると、予想外にエラーが多くて驚きました。何となくココログ(XHTML)ではこう書くん� [Read More]

トラックバック

≫ HTML4.01からXHTMLへについて from 徒然冩眞館
yozoさまのブログのエントリより、「HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。」について [Read More]

トラックバック

≫ ブログのエラーをチェックしてみた!! from のんびり前進じたばた生活
先日「HTML4.01とXHTML」の記事で書いたようにどんどん記述方法が変わってきています。まゆびは古い方の書き方で覚えてしまったので、きっと間違いだらけのはず。(笑)そこで「ROOM－M」のｍｉｏさんに教えていただい [Read More]

トラックバック

≫ livedoor版XHTML準拠対策 from yozoのおすすめ本
　ここlivedoorブログはXHTML1.0 Transitional準拠です。きちんと準拠した書き方をしないと、ブラウザによっては表示に不具合が出るとのことです。早速、Another HTML-lint gatewayというサイトでエラーのチェックをしてみました。http://blog.livedoor.jp/yozoblog/ を XH. [Read More]

yozoさん、こんばんは♪(*ﾟ▽ﾟ)ﾉ
トラバありがとうございます。＜(＿＿)＞
こちらからも送らせていただきました♪(*^-^)ﾆｺ
それにしてもすごくタイムリーな記事を!!
ちょうどまゆびも画像を入れた記事をどうやって書こうか
悩んでいたところだったのです。
imgタグにalignが入れられないとは!!
こちらのおかげでエラーなく２匹でツッコミに参加できそうです♪
素敵な情報ありがとうございました!!(*'ｰ')

Posted by まゆび at 2006.08.17 22:48 | edit

＞まゆびさん、こんばんはー♪
トラバ返してくださってありがとーございまっす♪m(_ _)m

＞それにしてもすごくタイムリーな記事を!!
＞ちょうどまゆびも画像を入れた記事をどうやって書こうか
＞悩んでいたところだったのです。
そうだったのですか？それは偶然ですが、お役に立ててうれしいですよ。
ただし、これがベストかどうかというのは不明ですけどね。取りあえずはエラーはないと思います。yozoのきっかけは、ご存知の通りのseesaaブログの表示エラーの解消でしたね。これも偶然ですけどね。(*^-^)

＞imgタグにalignが入れられないとは!!
＞こちらのおかげでエラーなく２匹でツッコミに参加できそうです♪
そうなんですよ。実はネタがあるのに、記事にしにくかったのです。エラーを増やして、見にくいブログになるのも嫌ですからね。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
yozoもこれで少しはCSSを使いこなせるようにはなりましたので、
一安心してます。こちらでも、BlogPetネタを用意しなきゃね('-'*)ｴﾍ

Posted by まゆびさんへ at 2006.08.17 23:02 | edit

yozoさん(*･ω･)ﾉ~☆ｺﾝﾊﾞﾝﾜ♪

yozoさんのブログはXHTMLなんですねー。
これだけFC2にテンプレートが多く存在していても、ほとんどがXHTMLでは
かかれていないそうですね。
昨日のまゆびさんの記事からそのお友達の記事・・またそのリンク先・・・っと
見ていたらいつかそういうことが書いてあるページに辿り着いていました。

σ(･ω･*)も昨日皆さんに見ていただいたペットのページの修正をしていまして
トップページだけはようやく99点まできましたが・・なかなか難しいですね＾＾；
とはいえ、私が直しているのはHTML 4.01 Transitionalですが・・・

ブログを書く時に自動的に生成されるタグを見てみたりしたのですが
イマイチ理解できませんでした＾＾；
例えばリンク先を別窓で開く時など
<a href="http://○○○○～～～～" target="_blank">△△△</a>
などと勝手に生成されるのですが、チェックするサイトではこれがマイナスポイントに加算されてしまいます。
うーん・・頭の中で色々混同しているのか・・・グラグラですよ（笑

なにはともあれ、記事の修正等色々大変だったでしょうけど
お疲れさまでした(´･ω･)(´-ω-)(´_　_)ﾍﾟｺﾘ

Posted by モンビッケ at 2006.08.17 23:20 | edit

yozoさん、こんばんわ♪(ﾟ▽ﾟ*)

私もｉｍｇタグには多用してるクチですが、こんな不具合があっただなんて知りませんでした。
tableはカンタンといえばそうなのですが、やっぱり重さが気になるトコですよね。
確かにtable使うくらいなら、CSSでfloat使っちゃった方がスマートな気がしますよね。

なんにしても、一度記事にしたモノの修正は結構大変だったハズ。
ご苦労サマでした(ﾟ▽ﾟ；)

Posted by Ｐａｖ at 2006.08.18 01:34 | edit

＞モンビッケさん、おはよーございまっす♪

＞yozoさんのブログはXHTMLなんですねー。
小粋空間のyujiroさん作のFC2用テンプレートなんですよ。FC2がXHTML準拠なので、このテンプレートもXHTML準拠になってますよ。恥ずかしながら、今回初めてDOCTYPEを気にしました。(*v.v)｡ﾊｽﾞｲ｡｡｡｡

＞これだけFC2にテンプレートが多く存在していても、
＞ほとんどがXHTMLではかかれていないそうですね。
テンプレートの話題だとその内容が多いですね。
これも今回初めて知ったことでしたよ。(*v.v)｡ﾊｽﾞｲ｡｡｡｡

＞トップページだけはようやく99点まできましたが・・なかなか難しいですね＾＾；
おおお！99点までいきましたか！ということは相当ホームページの勉強をされたようですね。ブラウザによる表示の不具合ははっきり言って、ブラウザだけでなく、Webサーバーにも起因することが多いため、すべてを解消できるとは限らないのでしょうが、管理者としては、なるべく不具合のないようにしたいですよね。
それにしても、99点ですか・・・yozoなんてここのブログは、過去記事無視して、
トップページのみでも、『530個のエラー。-50点』ですからね(ﾟｰﾟ;Aｱｾｱｾ

＞<a href="http://○○○○～～～～" target="_blank">△△△</a>
target="_blank"については、マナーというか、考え方のようですね。別窓でリンクを開くのでなく、その判断を読者にゆだねるというのが正論のようです。
　yozoは今のところ、target="_blank"中心のリンクです。あくまで紹介先はyozoの記事の参照先ですからね。メインはここの記事というスタンスです。別窓を開いて、yozoの記事にはもう用はないとのことだったら、yozoの記事を閉じてくれればいいと思ってます。記事によってはたくさんの参照先をリンクすることが多いのでtarget="_blank"にしていますよ。(*^-^)
それと、自動入力といえば、seesaaの画像の回り込み設定でalign="left"が普通にimgタグに挿入されるのは一体・・・と思うyozoです。(￣∀￣*)ｲﾋｯ

＞なにはともあれ、記事の修正等色々大変だったでしょうけど
＞お疲れさまでした(´･ω･)(´-ω-)(´_　_)ﾍﾟｺﾘ
あはは・・・ありがとーございまっす♪m(_ _)m
でもトップページだけですよ。これからエラーのない記述を勉強しながら進めていくようにしたいと思ってます。膨大なページの修正は不可能に近いですからね。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･

Posted by モンビッケさんへ at 2006.08.18 08:05 | edit

＞Pavさん、おはよーございまっす♪

＞私もｉｍｇタグには多用してるクチですが、こんな不具合が
＞あっただなんて知りませんでした。
記事のような表示のエラーでyozoが知っているのは、今のところ、seesaaの現テンプレートだけですよ。なるべくならエラーの出ない記事作成をこころがけたいものですよね。
(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

＞確かにtable使うくらいなら、CSSでfloat使っちゃった方が
＞スマートな気がしますよね。
とりあえず記事の読み込みは速いですね。FC2に引越してきてからは、
トップページの表示が遅くなったのをどうしようか・・・って考え中の
yozoなのですが、tableはできるだけなしにしたいですね。(^○^)

＞なんにしても、一度記事にしたモノの修正は結構大変だったハズ。
＞ご苦労サマでした(ﾟ▽ﾟ；)
あはは・・・ありがとーございまっす♪でも修正はHTML本体と最新記事だけですよ。過去記事はその都度、過去記事をふりかえるようにしたいと思ってます。
まだまだこれからですよね。　(*^-^)

Posted by Pavさんへ at 2006.08.18 08:14 | edit

yozoちゃん。おはよーー♪
昨日はありがとうねー♪
おかげさまでナントカできたよー♪嬉しかったぁー☆

この記事の内容は・・・。正直言ってほとんどわからないの。
でもね、真剣に読んで見たよー。絶対勉強になるって思ったからさ♪
この間まゆびさんのところで記事を読んだ時も、ちんぷんかんぷんだったけど、読んでいくうちに・・・。あれ。。。もしかすると・・・。とか気づく事もあってねー♪
だから、今は分からないし、出来ない事でもちゃんと読んでおこうと思ったの。
自分がちゃんとやれてるかどうかなんて、まだまだ私にはわからないのだけれど、yozoちゃんやまゆびさんの記事を読むことはとっても勉強になる!!!
いつかのスキルアップのためにちゃんと覚えておこうと思いました♪勉強になったよー。ありがとーー☆

Posted by enu at 2006.08.18 10:58 | edit

＞enuちゃん、こんにちはー♪

＞おかげさまでナントカできたよー♪嬉しかったぁー☆
いえいえ♪ちょっとだけアドヴァイスしてだけですよ。
できてよかったですね。これからは、自信もって
CSS編集に取り組んでね　d(@^∇ﾟ)/ﾌｧｲﾄｯ♪

＞この記事の内容は・・・。正直言ってほとんどわからないの。
＞でもね、真剣に読んで見たよー。絶対勉強になるって思ったからさ♪
　あらら・・・ごめんなさいね。自分の作業記録みたいな記事になってしまいましたね。この記事にある、seesaaブログの記事の表示の不具合からスタートしたのですよ。それまではyozoも全然意識していなかったんです。┐(´-｀)┌
　まゆびさん、mioさんはともかく、yozoの場合、IEでは見えないエラーのないように記事を書いていかなきゃというだけのことなんですよ。画像を使った記事を書くときに、現在FC2ブログの記事で、IEでは表示されないエラーがたくさんあるようなのです。近い将来、この不具合に直面してパニックになる前に、少しずつでも新しいXHTML準拠の記事の書き方を学ぼうというわけなんです。だから、わかりにくいのも当然かもしれません。yozoもイマイチわかってないことですからね。
一緒に勉強しましょうねくらいに思っていてくださいね。m(_ _)m

＞yozoちゃんやまゆびさんの記事を読むことはとっても勉強になる!!!
＞いつかのスキルアップのためにちゃんと覚えておこうと思いました♪
あはは・・・それでいいのですよ。身近な人が問題意識をもつことによって、それまでは全然関心のなかったことにも、興味をもつことができる。それでいいと思ってますよ。今急いでやらなきゃダメというものでなくて、今からのんびりのらりくらりやっていこうね。ということなんだからね。お互いがんばりましょうね。
d(@^∇ﾟ)/ﾌｧｲﾄｯ♪

Posted by enuちゃんへ at 2006.08.18 14:31 | edit

yozoさん、こんばんは。先日はトラックバックいただき、ありがとうございました！
おじゃまするのが遅くなってしまって、ごめんなさい･･･
メッセージでもお知らせくださって、うれしかったです～

無事、きれいに表示されるようになったとのこと、本当によかったです♪
おめでとうございま～す☆☆

実は昨日、『詳解 HTML&XHTML&CSS辞典』なるものを買っちゃいまして(笑)
そこで知ったのですが、このテキストが表示されなくなる「回り込みバグ」ですが、
floatプロパティを使っても、align属性を使っても発生してしまうことがあるそうです；
画像の高さに対して回り込むテキストの量が少ないと発生しやすいとか。
対処法としてはyozoさんが実践されたように、非推奨のalign属性をやめて
floatを使うようにし、回り込ませるテキストの量もできるだけ多めにするとか･･･
ともかく、現在は上手く表示されているようなので、OKですね☆

わたしもこの本を読んで、少しCSSの勉強をしたいなぁと思っています。
さしあたって
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
こちらのクラスを使えるようになりましたよ♪

ペットのキャプimgを乗せることが多いなら、widthとheightもCSSに設定しちゃうといいかもしれませんね。
POCペットと非POCペット用に、cap1とcap2なんて、2種類用意すると便利かもしれませんね♪

Posted by mio at 2006.08.20 01:17 | edit

＞mioさん、おはよーございまっす♪
こちらこそ、大変参考になりましたよ。、Another HTML-lint gatewayで、少しずつエラーを減らしていくようにしてますよ。(*^-^)

＞無事、きれいに表示されるようになったとのこと、
＞本当によかったです♪おめでとうございま～す☆☆
とりあえず、seesaaの記事の表示はちゃんと見えるようになったようです。
なかなか、解決できずにこちらこそ報告遅れました。m(_ _)m

＞実は昨日、『詳解 HTML&XHTML&CSS辞典』
＞なるものを買っちゃいまして(笑)
あはは・・・mioさんも本格的にXHTMLを勉強されるのですね。(*^-ﾟ)vｨｪｨ♪
yozoもいい本がないかな～って思ってます。本があった方が調べるのも勉強も早いですからね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

＞テキストが表示されなくなる「回り込みバグ」ですが、floatプロパティを
＞使っても、align属性を使っても発生してしまうことがあるそうです；
＞画像の高さに対して回り込むテキストの量が少ないと発生しやすいとか。
えっ？floatでもだめなんですか？テキストを多くしないと不安定ということですね。ある程度のテキストは書くつもりですが、「がーん」と書くだけでは、エラーするかもしれませんね。最悪tableしかないということですよね。（￣ﾍ￣）ｳｰﾝ
なぁ～るほど、アドバイスありがとーございまっす♪m(_ _)m
それにしても『詳解 HTML&XHTML&CSS辞典』ってその名の通り、詳しいことまでのっているのですね。♪⌒ヽ(*ﾟOﾟ)ﾉｽｺﾞｲｯ!!!

＞.clear {clear: both;}
＞.left {float: left;}
＞.right {float: right;}
yozoもそろそろ、インラインのstyleだけでなく、実際に自分がやっている外部ファイルの設定とcHTMLでのlassの記述をしようと思っているのですが、
つい手間を惜しんでます。┐( -"-)┌ﾔﾚﾔﾚ...
しかも、clear:both;は、classにしてないし・・・ﾋｿﾋｿ(ﾉ･o･((｡_｡*)

＞POCペットと非POCペット用に、cap1とcap2なんて、
＞2種類用意すると便利かもしれませんね♪
なぁ～るほど、そうですね。キャプを130×200をcap1、130×170をcap2とするのですね。cap2の枠の設定をWinshotでしなきゃいけませんね。
φ(^∇^ ) ﾒﾓﾅﾉﾗ　いろいろとアドバイスありがとーございまっす♪m(_ _)m
yozoもmioさんに負けないように、がんばらなきゃね。＼(*⌒0⌒)ｂがんばっ♪

Posted by mioさんへ at 2006.08.20 10:15 | edit

yozoさん、こんにちは！

私のブログもエラーチェックしてみました。
結果、-95点でした・・・＿|￣|○

長い道のりになりそうです ┐(´～｀)┌ 　

Posted by ろんちゃん at 2006.08.21 11:54 | edit

＞ろんちゃんさん、こんにちはー♪

＞結果、-95点でした・・・＿|￣|○ 長い道のりになりそうです ┐(´～｀)┌ 　
あはは・・・って-95点っていい点じゃないっすか！
yozoはようやく、『312個のエラーがありました。このHTMLは -17点です』でした。過去記事はほとんど手付かずです。とりあえず最新記事を書くときには、正しく書くようにしているだけで精一杯なんですよ。┐( -"-)┌ﾔﾚﾔﾚ...
お互い長い道のりですよね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ

Posted by ろんちゃんさんへ at 2006.08.21 15:16 | edit

yozoの気が向いたと記2.0

BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪

スポンサーサイト