ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
jQueryでCSSプロパティの値を取得する方法｜BLACKFLAG
jQueryでCSSのプロパティの値を操作する方法は基礎的なことで簡単なのですが すでに各要素に指定（設定）されているCSSプロパティ値を取得する方法が 必要な際に使い方を忘れがちなのでメモ書き。 例えば＜div id=”box”＞とID名が付けられた ボックス要素の幅「width」を取得する場合。 $(function(){ $('#box').css('width'); }); 単純な記述ですが、「.css」の後ろに属性を記載するのみです。 このままでの記述では何も意味を持たないので この＜div id=”box”＞にCSSで幅「width」と高さ「height」を指定して 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示する場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width
jQueryでブラウザのスクロール値を取得してみる｜BLACKFLAG
先日ふとしたところで、ブラウザのスクロール値によって表示の切り替えを行う必要があり、 jQueryでスクロール量を測るサンプルを作ったので紹介してみます。 jQueryでブラウザのスクロールされた際の値を取るには 『.scrollTop（縦スクロール）』もしくは『.scrollLeft（横スクロール）』などがありますが、 あまり横スクロールで何か制御をするってことは少なく、縦スクロール値を取得する『.scrollTop』を使用することがほとんど。 なので、今回はページTOPからスクロールされた値『.scrollTop』を取得する際のサンプル。 実際の取得する際の記述方法は $(window).scrollTop(); $(document).scrollTop(); といった書き方でページのTOPからの距離を測れます。 『$(‘html’).scrollTop();』でもいけるっぽいですが
jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法｜BLACKFLAG
Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。 単純に並べられた要素がスライドするカルーセルはよくありますが 並べられた要素の中央に位置する要素のみを拡大表示させるという 少し変わった演出を加えたカルーセルパネルUIを jQueryを使って作ってみたので紹介してみます。 「jQueryで中央が拡大表示されたカルーセルパネルUIを実装する方法」サンプルを別枠で表示 画面の端から端までめいっぱいに並べられた要素が 一定時間の間隔でスライド移動します。 並べられた要素の中央にあたる要素のみが拡大されていて スライド移動するごとに拡大する要素が入れ替わります。 サンプルでは要素を画面の端から端まで めいっぱいに並べていますが全体を囲う要素の幅を指定することにより 決められた幅の中でスライドさせることも可能になります。 全体構成についてまずはHTMLから。 ◆
jQueryを使ってキーボードからの操作でイベントを実行させる方法｜BLACKFLAG
先日ここでも紹介した、Webページ内のコンテンツをキーボードから操作させる 「ASCENSOR.js」jQueryプラグインと同じ様に、 jQueryを使って、キーボードからのキー操作でページ上でイベントを実行させる 簡単なサンプルを作ってみたので紹介してみます。 「ASCENSOR.js」プラグインのように大掛かりなものではなく 今回のサンプルではキーボードの矢印キー「←」「→」「↑」「↓」を クリックしてそれぞれ個別のアクションを実行させる、という方法です。 キーボードのキーには個別にキーコードというものが割り当てられています。 矢印キーのそれぞれキーコードは —————————— 「→」・・・39 「←」・・・37 「↑」・・・38 「↓」・・・40 —————————— となっているのでこれらの値を元にアクションを実行させます。 jQueryでのキーボード操作のイベントは「keyu
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
