- ベストアンサー
imgのalign属性をcssに変更すると位置がずれる
- 質問文章では、imgタグのalign属性を使って文章中の図の位置を調整していました。
- しかし、align属性をCSSのクラスに変更したところ、位置がずれてしまいました。
- 解決法については、現在探していますが、詳しい情報が見つかりませんでした。
- yocean1201
- お礼率66% (18/27)
- HTML
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
> 現状、以下の宣言で正しい位置に表示されているhtmlがあります。 > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 上記を【A】、 > 宣言を > <?xml version="1.0" encoding="UTF-8"" ?> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 上記を【B】、とさせて頂きます（ちなみに"UTF-8""、とダブル・コーテーションが余計に一つついているのはコピペミスですよね）。 （しかし、比較対象がHTML4.01ですらなく3.2の事を仰っているとはさすがに想像しませんでしたが…） > ベースとなる指定は一切ないと考えていただいて結構です。 【B】のCSSは以下のみとさせて頂きました。font-size、line-heightなどは一切指定しておりません。 img.top { vertical-align: top; } img.middle { vertical-align: middle; } img.bottom { vertical-align: baseline;←bottomの替わりに使用しているのは、前回回答させて頂いた理由に依ります。 } ご提供された情報でサンプルを作成し、IE6、Firefox2/3で表示結果を確認させて頂きました。 しかし私の環境では、「正しい位置に表示されている」という【A】の方がおかしな表示（IE、Firefox問わず）に見えているのですが…？ 2番目の、ALIGN="MIDDLE"、を指定している画像の、続くテキストとの位置関係は、「中央」ではなくむしろ「上寄せ」になっている様に見えます。 一方の【B】では、続くテキストが画像のほぼ「中央」に揃っている様に見えます。 > このときに css で middle, bottom の指定をどうすればよいのかお聞きしたいのです。 上記の様に指定したものを検証する限り、実装結果は「正しい」としか言い様がないので…申し訳在りませんがこれ以上お答えできる事はなさそうです。【B】は仮に適当なfont-sizeを指定（例えばfont-size: 12px;）したとしても表示結果は意図した通りのものになりますので。 > これならば、css で元の状態と同じように表示できますか？ 検証結果に従って言うなら、「同じ」にはなりません。また、ANo.4様もご指摘の通り、HTMLの拡張属性だったもの＝CSSのプロパティ、というわけでもありません。それぞれ定められた仕様の元に、各ブラウザごとの解釈で実装しています。上記のCSSによる指定の挙動に納得が行かないのであれば、質問者様が望まれる結果を得られるDOCTYPE及びマークアップを選択されるのもやむを得ないでしょう。
その他の回答 (5)
- abril
- ベストアンサー率69% (388/560)
> XHTML+CSSに移行するのに、表示のためにtable を使うってのは、ちょっと本末転倒になってしまいますね・・・。 無論です。ANo.2での発言は決して「tableにすればいい」という意味ではなく、単に文書内容を確認したかっただけですので… > CSSの指定はどうすればよいか、ということが知りたいです。IEには確かにバグが多いですが、firefoxでも位置がずれます。 > これはfirefoxにもvertical-alignのバグがあるのでしょうか。 > それとも指定方法を変えれば、正しく表示されるものなのでしょうか。 Firefox2/3に関しては特にvertical-alignプロパティに関するバグは報告されてなかった様に思いますが…念の為適当なキーワードで検索してみましたが特に見当たらない様です（検索漏れでしたらすみません）。ただ、私自身は今までの制作経験で、Firefoxでvertical-alignの挙動が思い通りにならないという事がなかったので、質問者様の仰る「firefoxでも位置がずれ」る、という状況がいまいちイメージできません。もしかしたら他の要因などが絡んで、ある一定の条件の下では不具合の様に思われる状態が引き起こされるのかもしれないですね。前後のブロックを含めたもう少し詳しいサンプル（画像のファイルサイズやCSSのベースとなる指定（font-sizeやline-heightなど…）、XHTMLのヴァージョン、XML宣言の有無、も）を公開された方が解決の糸口が見つかるかも…？ ANo.3様へのレスを見ると、 > 文章中に複数の画像が何度も出てくるようなソースなのです。文と絵文字が混在するような感じでご理解いただければいいかと思います。 …とありますので、その様な状況だとちょっとこちらが当初イメージしていた様なものとは異なる様ですので。 > background-image で対応できるものなのでしょうか？ その画像が論理構造上どういう意味を持つかにも依りますし（「意味」のある画像、それが表示されないと文書内容自体が正しく把握できなくなる、という情報を持つものであれば「背景」にすべきではないと考えます）、文書構造がどの様になっているかにも依りますね。 ということで、 > CSSの適切な指定でうまくいくものかと思ったのですが、できないということなんでしょうか。 現段階では情報不足の為、判断は下せないです。
お礼
現状、以下の宣言で正しい位置に表示されているhtmlがあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> CSSの指定は一切なしで、BODY内で以下のように書いてあります。 ++++++++++++++++++++++++ 例えば、 <IMG WIDTH="27" HEIGHT="27" ALIGN="BOTTOM" BORDER="0" SRC="img1.gif" ALT="img1"> とか、他にも <BR> <IMG WIDTH="53" HEIGHT="29" ALIGN="MIDDLE" BORDER="0" SRC="img2.gif" ALT="img2"> とかのimgタグが文章中にこうやって <IMG WIDTH="16" HEIGHT="14" ALIGN="BOTTOM" BORDER="0" SRC="img3.gif" ALT="img3"> 入ってる. +++++++++++++++++++++++ 宣言を <?xml version="1.0" encoding="UTF-8"" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> に変更し、BODYをスクリプトで以下のように変更します。 *********************** 例えば、 <img width="27" height="27" class="bottom" src="img1.gif" alt="img1" /> とか、他にも <br /> <img width="53" height="29" class="middle" src="img2.gif" alt="img2" /> とかのimgタグが文章中にこうやって <img width="16" height="14" class="bottom" src="img3.gif" alt="img3" /> 入ってる. ************************** このときに css で middle, bottom の指定をどうすればよいのかお聞きしたいのです。 ベースとなる指定は一切ないと考えていただいて結構です。 逆に目的にあった表示のために、必要となるベースの指定があればそれも含めて教えてください。 これならば、css で元の状態と同じように表示できますか？
- mibusys
- ベストアンサー率60% (18/30)
まず第一番目にhtmlやcssの結果をどのように表現するかはhtmlの仕様では 規定されておらずブラウザにまかされており、その実装ごとに異なります。 第二番目にhtmlの属性による指定とCSSによる指定は別のものです。 多くの場合、多くのブラウザで対応する表記では同じ表現になるよう 実装されていますが、それはそのブラウザがたまたまそのように 実装されているだけともいえます。 過去の遺産を新しい仕様に移行する場合には、簡単に移行できない点はつきものです。 あきらめてtableなどを使用する方法が確実に思えます。 また逆にこれだけ爆発的に普及してしまった仕様は少なくとも100年か200年は 互換性が保たれたまま使い続けることでしょう。 なので、部分的に属性に頼るというのもひとつの手だと思います。
imgで希望の位置に画像を表示出来無いのなら、いっその事CSS「background-image」でブロックレベルの要素で囲んで背景画像化したら如何でしょうか？ コレなら自由度はimgに比較して遥かに高いと思いますが・・・ 勿論「単一繰り返し無し」の表示で。
お礼
文章中に複数の画像が何度も出てくるようなソースなのです。 文と絵文字が混在するような感じでご理解いただければいいかと思います。 このようなものにも background-image で対応できるものなのでしょうか？
- abril
- ベストアンサー率69% (388/560)
> ぴったり合うものはないのでしょうか？ 【参考】http://cssbug.at.infoseek.co.jp/detail/winie.html 【参考】http://webtech-walker.com/archive/2007/05/21215114.html 上記にIE6（及びそれ以下のヴァージョン）のCSS関連のバグリストが整理されていますが、こちらをご覧になればおわかり頂けます様に、IEは仕様に添わない独自解釈（バグ）が非常に多く、今回質問者様が煩わされているvertical-alignプロパティだけでも5項目も不具合が報告されています。こればかりはIEの実装状況なので、どうしようもないかと… 画像と隣り合う文章の水平方向の位置に対し、vertical-alignがIE6でもきっちり有効になるには条件が限定されます。「画像」と「テキスト」がtableの別々のセルに入っていれば、それぞれのtdに対してvertical-alignを調整すれば解決するので楽なのですが、「表」が相応しい様な文書構造ではないですよね？ 時間がなく、今回の質問者様のケースに当てはめられるか未検証ですが、もしかしたら下記の方法あたりの応用が利くかも？しれません。 http://oshiete1.goo.ne.jp/qa4334242.html ご希望に添えない場合は悪しからずご了承下さい。
お礼
<img align="bottom" ...> で適切な位置に表示されていたものをXHTML+CSS に移行するために<img class="bottom" ...> で指定し,CSSで img.bottom { vertical-align:bottom; } と指定するとずれてしまうので、CSSの指定はどうすればよいか、ということが知りたいです。 XHTML+CSSに移行するのに、表示のためにtable を使うってのは、ちょっと本末転倒になってしまいますね・・・。 IEには確かにバグが多いですが、firefoxでも位置がずれます。 これはfirefoxにもvertical-alignのバグがあるのでしょうか。 それとも指定方法を変えれば、正しく表示されるものなのでしょうか。 CSSの適切な指定でうまくいくものかと思ったのですが、できないということなんでしょうか。
- abril
- ベストアンサー率69% (388/560)
> alignで設定していたときと位置がずれます。 思った通りの表示にならないのは、IE6/7で下端に合わせにしようとした場合（img.bottom {vertical-align: bottom;}）のみではないですか？ 念の為検証してみましたが、その組み合わせでしか不具合が起きない様ですので。 img.bottom { vertical-align: baseline; } に変更すれば、とりあえずIEでも「下端に合わせ」た状態になります。厳密には"vertical-align: baseline;"と"vertical-align: bottom;"はイコールではないのですが（それは質問者様が参考にされたサイトにも書いてありますのでご承知の事と思います）、まあ手っ取り早い妥協策として。
お礼
確かに bottom だけみたいです。 baseline にすると、大体あってますが、まだちょっとずれてるような 感じですね。 text-top の方があっているんですが、たまに大きくずれるものがあります。 ぴったり合うものはないのでしょうか？
お礼
HTML3.2 なのは、HTMLをあるソフトで自動生成していて、そのソフトの吐く HTML が 3.2 なのです。 もう更新されていないソフトのため、このHTML3.2をXHTMLに変換するために試行錯誤してます。 このソフトは画像も含めて作成し、その HTML3.2の <img align="...">では適正位置（middleが「中央」になっているかではなく、見た目上文字と並んで表示される適切な位置）に設定されるのです。 なので、質問は「 HTML3.2 のimgタグのalign属性と同じ位置に XHTML で表示することはできるか？」というのが正しい質問ですね。 混乱させてしまい申し訳ありません。 この質問の意味においても、何度もお返事いただいているようにブラウザの挙動に依存するため不可能だということであれば、この質問は終了させていただこうと思います。