Googleではレスポンシブ ウェブ デザインの推奨していますので、Google Mapも画面サイズ（PC Tablet smartphone)によって表示サイズが変わると便利だと思います。 そこで今回はGoogle M …
REED MORE →
Google Mapのレスポンシブ ウェブ デザイン対策
YouTubeをcssで可変にするトリック
CSS のメディア クエリを使いYouTubeを画面サイズ（PC Tablet smartphone)によって表示サイズを変更するのは難しいです。しかしCSS: Elastic Videosで紹介されているcssで可変に …
REED MORE →
Google Mapで任意の場所に目印やシェイプで位置を簡単表示
住所を入力して検索して使うGoogle Mapですが、住所のない任意の箇所、例えば海岸や山の中に目印やシェイプで囲んで位置を簡単に表示することもできます。 今回はGoogle Mapで任意の場所に目印やシェイプで位置を簡 …
REED MORE →
マウスオーバーでテキストが動く簡単なJqueryコード
マウスオーバーするとテキストが横に揺れ動いたり、縦に揺れ動いたり、点滅、文字がびよーんと伸び縮みするような動きをする簡単なJQueryコードを紹介します。サイトに動きが出るのでちょっとしたアクセントになると思います。 マ …
REED MORE →
マウスの動きに合わせて画像が動くパララックス効果
パララックス効果で作成されているサイトやプラグインは沢山ありますが、今回はとっても簡単なJQueryコードで作成されているPARALLAX || roXonのマウスの動きに合わせて画像が動くパララックス効果を紹介します。 …
REED MORE →
JQueryで背景画像を動かすアニメーション効果
JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。この記事を元 …
REED MORE →
スクロールで背景画像を別々に動かすパララックス効果
通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果 …
REED MORE →
背景画像をフルスクリーンで簡単スライドショー
背景画像をフルスクリーンでスライドショー出来る方法を紹介します。JQueryのプラグインは使わないで簡単なコードだけでスライドショーしますので設置も簡単で軽量だと思います。 背景画像をフルスクリーンで簡単スライドショーの …
REED MORE →
Google APIのサイト内検索機能を使い関連記事を表示
Google APIでブログの関連記事を表示することは出来ないかと思い探していたらWebparkさんの記事にGoogle AJAX Search APIで関連記事を表示(FC2ブログなど)と言う記事がありました。その記事 …
REED MORE →
CSSだけで背景をフルスクリーンYouTubeにする
背景にYouTubeを設置するとインパクトあるサイトが簡単に作成できます。 YouTube動画は自動再生になってますのでサイトが表示したら動画が自動で再生されます。又記事をスクロールしても動画は移動されないので常に動画が …
REED MORE →
