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

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQuer…

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

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

jQueryを使った複雑なアニメーションを実装しようとするとCSSのプロパティ値を細かく操作して設定することが必要になりますが複雑なアニメーションからシンプルなものまで、簡単かつ軽量なかたちで実装することができるプラグイン「jQueryTween」がとても便利そうだったので紹介してみます。jQueryTween - L…

CSSでエリアの幅や高さに合わせて背景画像をフィットさせることができる「background-size:cover」。とても便利なプロパティなのですがIE8以下のIEブラウザには対応していません。IE8以下で「background-size:cover」を実装させるjQueryプラグインもいくつかありますが実際に使って…

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

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

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

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