カテゴリー:2007年11月

CSSのみでプルダウンメニューを作る

2007年11月30日 09:42

以前にふたつほどプルダウンメニューについて書きました。
▼参考エントリー
  1. 入れ子のプルダウンメニューを作る
  2. プルダウンメニューをさらに作り込んでみた
でも、IE対策としてJavascriptを併用したものでした。
が、なんとCSSのみでもIE6にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。

▼サンプルはこちら
CSSのみでプルダウンメニューのサンプル

なぜCSSのみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。

CSSのみでタスクバー風メニュー

2007年11月27日 12:31

なんとなく思い立って、CSSのみでタスクバー風メニューを作ってみました。
(どちらかというとスタートメニューか)

※IE7の場合、DOCTYPEを宣言しないとposition:fiexdが効かないみたいでした・・。ので、それを追加したのでIE7でも同様に動作するようになっています。
※Firefox2、Safari3、Opera9で動作確認してます。それ以外ではposition:fixedがうまく動かない模様・・。
そのため、IE6 、7は挙動を少し変えてます。
「CSSのみでタスクバー風メニュー」のサンプルはこちら

サンプルページの下の方にちょこっとある白い部分にマウスオーバーするとタスクバーのように現れます。
▼肝のCSSはこんな感じです。

Safari3.0.4リリースされましたね

2007年11月21日 14:55

Safari3.0.4がリリースされましたね。今回のリリースで、フォームなどの日本語入力が可能になりました。ついに! って感じですねw

Safariのアンチエイリアスのきいたきれいな文字が好きで、さらに動作もはやいので
メインにしたいなーなんて思ってたんですが、日本語入力ができず断念していました。
(ブックマークレットを使った擬似日本語入力、みたいのはありましたがあんまり使い勝手がよくなく・・)

しかし今回のVerUPで日本語入力が普通にできるようになったのでさっそくメインとして使うよう始動。

と思ったんですが、マウスジェスチャーがなかったりと、Firefoxの拡張とかと比べてしまうと見劣りしてしまいますね・・。

ただ、閲覧する分には文字がきれいで小さめなので一気に情報を一覧できるので、調べ物なんかしてるときはいいかもですw

▼ちなみにこっからダウンロードできます。
Safariダウンロード

関連エントリー

SEO対策をしたままきれいなフォントを使う

2007年11月19日 09:56

SEO対策をしたまま(画像を使わずに)きれいなフォントが使えるFlashを公開しているサイトがありました。

BeautifulJapaneseKit

使い方は、字を表示する元となるFlashファイル(swf)と、フォント情報を持ったswfをアップし、それを制御するjsファイルをアップするだけ。

あとはきれいなフォントにしたい部分をタグで囲み、(通常はhx要素など見出しかも?)IDを付与し、文字を置換するscriptをページの最後に追加します。

ちなみに自分が作っているサイトでもさっそく使ってみました。
サンプルとして見て見て下さい。「新着相談例」や「書籍紹介」などの文字がそうです。

EGOセラピー

あ、あとフォントのライセンスやらについては使用する際に気をつけてください。

ラジオボックスをCSSで装飾

2007年11月16日 12:15

ラジオボックスをCSSで装飾し、javascriptを使用してselect風に使えるようにしてみました。

とある案件で作ったものをサンプル用に修正したものですが、
なかなかうまくいったかなーと思ったのでアップしてみたり。

ラジオボックスをCSSで装飾

ちなみに「#itemList」のプロパティのtop:0をbottom:0に変更すると
リストが上に向かって展開します。
使う場所に応じて修正して使ってみてください。(使ってくれる人がいるかは分かりませんが・・(;´д`))