PCサイトをケータイで見る裏技

Google Wireless Transcoder

今回もまたまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
ケータイのGoogleで検索すると、PCサイトだと自動的にCSSを省略して余計な装飾が省かれ、長いページは自動的に分けてくれます。今回はこのサービスを利用して、PCサイトをケータイ用に手軽に変換してしまおうというテクニックです。

方法は簡単です。
例えば、変換したいURLが、http://www.ex-yz.com/index.htmlだとすると、
http://www.google.com/gwt/n?u=http://www.ex-yz.com/index.html&_gwt_noimg=1
とし、アクセスするとCSSが省略され、左下のようなケータイで見やすいサイトに変換されます。

右のようなQRコードをPCサイト上に配置して、ケータイへ誘導するコトも効果的なので、利用しない手はないでしょう。
ただし、この方法で変換した際にしっかり見えるようにするには、正しいコーディングでサイトを作る必要があります。適正なマークアップと正確なCSSを日頃から心がけておきましょう。

ロールオーバー時に動きを与えるJavaScript

jQuery - BackgroundPosition plugin

今回もまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
jQueryの「BackgroundPosition plugin」というプラグインを使うと、メニューボタンにロールオーバーした際にFlashのような滑らかなアニメーションを施してくれます。
ちなみにサンプルは下記のページ。
→jQuery Background Test

仕組みとしては、メニューボタンの下に配置する変化のある背景画像を用意し、その背景画像をJavaScriptで移動させるコトによって、ロールオーバー時にアニメーションさせる…というモノです。

下記のサイトからJavaScriptをダウンロードして読み込ませます。
→Downloading jQuery - jQuery JavaScript Library
→Plugins | jQuery Plugins

とりあえず、サンプルはこちら。

続きを読む "ロールオーバー時に動きを与えるJavaScript"

プルダウンメニューに動きを与えるJavaScript

Flashのような滑らかなアニメーション｜MenuMatic

このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design Style-UP Tips」に載っていた「MenuMatic」というライブラリが面白かったので、紹介してみます。

ちなみにサンプルは下記のページ。
→horizontal（水平）のサンプル
→vertical（垂直）のサンプル

メニューの仕組みは単純です。Spryを使ったプルダウンメニューと同じようにul要素を入れ子にするコトで多重階層が実現できます。
…で、このライブラリが面白のは、Flashのような滑らかなアニメーションが加わるトコロ！JavaScriptだけでこれだけの動きが付くのなら、Flashで作る必要はなくなりますね。

サンプルはこちら。

続きを読む "プルダウンメニューに動きを与えるJavaScript"

写真を簡単に加工するJavaScript

透き通ったボールのようなアイコン｜Sohere.js

このブログでも何度となく紹介している「www.netzgesta.de」というサイトがあります。このサイト、画像にいろんな効果を与えてくれるJavaScriptを紹介しています。
今回は、web creators 2009年1月号の「Web Design Style-UP Tips」にも載っていた、Sohere.jsを紹介してみます。Sohereという名前だけあって、画像ソフトを使わなくても、かなりキレイにガラス玉のような加工を施してくれます。パラメータを変更するコトで、いろいろと微調整もできて便利です。

サンプルはこちら。

続きを読む "写真を簡単に加工するJavaScript"

Lightboxのクローン、SexyLightBox

Lightboxではつまらないという方に｜web creators 1月

AjaxといえばLightboxというくらいメジャーなJavascriptライブラリですが、普及しすぎているが故、単純なLightboxでは、つまらないと思っている方も多いかも知れません。
巷にはLightboxクローンのライブラリというモノが色々とあり、今回紹介する「SexyLightBox」もその１つで、Lightboxに少し変化を加えたい人にはうってつけです。

web creators 2009年1月号には、「JavaScript入門＆徹底活用バイブル」という小冊子が付いてきます。デザイナーにとっては大変便利な特集になっていると思います。「SexyLightBox」もそこに紹介されています。
「» Sexy Lightbox v1」というページのDescargarから、ライブラリとサンプルがダウンロードできます。ちなみにサンプルはこのページです。

↓早速、自分のサイトでも使ってみました。

続きを読む "Lightboxのクローン、SexyLightBox"