画像の隙間をなくすHTMLコーディング

mixiの今日の表紙,IEでは見ていないが,SafariやFirefoxで見ると微妙に隙間が空いている。原因と考えられること,および対策を述べよ>学生諸君。

隙間が見えない...

すみません、学生ではないのですが思わず反応してしまいました。
私はMacを持っていないのですが、iCaptureで見る限り隙間は見えません。(別のページのことをいってるのかな?はずしてたらゴメンナサイ)
ちなみに、WinのIE6,Firefox1.5,Opera8.5とも問題なしです。
一応対策はテーブルレイアウト->CSS,分割画像->1枚・背景画像でしょうか。

○|○|な表紙ですが,F

○|○|な表紙ですが,FirefoxでもWinなら大丈夫なんですね。不思議です。

Internal Server Error

Internal Server Error になってます

直ってますね

画像の隙間というのは認識できませんでした。
おねえちゃんはかわいい :)

答えになっちゃうかも

答えになっちゃうかもしれませんが要はdescenderの問題なので,デフォルトフォント設定にもよりますし,文字を大きくすると目立つと思います

ただし解答としては「

ただし解答としては「文字を小さくする」以外の答えを望んでいます

なるほど

なるほど、確認しました。

ところで</html>の下にある、

はなんだろう、、、

# ○|○|のおねえちゃんが消えた、、、さみしい

EOF

昔のDOSでは^Zをテキストファイル末の印としていたころのなごりで,いまだにこんな制御文字を入れちゃうエディタがあるようです

おねえちゃんが消えて

おねえちゃんが消えても依然として隙間が空いていますね。図柄によって目立つかどうかの違いだけで,前から空いていたんでしょうね。

いまWindowsのIEとFirefox

いまWindowsのIEとFirefoxで見てみましたが,IEでは文字の大きさを5段階しか切り替えられず,最大でもつながって見えます。Firefoxでは文字を大きくする(Ctrl +)を何回か押すとすぐ隙間が見えてきます。

意味がわかりました

次期IEやOperaなら問題ありませんが、MozillaのようなTextZoomだと問答無用に崩れるでしょうね。
最近はこういったレイアウトをあまり見かけないので、気がつきませんでした。

えっ,Mozillaの欠点な

えっ,Mozillaの欠点なのですか? これがstandards-compliantな動作かと思っていました。それに,HTMLすぐ直せるし。

いえ、欠点ではないと

いえ、欠点ではないと思います。IEよりかなり優れていますし。
ただOperaのZoomのように画像も一緒に拡大してくれれば、レイアウトが崩れにくいな~と、だたそれだけです。

画像も一緒に拡大して

画像も一緒に拡大しても,隙間の絶対量は同じだと思いますが

それは当たり前なんで

それは当たり前なんですが...
あくまで各ブラウザの最小フォントサイズをいじらない場合での話です。
変な書き込みしてすみません、撤退します。

いえいえ,撤退してい

いえいえ,撤退していただかなくても,単なるつっこみですので,お気軽に議論していってください。いろいろ書いていただくと学生たちにも論点がわかってもらえると思います

>撤退していただかな

>撤退していただかなくても
とのことなので戻ってきました。
一応対策は最初の方で述べたのですが、画像の分割をやめて1枚の画像にするではだめなのかな。
それとも某所のようにXHTML+CSSで組みなおしてみなさいってことなのだろうか?

HTMLのお勉強ですので

HTMLのお勉強ですので,画像を1枚にしたり根本的に書き直したりするのではなく,ほんのちょっとタグを直してまともにしてくださいという趣旨の問題です

>ほんのちょっとタグ

>ほんのちょっとタグを直して
これ、ちょっとどころじゃないと思うんですが。
このようなパズル的レイアウトを直すのなら、素直に画像1枚のCSSで作り直すほうが早い気がします。
>HTMLのお勉強ですので
お勉強ということなら今更テーブルレイアウトをどうこうするよりCSSを覚えたほうがいいと思うんですが。
どこかの専門学校生がmixiをXHTML+CSSで組みなおしたみたいなので、自分もそれを使ってトップページの組直しをやってみようと思います。

失礼しました。では

失礼しました。ではもっと問題を単純化させましょう。このページの図がもし離れているならどうやったらくっつくでしょうか。

こちらこそ生意気な

こちらこそ生意気なこと言ってすみません。

問題の回答ですが、答えは簡単。テーブルをやめてCSSで組めば隙間は出来ません。というのは半分嘘で半分本気です。
これじゃ答えにならないので回答はimg要素にvertical-align:bottomでたいていは解決します。
が、もっと複雑な画像の組み合わせをやると頭が混乱するだけなので、テーブルでの画像パズルはやめましょう。
テーブル内の画像に関しては以下の所が参考になるかと思います。
http://www.mozilla.gr.jp/standards/webtips0018.html
http://www.mozilla.gr.jp/standards/webtips0025.html

おぉ,ちゃんと書い

おぉ,ちゃんと書いてあるサイトがあったんですね。気づきませんでした。ありがとうございます。これで解答を書く手間が省けます。
しかしこのサイトも「tableによるレイアウトは様々なハンディキャップを持つ方に迷惑をかけることになります」という誤解をしてますね。読み上げの順序を考えてコーディングしなければいけないのはCSSでもtableでも同じことなのに。特にこの場合は図のスライスをtableで配置してもCSSで配置しても違いはないですけれど。CSSでposition:absolute使ったらNN4な人がびっくりするという違いはありますが。

コメントの表示オプション

お好みの表示方法を選択し、「設定の保存」をクリックすると、表示方法を変更することができます。