ヘルプの最近のブログ記事
個人的メモです。
position:absolute;で絶対配置した際、bottom:0;にすると、IE6で要素が消えてしまうバグに遭遇しました。しかしなぜか、top:0;にすると表示されるのです。
(X)HTMLコード
<div>
<p>テキストテキストテキスト</p>
<img src="image.gif" alt="" />
</div>CSSコード
div {
position:relative;
}
p {
width:500px;
}
img {
position:absolute;
right:0;
bottom:0;
}
どうやら、親要素のdivのhaslyoutがtrueになっていなかったのが原因みたいです。
なので、親要素にもhaslyoutをtrueするために、widthを指定しました。
CSSコード
div {
width:710px;
position:relative;
}
p {
width:500px;
}
img {
position:absolute;
right:0;
bottom:0;
}IE6で、tableタグでテーブルを作成していたら、border要素が一部反映されないことがありました。IE6は本当にバグが多くて困ります。
解決方法としては、CSSコード
table td {
position:relative;
}のように、borderが表示されない要素に｢position:relative;｣を指定すると、表示されることがあります。
以前のコラムで、リスト(liタグ）で作ったメニューを横並びにする方法を紹介したのですが、inline要素を使用すると、謎の余白（隙間）が空いてしまうということでした。
これは、ブラウザが改行を空白類文字をして認識してしまうからです。つまり、改行を半角スペースが空いているとみなしてしまいます。
とすると、この余白を消すには、半角スペース分をCSSでネガティブマージンを使用して相殺してしまえばよさそうです。
例えば、以下のようなリストを横並びにします。
(X)HTMLコード
<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>CSSでは、半角スペース分をletter-spacingで制御します。ulのletter-spacingを0.40em分小さくしておいて、liのletter-spacingは元に戻しておきます。
CSSコード
ul.menu {
letter-spacing:-0.40em;
}
ul.menu li {
display:inline;
letter-spacing:normal;
}ただし、この方法ではOperaには効きません。
そこでさらに、ulのfont-sizeを0にして、liのfont-sizeを任意の値を指定します。ただしpx表記以外はブラウザ間で差異が出てしまうので注意です。Operaだけに有効なhackがあれば相対表示もできるのですが、無いようなので・・・。
CSSコード
ul.menu {
letter-spacing:-0.40em;
font-size:0;
}
ul.menu li {
display:inline;
letter-spacing:normal;
font-size:16px;
}ちなみに、font-sizeでの指定はSafariやChromeといったWebkit系ブラウザでは有効ではないようです。このCSSはWindowsXP上のFarefox3.6.13、Opera11.00、Safari5.0.2、Chrome8.0、IE6で確認済みです。
｢IE6以前のブラウザにおいて、floatしたブロック要素にマージン（margin）を指定すると値が2倍になってしまう｣というのは非常に有名なIE6のバグなのですが、最近floatを解除するのに、親要素にfloatを指定して回り込みを解除することをよくしているので、このバグによく遭遇します。このバグの解決方法を紹介します。
(X)HTMLコード
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>CSSコード
li {
display:inline;
float:left;
}display:inline;にすると、他のブラウザで不都合は起こらないのか？という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。
というのも、｢floatを指定した要素にdisplayプロパティは無視される｣と仕様書に書いてあります。
float:left・・・左に浮動するブロックボックスを生成する。 続く内容は、（'clear'プロパティの指定に従いつつ）そのボックスの右側に上から流し込まれる。 このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。
視覚整形モデルより引用
また、リストを横並びにして、余白をマージンで空ける場合があります。その際、最後の余白は不必要な場合、親要素にマイナスのマージン（ネガティブマージン）を指定することで、各要素の間だけに余白を空けることが出来ます。しかし、IE6ではネガティブマージンが効かない場合があります。
余白のあるメニューの特定の余白を消す方法 - CSSデザインノート
IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。
CSSコード
ul {
zoom:1;
}HTMLで画像を指定したメニューをfloatで横並びにしたくて、実際に以下の記事を参考にCSSでロールオーバーメニューを作っていたときの事です。
アクセシビリティの高いCSSロールオーバーメニュー - CSSデザインノート
なぜか、画像の下に余白が開いてしまうことに気づきました。参考元の以下の記事では、そんなことが起こってはいませんでした。
ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 | CSS-EBLOG
これから推測するに、真っ先に思いついたのが、DOCTYPE宣言の違い。私は、｢xhtml1-transitional.dtd｣だったのですが、CSS-EBLOGさんのデモページでは｢xhtml1-strict.dtd｣でした。
試しにxhtml1-strict.dtdにしてみると、下の隙間は空きませんでした。
(X)HTMLコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">ただ、それだけのためにDOCTYPE宣言を変えるのは他にも影響が出そうでなかなか難しいですよね。
画像の下に余白が空いていたのですが、それがulの領域が広がっていたためというのが、FirofoxのWeb Developerを使ってわかったので、単純に思いつくのが、｢line-height｣が悪さをしているのではないかということ。ulかliに｢line-height:0;｣というように、値を0にすると、隙間が空かなくなりました。
CSSコード
ul {
line-height:0;
}あるいは
CSSコード
li {
line-height:0;
}逆に、DOCTYPE宣言が｢xhtml1-strict.dtd｣で、ulかliに｢line-height:0;｣を指定してしまうと、余白が空いてしまうようです。どうしてこのようなことが起こるのかよくわかりません。
ちなみに｢xhtml1-transitional.dtd｣で余白が空いてしまうのは、Firefox、Google Chome、Safari(Windows XP）でした。｢xhtml1-strict.dtd｣でulかliに｢line-height:0;｣でレイアウトが崩れてしまうのが、Firefox、Operaでした。
IE6と7は特に不具合は起こりませんでしたが、IE8だけは｢xhtml1-transitional.dtd｣かつ｢line-height:0;｣を指定すると余白は消えましたが、｢xhtml1-strict.dtd｣だけでは余白は消えず、｢xhtml1-strict.dtd｣かつ｢line-height:0;｣をすると、余白は消えました。謎ですね。
要約すると、隙間を空けないようにするには、DOCTYPE宣言を
(X)HTMLコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">にして、CSSにて、
CSSコード
ul {
line-height:0;
}あるいは
CSSコード
li {
line-height:0;
}を指定します。
例えば、画像をポラロイド風に見せたいときなど、画像にpaddingを指定しても有効にならない場合があります。
CSSコード
img {
padding:2px;
border:1px solid #999;
}これは(X)HTMLファイルが互換モードになっているためです。DOCTYPE宣言で標準モードにすればpaddingが有効になります。
どんなファイルでもそうですが、ファイルに記述された文字（データ）は符号化されます。元々、PCは1バイトしか利用できないので、2バイト文字である日本語は、一度符号化しなければなりません。
これをエンコードといい、ファイルを保存するときは、エンコードの形式を指定する必要があります。形式には｢Shit-JIS｣とか｢EUC-JP｣などがあります。
CSSファイルを適切なエンコードで保存しても、再度開いたときに、日本語が文字化けしてしまっているときがあります。これは、適切にデコード（エンコードの逆）ができていないためです。
そのような場合は、CSSファイルの一行目に
CSSコード
@charset "utf-8";と記述します。
あるいは、外部CSSファイルを読み込む場合でしたら、HTMLファイルのほうから、エンコードを指定することができます。HTMLファイルの<head>～</head>タグ内に記述してください。また、以下のコードは外部スタイルシートを読み込む前に記述しなければなりません。
(X)HTMLコード
<meta http-equiv="Content-Style-Type"
content="text/css; charset=utf-8" />※可読性を上げるため、2行で記述していますが、実際は1行で書いてください。
エンコードを@charsetあるいはmetaで指定しておかないと、特に、日本語表記でフォントの種類を指定している場合など、文字化けにより正しく認識されず、適用されない場合がありますので気をつけましょう。
フォームを作成するとき、tableタグを使用するととても便利ですが、tdタグ内にformタグを入れると、formタグの上や下に謎の空白ができることがあります。これは、ブラウザによるもので、formタグの前後に自動改行が入ってしまうことに起因します。これを解決するためにはformのmarginを0にします。
CSSコード
form {
margin:0;
}余談ではありますが、かなり昔この空白を無くすためにtableのtrタグとtdタグの間にformタグを入れるという荒業があった頃が懐かしいです。これは正しくない構造で、CSSが一般的に広まってない頃に流行っていました。
できるだけ、formタグはtableタグの外に設定するようにしてください。しかし、最近はテーブルではなくliタグを使用してあたかもテーブルのように見せる手法も多く出てきましたね。
画像を指定したとき、画像の下に空白ができた、なんてことありませんか？hタグやtableタグ内にimgタグを入れたりしたときなど。これはブラウザのバグではなくて、CSSの仕様のせいです。
画像の下に余白ができるのは、ブラウザによっても異なりますし、DOCTYPE宣言の違いによっても異なります。この余白ができる理由ですが、画像をテキストのベースラインに揃えて表示されるからです。
上の画像で言うと、青い線で囲んであるのがhタグやテーブルの範囲です。赤い線がベースライン。見てのとおり、アルファベットのpやgはベースラインよりも下にも文字があります。画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればよいわけですね。
スタイルシートで以下のように設定してください。
CSSコード
img {
vertical-align:bottom
}これで、画像の下から空白がなくなります。
letter-spacingは文字間のスペースを調節するのに便利なプロパティです。しかし、その際、brタグを2回入れないと改行されなくなってしまいます。これを回避するためにはbrタグだけletter-spacingの指定を解除する必要があります。
CSSコード
br {
letter-spacing:normal;
}
これでbrタグを2回入れることなく、正常に動作します。
