« 2007年9月 | トップページ | 2007年11月 »

2007年10月の4件の記事

2007.10.12

Flash上にプルダウンメニューを重ねる

swf上にHTML要素をレイヤー表示する際の解決策

少し前に「JavaScriptでプルダウンメニュー(DropDownMenu.js)」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあったので、気をよくしての第2弾です。

この前かかわった仕事で、JavaScriptのプルダウンメニューの下にFlashコンテンツを表示したいというページがあった。いろいろと試してみるとFirefoxなどでは、Flash上で画面が書き変わってしまうと、最上位面に表示されてしまい、その時にプルダウンメニューが表示されているとFlashの下に隠れてしまうコトが分かった。

何とかならないかと思っていたのだが、解決作が見つからず、そのページはFlashを使わない事にしてもらった。…しかし、開発の人間としては何か解決策がないだろうかと、その仕事が終わった後もいろいろ本を眺めていた。

するとやっぱりあるんですね。Web creatorsの10月号に載ってました。
<object>〜</object>の中に、
<param name="wmode" value="transparent">
というパラメータを追加して、
Flash要素より、HTML要素(今の場合はプルダウンメニュー)のz-index設定の数値を大きくしてやるコトで実現できるようである。

サンプルはこちら

続きを読む "Flash上にプルダウンメニューを重ねる"

| | コメント (18) | トラックバック (1)

2007.10.11

Webでの適正な文字の指定って?

前回の記事絡みなのだが、Webサイトを作っていて適正な文字サイズの指定っていつも悩んでしまう。
僕自身はMacを使っており、ブラウザはほとんどFirefox。大きな文字だと扱いづらいので、環境設定で基本の文字サイズを14pxにして使っている。
そうすると、例えばAdobeのサイトだと文字が小さすぎて読めない。仕方がないので、文字サイズをアップして見ていたりする。

作る際に置いて、本などでは、16pxを基本のサイズとし、相対的なサイズを指示するように書いてあるが、僕のようにユーザー側のブラウザの環境設定で文字を16px以下にしてある人にとっては小さくなりすぎる傾向があると思う。

なので、WindowsのIE環境でも文字の可変ができるように、CSSでフォントサイズにsmallを指定していた。IE6以降、smallは12pxというコトになっているらしいので。

ただ、これでもMac環境で例えば、12pxに設定している人にとっては小さくなりすぎる事が分かった。

それからは、ハックを使い、WinのIE以外は12px、WinのIEにはsmallと指定するようになった。でもWinのIEで見ると少し文字が大きいんだよね。仕方がないので、いろいろ試した上でWinのIEだけさらに97%になるようにしてみた。
これでWinのIE、文字サイズ中で見た時でも他のブラウザとほぼ大きさが揃ったように見える。

前回の記事のCSSにはそういう指定がされています。興味のある方は参考にしてみてください。

| | コメント (0) | トラックバック (0)

JavaScriptで文字サイズを変更

CSSを切り替えるJavaScript|styleswitcher.js

ユーザビリティを考えると、文字の大きさを可変できるコトは必須だと思う。僕もCSSを組む時は、WindowsのIEでも文字サイズを可変できるように相対的な数値を指定している。ただ、文字サイズを変えるメニューがどこにあるのかも分からないユーザーも多い。特に高齢者で大きい文字の方が読みやすい方たちに多いと思う。
また、ブラウザで一律に文字を拡大してしまうと、レイアウトが崩れてしまうので、デザイナーにとっては必要以外のトコロは元のサイズのままで、できるだけ体裁を保ちたいという欲求もある。

そこで今回のJavaScriptの登場です。
A List Apartが紹介しているstyleswitcher.jsというJavaScriptが有名らしい。
何ができるかというと、JavaScriptを使ってCSSを切り替えるコトができる。これを使って文字のサイズ別CSSをいくつか作り、切り替えようという寸法です。
早速、ページの下方にある「Download styleswitcher.js」というリンクからJavaScriptをダウンロードして使ってみる。

サンプルはこんな感じです。

続きを読む "JavaScriptで文字サイズを変更"

| | コメント (0) | トラックバック (2)

2007.10.03

スライドインしてくるメニュー

Sexy sliding JavaScript side bar menu|prototype.js

今月号のWeb Designingに載っていたAjaxライブラリ、Sexy sliding JavaScript side bar menu(長ッ!)を紹介してみます。
画面右端にタブが表示されていて、クリックするとメニューエリアがスライドして表示されます。ここまででもカッコイイのですが、例えば、Lightboxのようなライブラリと組み合わせる事で、もう1つ凝った演出も可能になるというのだから、使わない手はないと思います。
(僕の場合、Lightboxまで使うと演出過多のような気がしたので、シンプルなサンプルにしましたが…)

サンプルはこんな感じです。

続きを読む "スライドインしてくるメニュー"

| | コメント (0) | トラックバック (0)

« 2007年9月 | トップページ | 2007年11月 »