CSS

jQueryでモーダルウィンドウを作成。

2010.12.23 / Labs

(追記/2011.12.02)ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。

 

jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら

jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。

 

CSSでは、モーダルウィンドウの背景を黒(#000000)の透明度75%としています。

 

リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。

 

jQueryを使ってDIVボックスをセンター配置。

2010.11.07 / Notes

jQueryをリサイズイベントを応用して、ページに配置されたDIVボックスをセンターに配置する方法です。
センター配置にはCSSのプロパティ「top」「left」を使っています。ページ読み込み時、ウィンドウがリサイズされた時に上記のプロパティを設定することでセンター配置しています。
サンプルはこちら

ページの読み込み時、ウィンドウがリサイズされた時に関数を実行しています。
センター配置には外側のボックスを内側のボックスの余白を計算して、内側ボックスの左上の座標を設定しています。

jQueryでクッキーを使ったフォントサイズ変更の方法。

2010.05.16 / Notes

jQueryでフォントサイズのスタイルシートを動的に切り替えて、現在表示しているスタイルシートをクッキーに保存する方法です。
スタイルシートは、あらかじめフォントのサイズごとに3種類用意しておきます。

次のコードでは、ページ内にレイアウト用など複数のスタイルシートを読み込むことを想定して、フォントサイズ用のスタイルシートのみを切り替えています。

<head>タグ内にjQueryの本体と、「jquery.cookie.js」を読み込みます。

フォント切り替えのためのボタンを、ページ内に<li>で記述します。
クラス名が、スタイルシートのファイル名に関連しています。

ウィンドウ内をスクロールするパネル。

2010.04.25 / Labs

jQueryによるウィンドウ内を、左右にスクロールするパネルのスクリプトです。
横幅1000pxのパネルを横に5枚並べて、リンクをクリックすることで目的のパネルに移動するスクリプトです。
アニメーションのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

 

index.html

style.css

CSS3から扱えるエフェクト機能。

2010.01.09 / Labs

CSS3から新たに利用できる機能を、いくつか試してみます。
ボックスの角丸やシャドウを追加できたり、かなり実用的な機能が使えるようになります。Firefox、Safariなどのモダンブラウザでは、すでにいくつかの機能は実装されていますが、残念ながらIEでは次のバージョン以降での対応になりそうです。

ボックスのコーナーを丸くする

ボックスの角丸では、Firefoxを代表とするmozillaと、Safari、Chromeを代表とするweb-kitを別々に記述する必要があります。

 

Box Round

ボックスにシャドウを付ける

ボックスのシャドウも角丸と同じく、mozillaと、web-kitを別々に記述します。

 

Box Shadow

テキストにシャドウを付ける

X軸、Y軸の距離と、ぼかしの幅、カラーを指定できます。

 

Text Shadow

テキストを光らせる

テキストのシャドウを応用して、光らせるような効果もできます。シャドウを多重にすることで、より濃いグローになります。

 

Text Glow

ボックスを透過させる

要素に対して透明度を0〜1の間で指定できます。

 

Opacity