Web Design Leaves

Windows 環境での Sass と Compass のインストールと基本的な環境設定に関するメモ。 Ruby のインストール Sass には Ruby が必要なので Ruby がインストールされているかどうかをコマンドプロンプトで確認する。 上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。 インストールされていない場合…

続きを読む

Google Map をレスポンシブに対応させる方法のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください（2018年7月30日） 目次 概要 サンプル 参考サイト：「How …

続きを読む

Youtube（iframe 要素）をレスポンシブに対応させる方法のメモ。 概要 iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。 参考にしたサイト：「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」 サンプル Youtu…

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む

ブラウザの言語設定を元にその言語のファイルを表示させる方法のメモ。（不確かな内容があります） 目次 概要 トップのフォルダに以下のような英語、日本語のトップページがある場合。 英語：http://www.mysite.com/index.html 日本語：http://www.mysite.com/indexjp.html http://www.mysite…

続きを読む

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

続きを読む