Category : TIPS

READ MORE

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

READ MORE

iPhone6 / iPhone6 Plusの登場によりWebサイトを作る上で今まで以上に画面サイズのバリエーションを数多く想定しなくてはならない状況になってきました。中でも「iPhone6 Plus」は解像度が1920×1080と大きく、タブレットに近いサイズにまでなっておりこの先、Webページを作成する際に「iPh…

READ MORE

最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますがjQueryを使って、ページ最上部(ページヘッダー)にフルスクリーンでのスライドショーを設置しスクロールすると下から通常のコンテンツが表示される、とい…

READ MORE

最近ではWebページにアニメーションを組み込む方法はjQueryやHTML5またはGIFアニメなどさまざまありますが、jQueryを使ってパラパラアニメのようにコマ分けした連続画像を切り替えることで動きを見せるフレームアニメーションjQueryプラグイン「jquery.frameAnimation.js」を作ってみたの…

READ MORE

以前に「jQueryで外部HTML(JSON形式)化した要素を「もっと見る」ボタンで追加する方法」と題して、JSON形式でで外部HTML化したコンテンツ要素を「もっと見る」ボタンで追加するUIを紹介しました。当時公開したスクリプトでは「もっと見る」動作はページ内で1つの設置のみの構成になっていたところ1ページで複数設置…

READ MORE

以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか試しに作ってみたので紹介してみたいと思います。jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法まずは動作サンプルから。「jQu…

READ MORE

Webページ内に並べられた要素の高さを揃えるスクリプトサンプルやjQueryプラグインを今までもいくつか紹介してきましたが、並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形でのスクリプトサンプルを試しに作ってみたので紹介してみます。jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法まずは動作…

READ MORE

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで1…

READ MORE

Webページ制作時において、<li>や<img>などのインライン要素に対してHTMLソース上でタグ間を改行させると半角スペースほどの空白(余白)が発生してしまい扱いに困ることがあったりするので、この空白をjQuery使って強引に削除する実験をしてみました。jQueryでインライン要素をHTML内で改行すると発生する空白…

READ MORE

レスポンシブレイアウトで構築したWebページの場合、閲覧している画面サイズによってレイアウトが最適化される構成になるのでPC用レイアウトとスマートフォン用レイアウトを任意で切り替えることは出来ないものだと思っていたのですがjQuery等を使ってmetaの「viewport」を切り替えることによってスマートフォンでもPC…

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