スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

DOCTYPE宣言による表示モードの違いに対するCSS解釈の違い

各表示モードによる CSS 解釈の違いをまとめたドキュメントを共有 - 2xup.org

HTML/XHTMLは、最初のDOCTYPE宣言によって、『標準モード(standards mode)』と『後方互換モード(quirks mode)』の2種類に分かれます。これらのDOCTYPE宣言によってCSSの解釈が変わってくるという、地味にやっかいな仕様です。IE6はさらにバグがありますし…。

例えばこのブログの場合、DOCTYPE宣言は

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
となっているので、XHTMLの標準モードとなります。

一行前にXML宣言をしていないのはIEのバグを回避するためです(DOCTYPEより前に記述があると、IEではquirks modeになるため)。

CSSにおいては特にIEにバグが多く、そのくせIEのシェアが圧倒的なため、Web制作者にとっては頭の痛い問題です。CSSハックがよく話題に挙がるのも必然ですね。

上記リンク先では、そういった違いに関して記述されているので、正しくCSSを記述しているはずなのにブラウザごとに表示が違う、という場合に役立ちそうですね。

※記事のカテゴリは悩みましたが『CSS』ということで。

Posted at 2007年07月29日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

CSSを利用して、画面中央にdiv要素を配置する方法

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

CSSでdiv要素を画面中央に配置する方法が紹介されています。

HTMLのソースが非常にきれいさっぱりになっているのがいいですね。個人的に使うことはあまりなさそうなんですが、サイトのトップにEnterページを配置しているサイトでは重宝するかもしれません。

Posted at 2007年07月22日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

floatでレイアウトする際の子要素のはみ出しを回避する方法

floatでレイアウトする際のテクニック

floatで段組レイアウトをする際に、親ボックスが子の要素の高さより短くなって子の要素がはみ出たようになってしまうことがありますが、親ボックスのoverflow属性にautoまたはhiddenを指定することで回避することが出来るそうです。

このトラブル、たまに遭遇することがあって今まではtableを使って逃げていましたが、これからはこの手段で回避できそうです。

Posted at 2007年07月21日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑

CSSを利用して、画像にロールオーバーのような効果をかける方法

CSSでロールオーバーもどき[to-R]

CSSを利用して、画像にロールオーバーと似たような効果をかける方法が紹介されています。

こんな方法があるとは知らなかったので勉強になりました。不透明度をコントロールするくらいのロールオーバーを想定しているなら役に立ちそうです。

Posted at 2007年07月21日 | 記事URL | CSS | Trackback(0) | Comment(0) | Top↑
前ページ | Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。