カテゴリー:2006年6月

リンクテキストにアクセント(画像)をつける

2006年6月30日 20:01

リンクテキストにマウスオーバーで色を変化させたり、というのはよくあると思います。
それではなく、リンクテキストにちょっとした装飾を施しちゃいましょう。
例えば、リンク文字の横に矢印の画像を入れたりとか。

Win IEで透過PNG画像を使う

2006年6月30日 13:44

さてさて、透過PNG画像。使えるととても便利で、
デザインの幅も広がります。
しかし、Win IEでは透過機能が使えないという大問題がっ。
(またおまえか! とか思いますねw)
まぁIE7になればちゃんと表示されるようになるみたいですが。

しかしながら、Win IEでもなんとか見れる方法があります。
それが今回の記事の主題です(*'-')

CSSによる画像を使ったロールオーバー

2006年6月27日 00:07

ソース解説を追記しました(*'-')

CSSによる画像を使ったロールオーバーです。
すでに色々なところで言われていて、結構ポピュラーなことだと思いますが、
まぁ備忘録ってことでお付き合いくださいw

▼サンプルはこちら
CSSによる画像を使ったロールオーバーのサンプル

新しくサンプルを作りなおして再アップしました。

CSSによるポップアップメニュー

2006年6月23日 23:30

この後のエントリーで「CSSのみでプルダウンメニューを作る」を書き足しました。こちらではJavascriptを使わずにIE6を含めたすべてのブラウザでプルダウンメニュー(ポップアップメニュー)を実現しています。

FlashやJavascriptで実現されるポップアップメニューをCSSで実現するやり方を考えてみたり。
結局、IEにあわせるとJavascriptを介さないといけなくなるんですが、
いちおうFirefoxでならばJavascriptを使わないで実現することはできました。

▼サンプルはこちら
CSSのみでプルダウンメニューのサンプル
http://www.green.dti.ne.jp/edo/web-test/test6/←サーバ移転のため削除されました。

簡単に解説すると、ひとつのボックス要素の中にポイントするとポップアップする部分のメニューを書きます。
それのボックス要素内にdisplay:noneをもつ要素(これがポップアップで出る部分)を書き、通常時には隠れるようにしておく。
そして最初に書いたメニュー部分(サンプルではli要素)に:hover擬似属性を設定する。(li:hover)←これがIEだと使えないんですよねー。

li:hover div{ display: block; }

のように、:hover時にのみblock要素になるように設定を追加します。
そうすることで、:hover時だけ姿を現す、まさにポップアップメニューになります。
とりあえず、今回はIEにも対応させようってことでJavascriptのonmouseoverで上のli:hover divの部分の
代用をしてます。

IE7で:hoverが使えるようになるといいなぁ・・。

Javascriptによる外部CSSファイルの切り替え

2006年6月22日 20:45

Javascriptによる外部CSSファイルの切り替え、なんとかできるようになりました。
ポイントは「document.getElementsByTagName("link")[i]」これ。
これでlink属性の情報を取得できるんだねー。

ただ、値を変更、というのはできない模様。
linkのalternate stylesheet属性を使って複数のCSSを読み込ませ、
それのdisabledを変更していくことでCSSが切り替わる仕組み。

簡単に言えば、alternate stylesheetでの切り替え作業をJavascriptが代替えする形かな。
(IE6にはCSS切り替え機能は未実装。内部的には把握してるらしいけど、むしろなんでやねんて感じw)

まぁJavascriptでアクセスできるなら、これが使えるからいちおう切り替えできるから文句言うまい。

大概は文字サイズとかを変更するのに使われるけど、これでmenuの位置を好きな場所に移動できる、みたいな感じで使えばわりと面白いかもしんない。

Cookieと組み合わせて自分流にカスタマイズさせる、みたいな。

とりあえずなにかに使えそうなので書いてみたw

サンプルはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test4/


サンプルのアップ先のサーバを解約してしまったので、新しく作り直したら再度アップしたいと思います(;´д`)

※ついでもあったので、新しくエントリーを書き直しました。
書き直したエントリーは以下を参照ください。

FirefoxとIE双方に自然な影をつける

2006年6月21日 17:33

png画像はアルファ値を保存できる画像形式で、影などの徐々に透明になっていくような画像を作るときにとても便利な画像だ。 が、これがまたIEのあほが認識しない。透明部分を白く表示するもんだから、違和感この上ないのだ。 背景が一色など、決まったものであれば白くなる部分にその色を敷いて、擬似的にきれいな影を表現できるが、背景が写真や複雑なパターンなどだとそうはいかない。 ボックスを固定すれば問題ないが、それでは柔軟性に欠ける。 そこで、IEとその他のCSSを振り分けることを利用して、別々の画像を読み込ませることでこれを実現してみた。 また、IEには独自仕様で影をつけるフィルタがあったりする。 やり方は簡単、まず振り分けようのCSSを書き、(ここらへんは情報溢れてるので割愛) IEには影のついていない画像を読み込ませる。そして、そのボックスに影をつけるフィルターを適用する。
そしてIE以外の、png形式を正しく表示できるブラウザ用に、背景としてpng画像を読み込ませる。
これで完成だ。

まぁIE7はpng形式をサポートするみたいだからいらなくなるかもしれないけど、
ま、思いついちゃったからとりあえずのっけとくw

ちなみにサンプルはこちら→http://www.green.dti.ne.jp/edo/web-test/test2/

なんか不具合があったらコメントにでも残しておいてください(;´□`)

clearを使わずにfloatの親ボックスに背景を表示させる

2006年6月21日 16:35

clearを使わずにfloatの親ボックスの背景を表示する方法を発見。
まだ試してはないけど、これが特に不具合なく動く(将来的にも)なら、
かなり便利そう。
内容は、親ボックスに「overflow: auto;」を追加するだけ。
clearを使った方法だとちょっとした問題があったりしたので、
今度使ってみようと思う。

CSSでのプログラム的使用の模索

2006年6月20日 00:34

とあるサイトの記事を読んで、以前から考えていたものを実現へと近づけることができた。
それはCSSのみでJavascriptのような動作をさせる、というもの。
つまり、マウスオーバーで隠れていたコンテンツを表示させ、マウスアウトで再び隠す、というもの。
:hoverをうまく利用したものだ。
ただ、IEの場合、:hoverがa要素にしか使えないため、隠す部分をa要素配下にする必要がある。
そのため、どのブラウザでも問題なく表示されるようあれこれ試行錯誤してなんとか形にしたものが
これだ。→http://www.green.dti.ne.jp/edo/web-test/test/

若干、まだ調整の余地があると思われるが、とりあえずwinでもMacでも動いているので
実用に耐えられそうだ。