DHTML(基礎)

jQueryでメージを縦にフリップする

このサンプルは、jQueryのanimateメソッドを利用してイメージを垂直方向にフリップします。サンプルのイメージをクリックするとフリップして次のイメージが表示されます。

Lorem ipsum(ロレム・イプサム)

lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。

「lorem ipsum」は様々なバリエーションがあるが、もっとも一般的なテキストは以下の通りである。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

このLorem ipsumを自動生成するツールがあります。「Standard Lipsum」「日本語」などが生成できます。パラグラフとワードを指定して生成することもできます。

VistaとXPでIE8,IE7,IE6,IE5.5をテストするには

Windows Vista/XPでIEの複数のバージョンを起動してWebページをテストしたいと思ったことありませんか。IETestを使用するとIE8,IE7,IE6,IE5.5でWebページをテストできます。スタイルシート(CSS)やJavaScriptのテストに最適です。

WordPressのコメント管理機能を実装する

このサンプルは、jQueryのanimate()APIを利用してWordPressのコメント管理機能を実装しています。コメントの[削除]をクリックすると、そのコメントを非表示にします。[不承認]をクリックしたときは、コメントをグレーアウトします。[スパム]をクリックするとそのコメントを非表示にします。スパムとして認識されたコメントは、グレーアウト状態で表示されます。[承認]をクリックするとスパムとして認識されたコメントが通常のコメントとして表示されます。

パネルを開閉する

このサンプルは、jQueryのslideUp(), slideDown(), slideToggle()などのAPIを利用してgmailの受信トレイのようなインタフェースを実装しています。サンプルのヘッダーをクリックするとメッセージの本文が開いて表示されます。再度ヘッダーをクリックするとメッセージ本文が閉じます。[すべて閉じる]をクリックすると、すべてのメッセージが閉じます。[すべて表示]をクリックすると受信メールの全件(9件)を表示します。[5件のみ表示]をクリックすると、最新のメッセージを5件表示します。

アコーディオン1

このサンプルは、jQueryのslideToggle(), slideUp()などのAPIを利用してアコーディオンを実装しています。サンプルが表示されたらヘッダーをクリックしてください。クリックしたヘッダーの詳細が展開されます。再度ヘッダーをクリックすると詳細を折りたたみます。

fadeToコマンド

このサンプルは、jQueryのfadeTo()APIを利用して表の複数行をフェイドさせます。サンプルの[Fade Multiple Rows]ボタンをクリックすると行１、行３、行５にフェイドが適用されます。

animate(params,options)

このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大します。サンプルの[Animate1]ボタンをクリックするとdiv1要素が拡大されます。[Animate2]ボタンをクリックするとdiv2要素が拡大されます。[Reset]ボタンをクリックするともとのサイズに戻ります。Animate1ボタンは、animate()APIの引数にqueue:falseを指定して3種類のアニメーション(幅、フォントサイズ、ボーダー幅を変える)を同時に実行させます。Animate2ボタンは、3種類のアニメーションを順番に実行させます。

toggle(f1,f2,f3,...)

このサンプルは、jQueryのtoggle()APIを利用してul/li要素に宣言されているテキストの前景色を書き換えます。サンプルのテキストをクリックするとRed,Green,Blueの順に前景色が変わります。

hover(over,out)

このサンプルは、jQueryのhover()APIを利用してUI/LI要素で宣言されている項目に矢印を表示します。サンプルの項目にマウスを移動すると「赤」で矢印が表示されます。マウスを項目から移動すると矢印が消えます。

trigger(type,data)

このサンプルは、jQueryのtrigger()APIを利用してボタンのクリック時のイベントを発生させます。サンプルの[Button #1]をクリックするとButton #1のクリック時のイベントが発生してカウントが更新されます。[Button #2]をクリックするとButton #2のクリック時のイベントが発生してカウントが更新されます。なお、[Button #2]をクリックしたとき、Button #1のクリック時のイベントも発生させます。したがって、Button #1のカウントも同時に更新されます。

css(properties)

このサンプルは、jQueryのCSS()メソッドを利用してdiv要素の背景色と前景色を書き換えます。サンプルの正方形上にマウスを移動すると正方形の背景色と前景色が変わります。マウスを正方形の外に移動するともとのカラーに戻ります。

fadeOut(speed,callback)

このサンプルは、jQueryのfadeOut()メソッドを利用してdiv要素をフェイドアウト効果付きで消します。サンプルの[Click Me!]ボタンをクリックすると「青」「緑」「赤」の長方形がフェイドアウト付きで消えます。

slideDown(speed,callback)

このサンプルは、jQueryのslideDown()メソッドを利用してdiv要素をスライドさせながら表示します。サンプルの[show]ボタンをクリックするとdiv要素が上下にスライドして表示されます。[hide]ボタンをクリックするとdiv要素が消えます。

toggle()

このサンプルは、jQueryのtoggle()メソッドを使用してhtml要素を可視/不可視状態に交互に切り替えます。サンプルの[Toggle]ボタンをクリックするとメッセージが切り替わります。

hide(speed,callback)

このサンプルは、jQueryのhide()メソッドを使用して可視状態になっているhtml要素を不可視状態にします。サンプルの[hide]ボタンをクリックすると表示されているメッセージが右側から徐々に消えます。

hide()

このサンプルは、jQueryのhide()メソッドを利用して可視状態になっているhtml要素を不可視状態にします。サンプルの[show]-[hide]ボタンをクリックすると[show]ボタンで表示されてメッセージが消えます。

show(speed[,callback])

このサンプルは、jQueryのshow()コールバックを利用して不可視状態になっているspan要素を可視状態に切り替えます。サンプルの[show]ボタンをクリックするとspan要素が順番に可視状態になって表示されます。[hide]ボタンをクリックすると再び不可視状態になって消えます。

[attribute$=value]

このサンプルは、jQueryのattribute filter機能を利用してid属性の値が終端から部分一致するhtml要素を検索します。サンプルが表示されたら[Apply]ボタンをクリックします。すると、div要素のid値の終端が「Element」の要素を検索してハイライトします。

:hidden

このサンプルは、jQueryのselectorのvisibility filter機能を利用してhidden属性のhtml要素を検索します。サンプルが表示されたら[Apply]ボタンをクリックしてください。hidden属性のdiv要素とinput要素の件数を表示します。また、hidden属性のdiv要素は、可視状態に切り替えます。

メールアドレスを隠す

このサンプルは、スタイルシートとイメージを使用してメールアドレスをロボットから収集されないように隠します。

CSSイメージマップ

このサンプルは、スタイルシートを適用してイメージマップを実装しています。マウスをイメージの番号に移動すると説明が表示されます。JavaScritを使用していないのでクロスブラウザ対応です。

タブの幅を拡張する

このサンプルは、ul/li要素にスタイルシートを適用してタブ型のメニューを表示します。タブの幅は自由に拡大/縮小することができます。

フォームをカスタマイズする

このサンプルは、form要素に宣言されているText, TextArea, Buttonなどの要素をカスタマイズして表示します。Text, TextArea, Buttonにスタイルシートを適用して丸みを付けています。

CSS Sprites

このサンプルは、Webページの複数のイメージを１個にまとめて高速化しています。１個にまとめたイメージを、個別に表示するにはスタイルシートを使用します。

イメージロールオーバー

このサンプルは、イメージにマウスを移動するとイメージをアクティブに切り替えます。イメージにマウスを移動したときにイメージを切り替えにはスタイルシートを使用します。

テキストをイメージに切り替える

このサンプルは、HTMLのh1要素に記述されているテキストをイメージに切り替えて見栄えをよくします。このテクニックはSEOに最適です。WebページをSEO化するときは導入することをお勧めします。

テキストをグラデーション化する

このサンプルは、イメージとスタイルシートを使用してテキストをグラデーション化します。Webページの見出しなどに応用すると便利です。

テーブルレスフォーム

このサンプルは、HTMLのtableタグを使用しないでCSSのみで表のようにレイアウトしています。

コメントカウント

このサンプルは、ブログのコメント件数をバブル型のイメージに表示します。

ボックスの角を丸くする

このサンプルは、スタイルシートを使用してボックスの角を丸くします。ここで記述してスタイルシートは、ツールを利用して自動生成させることができます。

:nth-childポジションセクターの使い方

このサンプルは、HTMLのtable要素に４行間隔で異なる背景色を設定します。table要素に背景色を設定するには、tr要素にclass属性を追加してCSSのクラス名を設定します。

トップダウンスクロール

このサンプルは、Webページに表示されているコンテンツを自動的にスクロールします。長い文章をWebページに表示するときに利用すると便利です。スクロールするスピードはカスタマイズすることができます。

モダル型のポップアップウィンドウ

このサンプルは、モダル型のポップアップウィンドウを表示して年齢を確認します。各種認証画面、メールアドレス入力などに利用すると便利です。

メールアドレスを収集されないようにする

このサンプルは、スパマーなどにメールアドレスが収集されないようにメールアドレスをランタイム時に書き換えます。

スクリーンの幅、高さなどを表示

このサンプルは、Webページにクライアントが使用してスクリーンの幅と高さを取得して表示します。

スクリーンの解像度を自動認識する

このサンプルは、現在使用しているパソコンのスクリーン解像度をチェックしてWebページに最適になっているかどうかを調べます。スクリーンの解像度が既定値と異なるときは警告のメッセージを表示します。

クロスブラウザ対応の印刷ボタン

このサンプルは、Webページにクロスブラウザ対応の[印刷]ボタンを表示します。 [Print this page]ボタンをクリックすると、「印刷」のダイアログが表示されます。このサンプルは、Firefoxでも動作します。

ディスソルビングテキスト(IE5+)

このサンプルは、Webページにテキストを表示したあと、そのテキストを段階的に薄くして見えなくします。

ショックウェーブテキスト(IE5+)

このサンプルは、Webページにテキストを表示するときに左側から右側にテキストを拡大しながら表示します。テキストの文字サイズとメッセージを切り替えるスピードはカスタマイズすることができます。

ウェーブテキスト(IE5+)

このサンプルは、Webページにテキストを表示するときウェーブさせます。テキストを注目させたいときに利用すると便利です。

サインスクローリングテキスト(IE5+)

このサンプルは、Webページにメッセージを表示するときにサインカーブを描きながら左右から移動させます。メッセージを移動中に特定の文字を一定時間停止させることもできます。

ローラーコースターテキスト(IE5+)

このサンプルは、Webページにテキストを表示するときにローラーコースターのようにテキストを拡大縮小しながら動かします。このサンプルは、テキストを注目させたいときに利用すると便利です。

ナッジングテキスト(IE5+)

このサンプルは、Webページにテキストを表示するとき文字を一文字ずつ横に突くように表示します。テキストを注目させたいときに利用すると便利です。

テキストを垂直方向に表示する(IE5.5+)

このサンプルは、Webページにテキストを垂直方向に表示します。サンプルが表示されている画面の右側に「著作権」のメッセージが垂直方向に表示されます。

テキストのサイズを変える

このサンプルは、Webページに表示されているテキストのフォントサイズをダイナミックに変更します。[+Larger Font]をクリックするとフォントサイズを段階的に大きくします。[+Smaller Font]をクリックするとフォントサイズを段階的に小さくします。

タイピングスクローラ

このサンプルは、メッセージを１文字ずつタイプするように表示します。メッセージはJavaScriptの配列変数の要素に格納します。

ダイナミックフェイド(IE5+)

このサンプルは、メッセージをフェイド機能付きでダイナミックに切り替えます。メッセージにリンクも表示させることができます。

DHTMLティッカー

このサンプルは、株価が切り替わるようにWebページ上のメッセージをティッカーのように切り替えます。なお、メッセージを切り替えるときフェイドを有効にしています。

メモリースクローラ

このサンプルは、ボックス内でテキストを右側から左側にスクロールさせます。通常のスクローラと異なり別ページに移動したあと、再び戻ってきたときに直前に表示されていたテキストを保持しています。つまり、先頭から表示するのではなく直前の状態を復元して表示します。テキストのボックスが表示されないときは、「このサンプルを編集して試してみる！」をクリックしてください。