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

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

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

HTMLやCSSなどの知識がなくても簡単にWebサイトを構築することができるホームページ作成サービスは今では様々な種類がありますがそんな中でもデザインのクオリティがとても高く、デザインテンプレートパターンも豊富に揃っている「Wix.com」ホームページ作成サービスがとても便利そうだったのでご紹介してみます。無料で簡単に…

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

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

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

Webサイト制作において使用する画像ファイルや動画ファイルをフォーマットの違ったファイル形式に変換する場面にちょくちょく遭遇することがあります。その都度、変換条件にあったツールやWebサービスを使用したりしていましたがこの先とても便利に使えそうなファイル変換サービスがあったので2つほど自分用メモとして紹介してみます。C…

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

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