Category : TIPS

READ MORE

レスポンシブWebデザインでのサイト構築において、PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIをスマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに切り替える動作を見かけることがあります。それぞれの画面解像度によって最適なUIに切り替える手段になりますがそんなレスポンシブ…

READ MORE

レスポンシブサイトではウィンドウの幅(画面解像度)によってレイアウトの調整や動作処理の制御を行います。ウィンドウサイズ(画面幅/高さ)の取得方法に関してはスクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用…

READ MORE

今やWebサイトを作る際にはほぼ必須アイテムとなっているページの最上部に戻るための「ページトップへ」ボタン。最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。そんな「ページトップへ」ボタンの出現方法をフェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、の3つ…

READ MORE

Webページ上にある画像やコンテンツ要素をページをロードするたびにランダムで表示を切り替える方法についてお問い合わせやコメントで聞かれることが数多くあったので<img>タグのsrc属性をランダムで設定することで画像をランダムに切り替えるパターンと複数のCSSクラスをランダムで付与することで表示する背景画像を切り替えるパ…

READ MORE

jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。アニメーションの実行判別方法はいろいろなやり方があり使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうのでいくつかの判別パターンをまとめてみま…

READ MORE

スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。jQueryで特定の要素が存在するかどうかを判別する処理【.length】タグそのものに対して判別させることも可能ですがサンプルでは…

READ MORE

会員制Webサイトやストレージサービスなどでinput入力フォームでファイルをアップロードさせる[type=file]を使用する際、選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったのでFile APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。jQueryでINPUT[t…

READ MORE

少し前に「jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみた…

READ MORE

Webサイトを作る際、最近では様々な画面サイズ(解像度)のデバイスが増えていることからレスポンシブで構築する際のviewport設定に迷うことがあります。すべてのデバイスで画面幅に合わせて綺麗に表示させるにはviewportの値を切り替えてしまった方が楽な場合もあったのでスマートフォン[iPhone/Android]と…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR