レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい

Webページ上にアニメーション演出を組み込もうとする場合、 今ではJavaScript（jQuery）やCSS3など、実装方法がいくつかありますが HTML5でのアニメーション動作を簡単に作成することができる 気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。 Google Web Designer 言わずと知れたGoogleさんから公開している HTML5アニメーションをつけた広告を制作できるツール「Google Web Designer」。 ツールは無料でダウンロードすることができます。 この「Google Web Designer」では広告バナーのみならず 画像ギャラリーなども簡単に作れるようになっており 操作も直感的に制作できるようになっています。 作成したデータは一式ダウンロードすることができ 組み込みも簡単にできます。 試しに作成してみたサンプルはこちら。

パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ

Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です

今やWebサイトを彩るのに主流といっても過言ではないjQuery。 とても便利で使いやすく構成されていますが、スマートフォン向けサイトなどで使用する場合は レスポンシブWebデザインが重要視されている昨今に対して、 ライブラリファイル自体の重さの負荷が懸念点としてあげられてしまいます。 そんなjQueryをスマートフォン向けに最適化したJavaScriptライブラリ 「Zepto.js」がこの先便利に使えそうだったのでご紹介してみます。 Zepto.js 使い方はライブラリファイルである「zepto.js」を読み込んだ後に jQueryと同じような記述方法でいろいろなアクションを組み込むことができるようになっています。 「zepto.js」で使うことができるアクションやイベントは 上記のライブラリページの左側に一覧で表示されています。 見て分かる通りjQueryと同様の記述でスクリプトを組

IEの自動アップデートでIE6,7など古いブラウザの存在は消えつつありますが、まだクライアントからの要望によってはIE6,7の対応が必要になってしまい、それによってIEへの振り分け処理などが避けられない状況になることはまだ多々あったりします。 CSSではIEの個別のバージョンに対しての処理はCSSハック（推奨されませんが）だったりありますが、jQueryで簡単に判別処理する方法もあり、その記述方法を必要になた時につい忘れてしまうので、ここで自分用メモとして含め紹介してみます。 まずはIE全てのバージョンに対して処理を与える方法。 ◆IEすべて if($.browser.msie){ ～　処理　～ } jQueryの「$.browser」を使ってIEのUA「msie」を判別して処理します。 次にIE6（以前のバージョン含む）に対して判別して処理を与える方法。 ◆IE6 if($.browse