Web Design Leaves

レスポンシブ対応のスライダー「bxSlider」(v4.1.2) の使い方や設定に関するメモ。とても簡単に設置ができるが、指定するモードによっては、使用している CSS の関係でスライドの位置がずれてしまったりしたのでその対処法やオプションについて。 目次 bxSlider のダウンロードとインストール bxSlider のサイトの右上の「Download」…

続きを読む

時々使用するブラウザの判定、毎回調べているのでメモ。 「UserAgent での判定」、「サポートしている機能での判定」、「使いたい機能が機能するかでの判定」などがあるので用途に合わせて利用。 UserAgent での判定 UserAgent の文字列からブラウザを判定する方法。バージョンが新しくなったりすると UserAgent の値も変更されるようでこれ…

続きを読む

jQuery で要素を操作する際に使用するメソッドに関するメモ。 要素にコンテンツを追加 ラップ集合の全要素（既存のコンテンツ）に対して渡されたコンテンツ（引数で指定した要素等）を追加するメソッドは以下のようなものがある。 append：コンテンツを要素の子要素の末尾に追加 prepend：コンテンツを要素の子要素の先頭に追加 after：コンテンツを要素の…

続きを読む

Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup …

続きを読む

Youtube の映像をプラグインを使わずに Lightbox のようなモーダルウィンドウで表示しようと試した際の失敗例。結果的にはプラグインを使用することにしたが、後日何か別の方法が見つかればその際の参考にするためのメモ。 概要 Firefox では問題なく表示・再生できたが、それ以外のブラウザでは以下のような問題が発生。 「停止ボタン」を押さずにモーダル…

続きを読む

特定のページに記述してある情報を他のページでも使用している場合に、元のページの情報を更新すると他のページの情報も自動的に更新されるようにする方法のメモ。 概要 例えば、スケジュールが記述されている「schedule.html」のサマリーをトップページなどにも表示する場合、内容を更新するにはそれぞれのページを更新しなければならない。 これを jQuery の …

続きを読む

高さの異なる要素をフロートさせて並べる時に、jQuery を使ってそれぞれの高さを揃えて並べる方法に関するメモ。 横に並んだ要素の高さを揃える 以下のサンプルは div 要素（class=”foo”）をフロートで並べて表示する例。それぞれの高さが異なるので、同じ高さを指定しなければきれいに横には並ばない。 サンプル１ サンプルの「高さ…

続きを読む

カルーセルパネル（パネルをスライドして１周すると元のパネルに戻る）やスライドパネルを使う際のメモと練習（実用的でないものがほとんど）。 カルーセルパネルの表示（サンプル１） サンプル１ シンプルなカルーセルパネルを表示する。 カルーセル全体を囲む div 要素を配置（id=”slider_wrap”） その内側に「戻る」（slider…

続きを読む

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス p…

続きを読む

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト： 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス（背景画像を固定して表示）を実現する方法。 各 div 要素（#first, #second, …

続きを読む