CSS スタイルシートの最近のブログ記事

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

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

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

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

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

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

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

マンネリなので新年に向けてデザインを少しいじってます。

とはいっても全体のレイアウトは変えずに、背景画像を重ね合わせてみました。

一番下の背景には、コンテンツの両サイドにグラデーションのエッジが表示されるように、センター表示です。

コンテンツより少し長めの背景画像で両サイドをグラデーション処理したものです。

次にヘッダーです

ヘッダーには、グラデーションのパイプ状の背景をタイルで貼り付け

その中にヘッダーコンテンツの領域を取りその領域の背景に神戸の写真をランダム表示しています。

ランダム画像に関しては、JavaScriptによる方法はたくさん紹介されています。その場合、ランダム表示する画像のファイル名を連番にするなど制約があったりします。

そこで探してみました。

rotate.php　を使う方法です。

参考ページはhttp://chocobit.com/2007/03/19.php

バナー画像などはＤＩＶなどの背景画像にbackgroundで指定されるので、ＣＳＳファイルでその指定を、

background: url(rotate.php) no-repeat;

などのように指定すればＯＫ

ファイル名は何でもＯＫですが拡張子は、rotate.php　のソースを見れば以下のようになっています。

 $extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png'

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

たとえば「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」ボックスには大きさの指定を行いません。

左のサイバーのメニューを項目毎に、上下に飾りをつけてみました
項目名のバックグラウンドイメージで上部飾りを定義します。
項目自体を、ＤＩＶ要素で囲み、最下段にpadding-bottomで下の飾り余白を取ります。
ＤＩＶ要素の背景画像をbackground-positionで最下段に表示させます。

　　　　　　　＋

スタイルシートでは、各要素に指定された制御を後継要素に引き継がれます。この性質は便利な場合もおおいですが、レイアウトやデザインで困ったことになる場合も多々有ります。
回り込みの解除には、clear指定で解除できますが、その他の場合親要素の指定を解除する場合は、親要素で指定された項目を置き換える設定が必要になります。

色々と探してみたり試したりするが、ＣＳＳのカスケードという名のとおり（滝状・継続して引き継ぐ）ＣＳＳそのものの機能なので、難しいようです。

そこで、ＣＳＳを作成する場合、とくに要素を入れ子で指定する場合には、クラス設定で細かな設定を行うことになるようです。