Category : TIPS

READ MORE

この度「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」というタイトルにて本の執筆をさせていただき、2016年2月10日にSBクリエイティブ社さまから出版させていただくことになりました。プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート著者:矢次悟郎価格:24…

READ MORE

レスポンシブサイトでメニュー等のナビゲーションを扱う際、PC向けレイアウト時にはボタンをページ上に並べ、スマートフォン向けレイアウト時にはボタン一式を折りたたんでハンバーガーボタンでメニューを開閉させるUIにすることでスマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。そんなレスポンシブ対…

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…

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