サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
black-flag.net
レスポンシブサイトではウィンドウの幅(画面解像度)によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ(画面幅/高さ)の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
jQueryではブラウザウィンドウをリサイズした際に発生するイベント情報は取得できますが リサイズ動作完了時のコールバックの設定は用意されていません。 そのリサイズイベントのコールバック処理を可能にしてくれる jQueryプラグイン「ResizeEnd」が便利そうだったので自分用メモとしてご紹介。 Resize End | Github Pages | A jQuery Plugin by Erik Nielsen Resize End | Github Pages | A jQuery Plugin by Erik Nielsen 使い方もとても簡単で、 プラグインファイル「jquery.resizeend.js」を読み込んだ後、 「.resizeend()」メソッドにてリサイズイベントのコールバック設定が可能になります。 ◆SCRIPT $(window).resizeend(func
jQueryなどでアニメーションを実装した際には アニメーション終了時に処理を実行させるのは比較的簡単なのですが CSSアニメーション制御の場合は少々面倒だったりします。 そんなCSSアニメーションの終了イベントを取得してくれるJavaScript 「Detecting CSS Animation and Transition End with JavaScript」が とても便利そうだったのでご紹介。 Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis デモページはこちら スクリプトはjQueryで使用するパターンと jQueryに
今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン/アウト】 jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 「【フェードイン/アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示 ページ内を一定距離スクロールすると 画面右下に位置固定した形で「ページトップへ」ボタンが フェードインして表示されます。 サンプルではページ内を100pxスクロールすると ボタン
レスポンシブWebデザインのサイトでテーブル(表組み)を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
Webページ上にある画像やコンテンツ要素を ページをロードするたびにランダムで表示を切り替える方法について お問い合わせやコメントで聞かれることが数多くあったので <img>タグのsrc属性をランダムで設定することで画像をランダムに切り替えるパターンと 複数のCSSクラスをランダムで付与することで表示する背景画像を切り替えるパターンの 2種類の方法を紹介してみます。 【<img>タグ切り替え】jQueryで画像をランダムに切り替える方法 「【<img>タグ切り替え】jQueryで画像をランダムに切り替える方法」サンプルを別枠で表示 ページを更新するたびに5種類の画像がランダムで切り替わります。 構造としては<img>タグのsrc属性をランダムで書き換えることで 画像を切り替えています。 ※ランダムで表示する最大枚数は任意で設定可能です。 この<img>タグのsrc属性ランダム切り替えの全体
jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、 指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。 アニメーションの実行判別方法はいろいろなやり方があり 使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうので いくつかの判別パターンをまとめてみます。 【.is(‘:animated’)】 jQueryで要素がアニメーション実行中かそうでないかを判別する処理 いろいろある判別処理の中で扱いやすかったものとして まず、if文と「.is(‘:animated’)」を使っての判別について。 「.is(‘:animated’)」を使って 要素がアニメーション実行中の場合の処理は以下のようになります。 ◆SCRIPT if($('セレクタ').is(':animated')){ ~ ここにセレクタ要素がアニメーション実行
jQueryを使った複雑なアニメーションを実装しようとすると CSSのプロパティ値を細かく操作して設定することが必要になりますが 複雑なアニメーションからシンプルなものまで、 簡単かつ軽量なかたちで実装することができるプラグイン 「jQueryTween」がとても便利そうだったので紹介してみます。 jQueryTween – Lightest Tweening Engine for jQuery jQueryTween – Lightest Tweening Engine for jQuery 「jQueryTween」は「tween.js」と併せて使用し ハードウェアアクセラレーションを行って軽量かつ高機能なアニメーションを実現しています。 プラグインページのアニメーションデモでは ・Animating Object Size ・Animating Colors ・Transform T
CSSでエリアの幅や高さに合わせて背景画像をフィットさせることができる「background-size:cover」。 とても便利なプロパティなのですがIE8以下のIEブラウザには対応していません。 IE8以下で「background-size:cover」を実装させるjQueryプラグインもいくつかありますが 実際に使ってみた際に理想通りに動作しないこともあったので jQueryを使ってIE8以下で「background-size:cover」を実現させる方法を 実験的に試してみたサンプルをご紹介してみます。 まずは動作サンプルから。 ※IE8以下のブラウザと見比べてご確認ください。 「jQueryでIE8でCSSの「background-size:cover」を擬似的に再現する方法」サンプルを別枠で表示 サンプル画面内に設置した画像表示エリアには背景画像を敷き、 「background
スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
少し前に「jQueryでページの最上部に位置固定した、フルスクリーンスライドショー(クロスフェード)を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみたので紹介してみます。 言葉では少々説明しずらいのでまず動作サンプルから。 「jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法」サンプルを別枠で表示 ページ最上部に位置固定したフルスクリーンサイズでのスライドショーを設置します。 ※画像全体は横スライドして切り替え ページをスクロールさせるとフルスクリーンスライドショーはページ上部に固定されたままになり、下からコンテンツ要素が出現してきます。 スライドショー全体はブラウザサイズを変化させてもウィ
Webサイトを作る際、最近では様々な画面サイズ(解像度)のデバイスが増えていることから レスポンシブで構築する際のviewport設定に迷うことがあります。 すべてのデバイスで画面幅に合わせて綺麗に表示させるには viewportの値を切り替えてしまった方が楽な場合もあったので スマートフォン[iPhone/Android]とタブレット[iPad/Android]それぞれで jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。 まずは別枠で動作サンプルから。 ※サンプル画面はスマートフォンまたはタブレットでご確認ください。 「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示 見た目上は分かりませんが スマートフォン[iPhone/Android mobile]とタブレット[iPad/Android]で そ
Webサイト制作において使用する画像ファイルや動画ファイルを フォーマットの違ったファイル形式に変換する場面にちょくちょく遭遇することがあります。 その都度、変換条件にあったツールやWebサービスを使用したりしていましたが この先とても便利に使えそうなファイル変換サービスがあったので 2つほど自分用メモとして紹介してみます。 CloudConvert – convert anything to anything CloudConvert – convert anything to anything まず最初は「CloudConvert – convert anything to anything」。 画像や動画はもちろんのこと WordやPDFなどのテキストファイルなど あらゆるファイル形式に対応している変換サービスです。 ※2014年12月2日現在で205タイプのファイル形式をサポート
iPhone6 / iPhone6 Plusの登場により Webサイトを作る上で今まで以上に画面サイズのバリエーションを 数多く想定しなくてはならない状況になってきました。 中でも「iPhone6 Plus」は解像度が1920×1080と大きく、 タブレットに近いサイズにまでなっており この先、Webページを作成する際に「iPhone6 Plus」だけに 特定の処理を加える必要性が出てくることが多くなりそうなので JavaScriptとCSSそれぞれで「iPhone6 Plus」を判別する方法をあれこれメモ書きしてみます。 まず初めにJavaScriptで「iPhone6 Plus」かどうかを判別させる処理から。 「iPhone6 Plus」ではデバイス上で1pxが何pxでレンダリングされるかを表す 「devicePixelRatio」の値が「3」になるので、その値を見て判別させます。 ※
最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部(ページヘッダー)にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても
以前にも、「jQueryでページ遷移時にスライドアニメーションをつけてみる」と題して、 jQueryを使ってWebページの遷移時にスライドなどの アニメーション効果を実装させるスクリプトを紹介しましたが、 同様の動作を簡単に実装できるjQueryプラグインがいくつかあったので メモ書きとして紹介してみます。 Animsition ・ A simple and easy jQuery plugin for CSS animated page transitions. Animsition ・ A simple and easy jQuery plugin for CSS animated page transitions. jQueryファイルと「Animsition」プラグインファイルをページ内で読み込んで ページ遷移時のアニメーションを実装させたいリンク<a>タグに対して 「animsi
これらのオプション値の設定は 個別に変更させることも可能です。 そして実行スクリプトは以下の様になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.frameAnimation.js"></script> <script> $(function(){ $('.frame1').frameAnimation(); }); </script> 実行スクリプトにオプション値を記述する場合は 以下の様な記述になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr
タイトルの通り、ブラウザ枠の大きさをリサイズすることで、 表示しているテキストを自動で可変するjQueryプラグイン。 ≫ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法 jquery : 4GALAXYのメモ 組み込み方は簡単でjQueryをページからリンク後、 ソース内に下記スクリプトを記述するだけ。 —————————————— <script type=”text/javascript”> function AutoFsize(){ var wpx = $(“div#content”).width(); var fpar = (Math.floor((wpx)/(400/100)));// 横幅px ÷ (最少幅px/100) $(“div#content”).css(“font-size”,fpar+”%”); } setInterval(AutoFsize,10
Webページ上にアニメーション演出を組み込もうとする場合、 今ではJavaScript(jQuery)やCSS3など、実装方法がいくつかありますが HTML5でのアニメーション動作を簡単に作成することができる 気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。 Google Web Designer 言わずと知れたGoogleさんから公開している HTML5アニメーションをつけた広告を制作できるツール「Google Web Designer」。 ツールは無料でダウンロードすることができます。 この「Google Web Designer」では広告バナーのみならず 画像ギャラリーなども簡単に作れるようになっており 操作も直感的に制作できるようになっています。 作成したデータは一式ダウンロードすることができ 組み込みも簡単にできます。 試しに作成してみたサンプルはこちら。
以前に「jQueryで外部HTML(JSON形式)化した要素を「もっと見る」ボタンで追加する方法」 と題して、JSON形式でで外部HTML化したコンテンツ要素を 「もっと見る」ボタンで追加するUIを紹介しました。 当時公開したスクリプトでは「もっと見る」動作は ページ内で1つの設置のみの構成になっていたところ 1ページで複数設置を必要とした場面があったり、同様の要望もいただいたりしたので、 複数設置パターンのサンプルを再度紹介してみます。 サンプルを別枠で表示する ページをスクロールしていくと現れる「もっと見る」をクリックすると そのエリアの続きに追加で要素を読み込みます。 サンプルではページ内に2つの「もっと見る」エリアを設置しています。 左のエリアは28個、右のエリアは20個の要素を 5個ずつ追加表示しています。 全体構成についてまずはHTMLから。 ◆HTML <div class=
以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、 HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか 試しに作ってみたので紹介してみたいと思います。 まずは動作サンプルから。 「jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示 ページロードするとテキストが 1文字ずつタイプライターのように表示されます。 この動作の全体構成について まずはHTMLから。 ◆HTML <p class="split">jQueryでテキストを一文字ずつ読み込むサンプルテキストです。</p> HTMLでは通常の文章を構成する時と同じように テキストを<p>タグで囲ってあります。 サンプルでは<p>タグにクラスをつけていますが 特にクラスをつけることが必須ではありません。 もちろん<p>タグ以外で
jQueryプラグインをまとめて紹介している記事やWebサイトは数多くありますが 約1000個のjQueryプラグインを収集している「Unheap – A tidy repository of jQuery plugins」が プラグインを探す際にとても活用できそうだったので自分用メモとしてご紹介。
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分(1コンテンツ分)を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面(ページ)を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
Webページ制作時において、<li>や<img>などのインライン要素に対して HTMLソース上でタグ間を改行させると半角スペースほどの空白(余白)が発生してしまい 扱いに困ることがあったりするので、この空白をjQuery使って強引に削除する実験をしてみました。 まず単純に<li>をインライン要素として 下記の様にHTML上に記載すると・・・ ◆HTML <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> これをこのままブラウザで実行させると 下記の様に数字の間に半角スペースほどの空白が発生します。 ※空白が分かりやすいように各数字にはCSSでボーダーをつけてあります。 この空白は<li>~</li>の
WindowsXPのサポートも終了し、この先はWebサイト制作において IE8を対象外にできる状況が増えることが想定され CSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。 そんな中、最近あちこちで話題になっていた 複雑なCSS3アニメーションエフェクトを簡単に実装することが扱うことが可能になる 「iHover – CSS3 hover effects pack」と「Magic Animations CSS3」の 各ツールがこの先とても参考にできそうだったのでメモ書きとして紹介してみます。 iHover – CSS3 hover effects pack この「iHover」はマウスオーバー時に 様々なパターンのCSS3アニメーションエフェクトを実装させる チュートリアル集になっています。 デモ画面には、円形アニメーションパターンと 四角系アニメーションパターンが用意さ
これらの設定値を変更することでもろもろ調整が可能になっています。 「jquery.cookie.js」を使用しページ遷移した際でも viewportの値(レイアウト状態)は引き継がれるようになっています。 ボタンにはそれぞれアクティブ時にクラスがつくようになっていますが PCで閲覧している場合はボタンをクリックしてもレイアウトは変わらないので ボタンの装飾を変えると違和感が出てしまうこともあります。 (切り替えボタン自体をiPhone、iPad、Androidの時のみに表示する、 みたいな構成にするのが理想的かもしれません。) iPhone/iPad/Android以外はボタン非表示サンプルを別枠で表示 ※サンプル画面はスマートフォンでご確認ください。 実際、あまり使う機会はないかもしれませんが レスポンシブレイアウトで構築したWebページでスマートフォンでもPC画面を表示させたい、 とい
今までもハイクオリティなフリーアイコン素材など何度か紹介してきましたが、 フラットなものやロングシャドウ等々、様々な種類の中からデザインを選択し とても簡単にカスタマイズしながらアイコンを作成することができるツール 「Iconion : Free Icon Maker」がとても便利だったので自分用メモとして紹介してみます。 Iconion : Free Icon Maker 「Iconion」はインストールタイプのツールになっており Webサイト上にはWindows版とMac版の両方用意されているので 環境に合わせてダウンロードします。 起動すると以下のような画面が表示されます。 まず、画面右上の「Add Style」からアイコンの形状(デザイン)を選択します。 その後、選択エリア下にあるオプションパネルにて アイコンの背景色や角丸の角度など、 細かな設定をすることが可能になっています。
次のページ
このページを最初にブックマークしてみませんか?
『BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter e...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く