Firefox 3正式版リリースがされました。早々ダウンロードしてＣＳＳ関係を見てみました。下記のＵＲＬにリスト関係のサンプルページがありますが、すべて正しくマークが表示されました
http://web.okanos.com/sample/list-style-type.htm
CSS Nite in Osakaが開催されます。
決定したセッション概要
◇デザインとWebシステムとの付き合い方
／古荘貴司（株式会社日本情報化農業研究所）
◇入門以前！デジタル一眼 ～ケータイ・コンデジからのステップアップ～
／岡田陽一
◇Web業界における未経験人材をどのように育てていくか
／冨田千紘
マンネリなので新年に向けてデザインを少しいじってます。
とはいっても全体のレイアウトは変えずに、背景画像を重ね合わせてみました。
一番下の背景には、コンテンツの両サイドにグラデーションのエッジが表示されるように、センター表示です。
コンテンツより少し長めの背景画像で両サイドをグラデーション処理したものです。
次にヘッダーです
ヘッダーには、グラデーションのパイプ状の背景をタイルで貼り付け
その中にヘッダーコンテンツの領域を取りその領域の背景に神戸の写真をランダム表示しています。
ランダム画像に関しては、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」ボックスには大きさの指定を行いません。
okanowebの静的ドキュメントはすべて左サイドバーの２カラムで作成していますがMovableTypeで作成しているトップページと主要コンテンツのトップおよび投稿記事について３カラムレイアウトに変更しました。
理由はサイドバーのメニューの増加でページの長さが長くなりすぎたので短くしたかったというのもです。
それと、Snap Shots を復活させました。
煩わしいとの批判もありますが、こんなツールもあるよというアピールです。