Web Design Leaves

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, …

続きを読む

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト：「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む C…

続きを読む

目次 以前「audio.js」を使用したが、環境によっては IE8 以下ではエラーが発生してしまったので別のオーディオ再生用のプラグインを探したら見つかった「jPlayer」に関するメモ。「jPlayer」はビデオの再生も可能だがまだ試していない。 以下は「jPlayer 2.5.0 Quick Start Guide」から。 ダウンロードと配置 jPlay…

続きを読む