WEB,デザイン: 2006年10月アーカイブ

ブラウザの表示幅を取得して、そこからスタイルシートを置き換えるjavascriptです。800ピクセル以上で4コラムのレイアウトで表示されますが、表示幅が800ピクセル未満になると1コラムレイアウトに代わります。アクセシビリティには、とてもいい手法だと思います。

今後こういったアクセシビリティを考えての、javascriptを使ったスタイルシートの置き換え手法は増えてくるのかも。DOMの属性を変えることで実現しているようです。（只今勉強中）

興味のある方は、一度覗いてみてください。

サムネールをクリックすると同一ウィンドウ上に画像を表示するというjavascriptでLightbox JS・Lightbox が有名かと思います。以前からあまりスマートではないと思っていたら、スマートにしたタイプのHighslide JSが公開されていましたので紹介します。

Highslide JS-サムネールをクリックすると同一ウィンドウ上に画像を表示します。サムネイル画像をワンクリックで拡大画像表示、そして拡大画像をワンクリックでサムネイル画像に戻します。とってもスマートです。Lightbox JSよりも若干ストレスなく画像表示できます。

Highslide JS - JavaScript thumbnail viewer

http://vikjavev.no/highslide/

• IE 4.0・Netscape 4.79には対応していませんが、その他の最新ブラウザには対応しています。

• 拡大された画像の下にキャプションをいれることも可能です。

• 拡大画像の外枠の指定も4パターンの中から好きなパターンを選べます。

• JavaScriptがオフの場合は、そのままイメージ画像が拡大表示されます。

• 拡大された画像をドラッグドロップで好きな位置に移動できます。

Highslide JS実装サンプル

実際に実装してみるとこんな感じになります。

角丸表示する方法もいくつかあります。そんな方法を紹介しているエントリーを一挙に集めたサイトがありましたので紹介しておきます。

CSS Rounded Corners 'Roundup'というエントリーです。紹介されているリストは、javascript制御か否か・使用する画像数・リキッドレイアウト（サイズ可変）可能か横幅サイズ指定タイプなどさまざまなパターンを考えてきれいにリストアップされています。今後のさまざまなシーンで使うことを想定してブックマークしておいた方がいいとおもいます。

WEB制作でデザインが決まったら、今度はdivブロック要素にレイアウト割りします。各ブロック要素のセレクタ名を決めた後、このmarkupmakerを使えば、簡単にvalid XHTML文書を作成することができます。

各ブロック要素のセレクタ名を階層順に入力することで構造化されたXHTML文書とCSSコードが生成されます。あとは、コンテンツを入れ込んで、各ブロック要素でのCSS設定を行えばいいだけになります。

XHTML documentタイプも選択できます。かなり作業効率を向上することができると思います。かなり便利なツールです。

ロシア発、カラーパレットを提供してくれるDailycolorscheme。このサイトは、カラーパレットの共有こそできませんが、このサイト管理者の作成するパレットを簡単にDLすることができます。パレットは、デザインする媒体に関連付けて毎日エントリーがあります。配色に関する提案サイトとしてとらえればいいと思います。

DLできるデータ形式は、フォトショップ・イラストレーター・HTML・CSSファイルなど5種類のファイル形式にてDLできます。RSSフィードを取り込んでおけば、毎日いろんなカラーパレット情報を確認することができます。さまざまなファイル形式でデータをDLできるのが魅力です。