リンク付き画像をリストに入れたときにできる変なマージンの回避法

画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。
長年（過去2回ですが）苦しんできたこの現象の原因と回避法が分かりました。のでメモ。

HTMLバージョン

XHTMLTransitional、XML宣言あり。

タグの状況

liタグの中にaタグを入れその中にimgタグを入れている。

CSSの状況

ul、li、img共にマージンはゼロ。list-styleはnoneに。

表示：
marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。

---

１．プレーンな状態。

CSSに何も指定していない状態。
ちなみにOperaはこの状態でもマージンがないです。

２．CSSで、ul、li、a、imgタグのmarginを0に。

margin: 0;の指定があるにもかかわらず、変な余白が。

３．imgにdisplay: block;を指定。

モダンブラウザでimg関連の余白の解決法としてよく挙げられるのは、
imgに対してdisplay: block;を指定して画像をブロック要素にする方法。

確かに、Firefox、Safariでは余白がなくなりましたが、
IEでは逆に余白が余計広がってしまいます。

４．liに画像の高さと同じheightを指定。

どうもIEでは、liタグの中にブロック要素があると余白ができるようです。
ので、imgに対するdisplay: block;を消し、
liに画像と同じ高さのheightを指定してみる。

Firefox、Safari、IE7、8で余白を消すことに成功しました。
が、最終関門IE5、6がしぶとく余白をあけています。
シェアが低くなっているとはいえ、まだ彼らを無視することはできない…。

というより、無視したくないので。

５．liにheightを指定したまま、overflow: hidden;を指定する。

これで完成！

ということで、ようやく完成しました。
ルールとしては、

liタグの中に入れるものはブロック要素にしないこと。
liタグには画像と同様の高さを指定し、overflow: hidden;すること。

以上を守ると、ほとんどのブラウザできちんと表示できます。

この問題を解くのに本日2時間費やしました。

以上、メモ終わり。

floatとmargin-bottomのカンケイ

本日は超個人的CSSメモです。

今日、バイト先で作ったサイトの修正をしていたんですが、
どうも、IE6とIE7で、margin-bottomが適用されていないのを発見。
（SafariとかOperaでは全く確認しなかったので、IE特有のものかはナゾ。IE8だとOKだった。）

状況としては、

• floatしてるボックスに、margin-bottomを指定していた。
• floatしてるボックスの親ボックスに対して、position: relative;を指定した。
• floatしてるボックスの中に、position: absolute; bottom: 0; right: 0;　というスタイルを持ったボックスを入れた。

ら、絶対配置したボックスが、floatボックスの一番下のコンテンツにまるかぶりだった。

とりあえず、初めは何が原因なのか分からなくて発狂しました。
最終奥義CSSハックを使おうかとも思いましたが、
原因が分からないのは気持ち悪くて嫌だったので1時間くらい残業して作業をしてたら見事判明。

Firefoxではmargin-bottomが適用されていて、
そのマージンがきちんと空いて、その下に絶対配置ボックスが配置されていて良かったのですが、
IE6、7では全然マージンがきいてなかったんです。

というわけで、floatボックスのmargin-bottomを消し、
floatボックスの親にpadding-bottomを指定してみごと解決できました。

よかった。

原因はあってるかわからないけれど、
これからfloatボックスにmargin-bottomは指定しないことにします。

メモ終わり。

columnで雑誌のようなテキストレイアウト

CSS3のプロパティcolumnに関するメモです。
CSS3なんでまだまだ先の話だと思っていましたが、FirefoxやSafariでcolumnプロパティに関しては先行実装されているようなので。

まずはじめに、CSS3について。
CSS3とは、現在用いられているCSSの最新バージョンです。
まだ勧告段階にもなっていないので、普通のWeb制作で使用できるレベルではないです。

次、columnプロパティの概要。
columnはCSS3で実装予定のプロパティで、新聞のような段組をひとつのボックスで作ることができるプロパティです。

現在のWebでは、ボックスをフロートもしくは、絶対配置してレイアウトをします。
２つのボックスに分けて文章を表示したければ、たとえ文章がつながっていたとしても、二つのブロックに区切り、配置する必要がありました。
columnは、ボックスに記述すると自動的に段組をつくってくれるスグレモノ。
文字サイズの変更にも対応できるし、可変レイアウトを実現できます。

columnは2009年1月10日現在、Firefox、Netscape（Gecko系）とSafari、GoogleChrome（webkit系）でのみ、先行的に実装されています。IE6、7（8未確認）やOperaでは実装されていません。
そのため、以下の説明ではプロパティに-moz-や-webkit-という接頭語をつけていますが、これはそれぞれGecko系ブラウザ、webkit系ブラウザのみに適用される、という意味です。

現時点で発表されているcolumnプロパティは以下。

• column-count（カラム数の指定）
• column-width（カラム幅の指定）
• columns（カラム幅・カラム数を同時に指定するショートハンド）
• column-gap（カラム間の余白を指定）
• column-rule-color（カラム区切り線の色を指定）
• column-rule-style（カラム区切り線のスタイル（破線、点線など）を指定）
• column-rule-width（カラム区切り線の太さを指定）
• column-rule（カラム区切り線に関する指定のショートハンド）
• column-break-before（この要素の前で、カラムを区切るかどうかの指定）
• column-break-after（この要素の後で、カラムを区切るかどうかの指定）
• column-span（カラムをまたいで文字を入れることができます。）
• column-fill（カラムコンテンツの調整？）

以下、詳細を説明していますが、全ては
本家サイト（W3CのCSS3 module: Multi-column layout )を見て意訳したものですので、表現するところが違う場合があります。
あくまでもW3Cのテキストが公式版であり、この文章は私が意訳したものに過ぎません。
以上、ご了承お願い致します。

24Ways～CSSでクリスマス

12月1日から24日にかけて、
「毎日WebデザインやプログラミングなどのTipsをひとつずつ書いて、クリスマスを祝おうじゃないか。」
という企画があるようです。

その名も、24Ways（英語）。

実は2005年から続く毎年恒例行事のようで、今年は4年目。
時間がなくて2008年度分しか見てませんが、2日の記事の繰り返し背景画像製作法が個人的にかなりお役立ちだったので、今後の記事にも期待できそうです。

これ自体も面白い試みだし、これが4年間続いているっていうのも面白い。
去年自分が関わった卒業研究展サイトの企画を思い出してしみじみしました。

ブラウザ差異とリセットCSS

今さらの話題ではありますが、友人のブログに記述があったので。

どのブラウザでも同じレイアウトが約束されるテーブルと違い、
CSSによるレイアウトはブラウザ間でかなり表示に違いがでます。

widthにpadding分の数値が入るだの入らないだの、
floatで指定した方向にマージンを指定すると2倍になるだの、
互換モードになるとフォントのサイズがうまくいかないなどなど。

こういったブラウザによるバグのほかにも、
ブラウザにあらかじめ組み込まれている「デフォルトCSS」なるものもあり、
これもブラウザによってバラバラです。

そこで、俗に「リセットCSS」と呼ばれるものが使われます。
簡単に言うと、すべてのHTMLタグのpadding、marginをゼロに（リセット）するもの。

さすがにブラウザ間のバグをどうこうすることはできませんが、
デフォルトCSSをリセットすることで、ブラウザ間の差異をある程度無くすことができます。
（リセット　CSS　で検索するといろいろ出てきます。）

誰から聞いたか忘れてしまいましたが、
Webは、情報発信媒体で唯一、情報の表示方法が情報の受け手に依存してしまうものです。

テレビの画面はみんな同じ画面だし、雑誌のレイアウトも、見る側が自由に変えることはできません。
でも、Webだけはそうではなくて。
ブラウザによって差異はあるし、OSによっても違うし、画面サイズ、CSSが対応していないブラウザだったり、画像を表示しないブラウザなど、受け手によって見え方が違ってくる。
情報の送り手が、情報の見え方を制御できないのです。

それならあえて見え方を統一する必要もないんじゃないかなぁ、と個人的には思うんです。
見え方を固定できないっていうのがWebならではの個性だと思えば、そんなにイライラもしないし。

ただやっぱりデザイナーさんとしては、自分の作った渾身の、わが子同然の作品が、ブラウザによってずれてるのは許せないことだと思います。

私みたいなデザインに無頓着のコーダーとしては、ブラウザによる差異が新鮮で面白かったりします。
（これは異端かもしれませんが…。）

こればっかりはコーダーの一意で決めることはできません。
別にデフォルトCSSをリセットして大してソースが汚れることはないですから、
デザイナーさん、クライアントさんの意見を優先した方がいいかと。