ヘルプの最近のブログ記事

フォームのデザインをCSSで変更しても、iPnoneでは初期状態の丸角デザインのままで、指定したCSSが適用されません。そういうときは、webkit用のCSSを設定します。

CSSコード

input {
	-webkit-appearance: none;
	border-radius: 0;
}

例えば、メニューなど、ある程度高さのある要素にテキストを縦方向(垂直方向)に真ん中に持ってきたい場合は、line-heightを用いる方法があります。

しかし、画像とテキストを一緒に並べたときに、IE7ではline-heightが効かないバグに遭遇しました。調べてみますと、CSS HappyLifeさんの記事を見つけました。

ここではうまい解決方法にたどり着かれていませんでしたが、これを見てひらめいたことは、imgタグが悪いということです。displayプロパティでどうにかなりそうな気がしたので、試してみたらビンゴでした。

(X)HTMLコード

<p>
あああああ<img src="image.gif" alt="" />いいいいい
</p>

CSSコード

p img {
   display:inline-block;
   line-height:40px;
   vertical-align:middle;
}

これで、テキストも画像も縦方向(垂直方向)に中央寄せになります。

IE6やIE7で閲覧した際に、marginやpaddingを0に指定しているのに、画像の上部に謎の余白が空いている場合があります。

これは、フォントのサイズが画像よりも大きい場合に起こります。

例えば、hタグに画像を使った場合、特にフォントのサイズは指定しないと思うのですが、実際にはブラウザのデフォルトのフォントサイズが適用されていますので、IEではその分の大きさの領域を占領してしまうのです。

できるだけリセットCSSを利用して、hタグの大きさを普通のサイズ程度に小さくしておくのが無難ですね。

個人的メモです。
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ではネガティブマージンが効かない場合があります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。

CSSコード

ul {
   zoom:1;
}
これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。

HTMLで画像を指定したメニューをfloatで横並びにしたくて、実際に以下の記事を参考にCSSでロールオーバーメニューを作っていたときの事です。

なぜか、画像の下に余白が開いてしまうことに気づきました。参考元の以下の記事では、そんなことが起こってはいませんでした。

これから推測するに、真っ先に思いついたのが、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で指定しておかないと、特に、日本語表記でフォントの種類を指定している場合など、文字化けにより正しく認識されず、適用されない場合がありますので気をつけましょう。