カテゴリー: CSS

CSSでロールオーバーメニューを作ります。 一般的に、マウスのロールオーバーによる画像の切り替えは、JavaScriptを使うのですが、 CSSのアンカー（<a>）の仕様を上手く利用してやれば、 CSSだけで実現可能です。 実際に、このサイトのナビゲーションメニューで使用しています。 このメニューの鍵は、用意する画像にあります。 例えば、このサイトのメニューの場合、青または橙に見えている部分は実は透過です。 透過に見えている部分は、実は背景色と同じ白。 そして、設定しているアンカーで、マウスが重なったときの背景色を変化させています。

CSS抜粋

<style> a:link{background-color:#000066;}　　# 通常のリンクの状態 a:visited{background-color:#000066;} a:active{background-color:#ff6600;} a:hover{background-color:#ff6600;}　　# マウスがリンクに乗った時の状態 </style>

種明かしをすれば非常に単純なことです。 しかし意外と分からないし、JavaScriptより遙かに簡単。 【応用編】 今回のような疑似文字色変化に加えて、 設定するCSSを、背景色ではなく背景イメージにして、 置く画像をそれに合わせた透明画像（Spacerなど）にしてやれば、 普通の画像によるロールオーバーも可能です。

← マウスを置いてください

コード例

<style> a:link {background:url(https://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;} a:visited {background:url(https://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;} a:hover {background:url(https://www.nobodyplace.com/img/icon/diary/51.gif) #ff6600;border:none;} </style> <a href=””><img src=”http://www.nobodyplace.com/img/spacer.gif” width=14 height=14></a>

これらを利用することで、多少はJavaScriptを減らすことが出来るのではないでしょうか。 （JavaScriptが悪いとは言いませんがユーザを選ぶことも事実なので） もちろん、スイッチが画像以外にある場合や、より複雑な処理が必要な場合は、 CSSでは対処できません。 素直にJavaScriptに頼りましょう。 （個人的はそういう装飾は、避けますけど）

続きを読む

お詫びしておかなければいけないんですが。 MUTTER をCSSに切り替えた結果、IE以外のブラウザに対応できなくなってしまいました。無念。 具体的にどこが問題かというと… FireFox/Operaなどで確認すると、 MUTTERのテキストが長い場合に、 ページフッタの上に被さって伸びて行ってしまう…のです。 IEでこれを見て問題がないのは、 中身の大きさによってブロック要素の高さを勝手に変更してしまうという 柔軟だけどある意味お節介すぎる仕様のせいです。 本来、親要素の高さ指定を具体的にしていなければ、 IE以外のブラウザでも高さを調整してくれるんですが、 MUTTER にはそうしたくない理由がありまして… ていうのは、左側の文章は、 文章が短いときのページ内垂直配置をセンターに持ってきたい、そういう希望があるから。 文章自体は改行を含んでいるし、<div>のブロック要素なので vertical-align（垂直配置。HTMLで言うところのvalignだが、インライン要素にしか使えない） は使えない。 となると残る方向は、テーブルを組むしかない。 出来るだけテーブルは使いたくなかったが、この場合は仕方ない… しかし、ここにも問題があり、テーブルを使って垂直配置する場合には、 セルに対して高さの指定が必要。 コレを指定しないと、セルの高さは内容物の高さになってしまい、 垂直配置どころではなくなる。 そしてコレを指定してしまうと、前述のはみ出し問題が発生するわけである。 うーむむむ… このまま放置するのも良いんだけど、気付いちゃった以上気持ち悪い。なんとかしたい。 方向性としては、４つ。 1) 垂直センター配置を諦める。 2) 文章の行数を計算し、PHPで切り替え 3) overflow:scrollを設定する 4) FireFox 対応を諦める 2) の方法はまだ試していないが、改行（¥n）の数で、文章の行数を割り出し、 そこから実際のテキストのおおよその高さを割り出し、 或る一定以上の高さ（はみ出しが発生する高さ）の時はテーブルの高さを指定しない、 それ未満の時は高さをして垂直に配置する。 出来なくはないが…処理が遅くなりそうで嫌だ。 EntryのBodyだけテキストのみで保存している実現は十分可能だが。 3) のoverflowはセルにスクロールバーを付けるというもの。 デフォルトでは、overflow:visibleの為、はみ出して見えてしまうが、 overflow:scrollにしてやれば、はみ出た分はスクロールバーで調整可能…なんだけど… ちょっと見栄え悪いよね、やっぱり。 ヘッダ、フッタとの整合性がイマイチだし。 正直に言うと、垂直配置を諦めてもいいかなぁ…とも思う。 右メニューが長くなってきてしまって、文章が短いときに テキストがページの下の方へ行きがちだからだ。 ウィンドウサイズが小さいと、アクセス時に読めないこともあるかもしれない。 うーん…そうなんだよなぁ… でもその場合、すかすかのテキスト下を何に利用するか、 というのもなかなか考えどころ… ただただ、『意図のない空白』になってしまうのはちょっと。 むむむ……

続きを読む

現在、NOBODY:PLACEもCSSへの切り替えを検討中なのですが、 なかなか難しい。 それでも一応形にはなったので報告まで。 【現在のテストバージョン】 index_css.php※ 若干、デザインの相違はありますが、それはまぁそれとして、 ほぼ同じ形にまでできあがってます。 ただ、CSSでは、<div>など ブロック要素内の垂直中央に要素を指定することが出来ないので、 エントリの本文の記述部分は、仕方なくテーブルを使用しました。 1セルなので、アクセシビリティ的にも特に問題はないかな…と。 やれば出来るもんですねぇ…そのうち切り替えます。

続きを読む

まだ公開は出来ないけど、CSSを使って作ってたページがほぼ、完成しました。 一応、WinIE6/Opera7/FireFox/MacIE5.2/Safari1.2 で 確認、出来るハズ… そうは言ってもコレは一つの作業と言うよりは、 自分のウェブデザインの中の一つの流れであって、 いままで思いっきり無視してきた方向へ、 今後一気に流れてく可能性がある…いやむしろ決定、かな。 エンジニア的視点で眺めれば、やはり、 構造と装飾とが分離されてるサイトってのは扱いやすい。 仕事では、大体どちらも中途半端なスキルなんだけど 事実上兼ねてるから、どちらも分かる、 デザイナー的には、一つのファイルで直感的に分かりたいし、 エンジニア的には、修正するべき部分がなるべくわかりやすい方がよい。 もしCSSに習熟してソースから直感できるなら… それはやっぱり分離する方が便利だろうね。 コレは結構、オブジェクト指向に似た感じのような気がする。 PHPにもSmartとか、PEARとかあるけど、それらも含めて、 道具と、処理、という分離の仕方がこれから必要になってくる。 や、本当は何年も前からそう言われ続けてきたんだけど ようやく、認知度が高まってる感じを受ける。 ブラウザの対応も含めて。 今後、仕事でも、NOBODY:PLACEでも、その他のサイトでも、 徐々にその方向に切り替えていくつもり。 仕様、バグが混在してて、本当に混乱するけど（苦笑） コレまでが、IEに頼りっきりの手抜き工事だったってだけだわな。 ひとつの区切り、ということで。

続きを読む

今までこの仕様にどれだけ悩まされてきたことか… apeskin作成、フォームプログラムのデザイン、その他諸々。 もう半ば諦めてて、<form>使うときはtable併用がデフォルトになってました。 そうしたら…うお、コレってCSSで回避できるの？？ table使わずにCSSで全て記述、っていっても これだけはどうしようもないだろうなぁ…と思っていたから驚き。 方法は簡単で、<form>に対して、margin:0px;を指定してやるだけ。

form {margin:0px;}

な、なんてことだ…こんなに簡単だったなんて。目鱗。 多分、今日から、関係してるサイト全てで、この設定がされることでしょう。 古いブラウザ（IE3,NS3,4）では回避できないてってそんなこと知るか！ tableで挟むのもね、悪くはないんだけど、 どうやらXML的判定では不整合ってことで弾かれちゃうみたい。 （XHTML化なんて面倒すぎてまだやる気ありませんけどね） それに、ソース的に見たって、 囲むべきところをきちんと<form>~</form>で囲まないと、 意味が分からないもんなぁ… つうか、なんでブラウザがこの仕様ほっといてるのか理解に苦しむけど （何か意味があったんだろうか？） 回避できるようになったってことで…一安心。 THANKS!! 【参考】 HTML,CSSバグ＆回避法リスト : 2. HTML関連 http://www.keynavi.net/ja/bugh/html.html#_title_2_2

続きを読む

IE拡張として、スクロールバーに色を付けられる仕様がありますが、 これをHTML向けと同じように記述しても、MTでは反映されません。 というのも、MTでは厳密に言うとHTMLではなく、XHTML1.0 を採用しており、 XHTMLではモードにより、<body>へのスクロールバーへの指定が無効になってしまいます。 その対策として、対象を<html>へ変更すれば、反映されます（->..:. La Franc .:..: スクロールバー変更）が、 今度は、IE5.5以前のブラウザでは無効になってしまいます。 そのため、確実に設定を反映させるためには、 <body><html>両方への設定が推奨されています。

html{ scrollbar-base-color:#214573; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#CCCCCC; scrollbar-arrow-color:#ffffff; } body{ scrollbar-base-color:#214573; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#CCCCCC; scrollbar-arrow-color:#ffffff; }

参考：CYBER@GARDEN > CSS Tips > スクロールバーのデザインを変える

続きを読む