OKANOsは、10年以上継続して運営されている個人のホームページ作成支援サイトです。

Google AdSense

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

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

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

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

 CSS2の新しい機能を確認するにはIE7では不十分です。

Mozilla Firefox3でも確認できましたが、Chromeが追加されたわけです。

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

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

 

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

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

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

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

次にヘッダーです

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

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

 

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

そこで探してみました。

rotate.php を使う方法です。

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

バナー画像などはDIVなどの背景画像にbackgroundで指定されるので、CSSファイルでその指定を、

 

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

などのように指定すればOK

ファイル名は何でもOKですが拡張子は、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指定の影響を解除されます。

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

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

 

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

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

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

CSS では,セレクタと呼ばれるパターンマッチの規則を用いて,ツリー構造内の要素に適用されるスタイル規則を決定する仕組みになっています。 このセレクタの章を読まれる前に,まず構造と規則を目を通すことをお奨めします。

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

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

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

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

 1  |  2  | All pages

スポンサードリンク

このアーカイブについて

このページには、過去に書かれたブログ記事のうちCSS スタイルシートカテゴリに属しているものが含まれています。

次のカテゴリはHTML タグです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

アーカイブ

Random pinup

Random pinup

このブログはさくらのレンタルサーバSAKURAで運用しMovable TypeMovableTypeで作成されています

あわせて

あわせて読みたい

フィードメーター - 中老SE岡野@神戸