ＨＴＭＬ＆ＣＳＳの最近のブログ記事

ブラウザでは標準規約として規程されたCSSプロパティ、標準規約で規程されているものの完全には準拠していないCSSプロパティ、現在標準化が進められているCSSプロパティ、ブラウザベンダが用意した独自拡張プロパティなどがある。

こうしたプロパティのうちブラウザベンダが用意した独自拡張プロパティや標準規約で規程されているものの完全には準拠していないCSSプロパティ、現在策定が進められているプロパティは-ms-、-moz-、-o-といったベンダプレフィックスを指定しなければならない。

これはCSS 2.1仕様で規程されている。

 ＣＳＳ２の新しい機能を確認するにはＩＥ７では不十分です。

Mozilla Firefox3でも確認できましたが、Ｃｈｒｏｍｅが追加されたわけです。

試したい方は、下記のアドレスでリスト表示の新しい形を確認ください。特にリストマークとしてひらがなやカタカナ、イロハが使えます

http://web.okanos.com/sample/list-style-type.htm

リンクに関する疑似クラスでは記述する順番が重要とのことで記載の変更をしました。

たとえば「hover 」が「visited」よりも先に記述されると「visited」スタイルに上書きされてしまいます。
そのため、リンク先から戻って来たときには「hover」に書いたスタイルは無効になってしまいます。

正しい順序だそうです。

a:link
a:visited
a:active
a:hover

CSS で大きなボックスの中に横並びにボックスをレイアウトする場合、「float: left」「float:right」を使います。この「float」を閉じておかないと、正しくレイアウトされない原因にもなります。

left　right　の指定ブロックの後にclear:both（左右のfloatを解除）を追加するとfloat指定の影響を解除されます。

ブログのレイアウトのようにサイドバーを右寄せ・左寄せする場合フウターの表示が崩れたりします

最近ではメインブロックを段組するケースも増え、ＤＩＶブロックを横に並べる場合に右寄せ・左寄せの解除が重要になりますね

四方にラインを指定した100pxのボックスでそのままで周囲にたとえ1pxのラインでも左右合わせて102pxになります。

見た目160pxで四方30pxの「padding」と1pxの枠線のボックスのサイズは...といったボックスごとにサイズを割り出すという大変ややこしい事になり、レイアウトが崩れる原因にもなります。

これを回避するには、基本の大きさを指定したボックスの中に「inner」ボックスを作り、そこに余白やラインを指定します。この場合「inner」ボックスには大きさの指定を行いません。