Web Design Leaves

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

続きを読む

CSS3 アニメーションに関する個人的なメモ。 CSS3でアニメーションを実装する方法は以下の2種類がある。 transition プロパティでの定義 animation プロパティでの定義 Transition 始点終点の2点間のアニメーション機能を提供 （始点から終点までの2点間のアニメーションしか行えない：設定がシンプル） 設定時間の中でアニメーション…

続きを読む

＠IT に掲載されていた Compass/SASS を使ったミックスインの作成方法の記事をもとに、個人的に使いそうなことをカスタマイズしたりした際のメモ。 Sass と Compass がインストールされていることが前提。Compass を使用しないものもあるが、「@import “compass”;」が記述してあることが必要。インス…

続きを読む

アニメーションのミックスインを探していたら見つけた Compass/SASS を使ったアニメーションのミックスインに関するメモ。 Compass/SASS は最近始めたばかりなのでこの方法が正しいかは不明だが一応やりたいことはできているみたい。 追記 Sass 記法で書かれているものとは別に Scss でかかれているもの（animate.scss）も見つかっ…

続きを読む

Compass のミックスインに関するメモ。インストールや設定に関しては「 Sass/Compass のインストールと基本的な環境設定」に記載。 目次 CSS3 モジュール CSS3 モジュールは、ベンダープレフィックスや、ブラウザの下位バージョンに対応するプロパティを書き出してくれる。 関連項目 ベンダープレフィックスのオン・オフ レガシーブラウザの対応の…

続きを読む

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 …

続きを読む