PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js
3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。 まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。Chrome推奨 Sample css#example01 {/*文字詰め*/ -letter-kern: 1px 1px 0
[JS]あらゆる要素をランダムにフェードアウト・インさせるスクリプト -LivingFade
あらゆるDOM要素をランダムなタイミングでフェードアウト・フェードインさせるjQueryのプラグインを紹介します。 LivingFade jQuery Plugin デモ [ad#ad-2] デモでは複数のdiv要素がボックス状に配置されており、「Fade Out」「Fade In」ボタンをクリックすると、フェードアウト・フェードインのエフェクトがランダムなタイミングで適用されます。 デモ：ベーシック callback機能もあり、エフェクトが終了すると、メッセージが表示されます。 エフェクトの適用範囲を指定することも可能で、下記は右下のdiv要素に異なるclass名を与え、その箇所のみ適用させないデモです。 デモ：適用範囲の指定 LivingFadeの実装 「デモ：ベーシック」を例に実装方法を紹介します。 HTML 対象となる要素を内包するdiv要素に「class="demo1"」を付与し
MdN Design｜総合情報サイト
Webサイトの細かい部分までこだわりたい。そんなときはテキストを選択したときのハイライトの色を変えてみるのもよいだろう。 「Use CSS to Override Default Text Selection Color」（cs s.dzone.com/news/overriding-default-text-select）を参考につくってみよう。ここでのサンプルは現在各ブラウザで実装が進んでいるCSS3を使っての作成となる。 まずはじめにHTMLとCSSを用意する。HTMLではハイライト時の色を変える部分に「 」などクラスをつけている【1】。CSS側ではselectionセレクタを使いテキストが選択されたときの状態をつくる。このサンプルではbackgroundの色と文字の色を変えている【2】。selectionセレクタはSafariでは表示されるが、Firefoxでは表示されない。そのた
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
クロスフェードでロールオーバーを行う「rollover2.js」
クロスフェードでロールオーバーを行う「rollover2.js」 Check Tweet 配布元：クロスフェードするロールオーバー処理をお手軽に実装するJavaScript ライセンス：MIT License rollover2.jsはロールーオバー処理にクロスフェードを適応できるJavaScriptライブラリだ。 使い方 配布元よりダウンロードした「rollover2.js」をhead要素などで読み込みます。UTF-8以外の文字コードのサイトでこのライブラリを利用する際には「charset=”utf-8″」の記述を忘れずに行う必要がある。 <script type="text/javascript" src="rollover2.js" charset="utf-8"></script> 画像はデフォルトの画像を「bottonA_rollout.jpg」など拡張子の直前に「_rollou
要素に複数の背景画像を設定出来る「jQuery background_layers」
要素に複数の背景画像を設定出来る「jQuery background_layers」 Check Tweet 配布元：jQuery background_layers ライセンス：free jquery background_layersはCSS3の「multiple background images」つまり、ひとつの要素に対して複数の背景画像を設定することが出来る機能をクロスブラウザで利用する為のjQueryプラグインです。 使い方 まずはhead要素などでjQuery本体と、配布サイトよりダウンロードしてきたjquery.background_layers.jsを読み込みます。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.
使えるjQueryプラグイン：ブロック要素を丸ごとリンクに変えてくれるBiggerlink.js
地味だけど私的に使うことが多いjQueryプラグイン、Biggerlink。 ブロックレベルの要素を丸ごとリンクに変更してくれます。 サイドバーなどでちょっとリンクをオシャレにしたい時に重宝しています。 …と説明してもピンとこないと思うので、サンプルデモを用意してみました。 テキストの部分しかリンクを貼ってなくても、リンクを内包するブロックレベル要素全体がリンクに変身します。 サンプルデモのHTML構造は以下の通り。 <li>タグの中に<h4>タグの見出しと<p>タグのパラグラフを入れてみました。 リンクは<h4>タグに貼ってあります。 Biggerlinkなしの（通常の）スタイル リンクは見出しのテキストだけです。 もうちょっとカッコよくしたいかも….。 Photoshop Tutorial Photoshopで簡単にできる QuickTipsを集めてみました Illus
noobSlide～画像をスライドさせるスクリプト
今日もユーザーフォーラムよりカスタマイズネタを拾ってきました。 ウィジェットの作成方法を教えてください ウィジェットというか、Javascriptですね。 hassakuさんが紹介してくださっている「PHPSPOT開発日誌」の記事「気持ちよいスライド機能を提供する「noobSlide」」をたよりに、サンプル７のスライドを試みてみました。 こちらのリンクからこのブログを表示してください（そうしないとただ画像を並べただけのページになります）。 noobSlide：http://bittersweetdreams.blog9.fc2.com/?template=silver_ring_nSlid&no=803 Webフリー素材提供：「月とサカナ」 上記ページだけでは、よく分からなかったので、まず、「noobSlide」なるものについてGoogleで検索してみました。すると、次のようなページがあり
親窓へリンクを渡す小窓（サブウインドウ）を作る方法 [ホームページ作成] All About
親窓へリンクを渡す小窓（サブウインドウ）を作る方法小窓から親窓の表示ページを切り替えるテクニックを使って、ナビゲーション用の「リモコンウインドウ」を作成してみましょう！ 小窓から親窓へリンクを渡す方法は、様々な場面で活用できます。実現は非常に簡単！ サブウインドウからメインウインドウを制御 スクリプトを活用すると、右図のように、「サブウインドウ」（小窓）から、「メインウインドウ」（親窓）の表示ページを切り替えることができます。 これを活用して、ナビゲーション用（メニュー用）のサブウインドウ（小窓）を開いて、そこからのリンクで、メインウインドウ（親窓）の表示ページを切り替える仕組み「リモコンウインドウ」を作ってみましょう。 今回は、この「リモコンウインドウ」を実現する方法をご紹介致します。 実現にはJavaScriptを使うのですが、とても簡単にできます。 サブウインドウを開くには？ まずは
![親窓へリンクを渡す小窓（サブウインドウ）を作る方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
透過PNGにも対応のロールオーバーで滑らかに画像が切り替わる国産jQueryプラグイン
cssやプログラミングとっても便利そうなjQueryプラグインが あったのでメモ。国産です。IE6、7でも 確認しましたが、Chrome等のブラウザ と相違なく動いてくれます。動きもとても スムーズで素敵。透過PNGにも対応し ていますが、他のライブラリと併用する形。 とっても便利そうなjQueryプラグインが あったのでメモ。国産です。IE6、7でも 確認しましたが、Chrome等のブラウザ と相違なく動いてくれます。動きもとても スムーズで素敵。透過PNGにも対応し ていますが、他のライブラリと併用する形。 本当はこのライブラリを配布してくれているサイト自体がとっても素敵だったのでご紹介しようと思っていたのですが、素敵なライブラリも配布してくれていたのでこちらを合わせてご紹介します。 smoothRollOver.js from 日本電子工藝社 ユニークな社名ですね。スキルの高そうなW
jQueryを使ったストレッチする背景画像 – creamu
背景に大きくビジュアルを使いたい。 そんなときに参考になるのが、『Image Now』。jQueryを使った、背景画像がストレッチするサイトです。 jquery.backstretch.jsが使われていて、width:1024pxの画像が、ブラウザサイズに合わせて伸縮しますね。Flashサイトでなくてもこれができるのはいい感じ。 画像がランダムに切り替わるんですが、それはfunctionでJavaScriptが書かれています。 デザインも設計もクールなサイトなので、一度見てみてください。 Image Now LADの新作のレザーバッグを購入。前のが破れてしまって新しいのがほしかったので、ちょうどいいのが見つかっていい感じ。ふとボッテガ ヴェネタのも気になって見に行ったんだけど、結構するしまだいいかな、と見送りました。でもデザインも質もものすごくいいですね。 あとFenderロゴ入りの帽子も
Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider
Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。
a要素のマウスオーバー時にテキストをふわっと切り替えるjQuery – creamu
マウスオーバー時のエフェクトに凝りたい。 そんなときに使えそうなのが、『HoverAttribute jQuery plugin』。a要素のマウスオーバー時にテキストをふわっと切り替えるjQueryです。 アンカーテキストにマウスオーバーすると、a要素かrel要素に指定してあるテキストに、ふわっと切り替わります。ちょっと変わったエフェクトをつけたいときによさそうですね。 デモファイルがダウンロードできるので、一度見てみてください。 HoverAttribute jQuery plugin 大阪と神戸と京都を満喫中。めちゃ楽しい。もうちょっと京都を楽しんで東京に帰ります。
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
これはカッコいい、テレビのノイズ画面風背景のLightBox作成:phpspot開発日誌
Lights Out ? Dimming/Covering Background Content with jQuery | Build Internet! これはカッコいい、テレビのノイズ画面風背景のLightBox作成。 次のように、テレビのノイズ画面のような背景がアニメーションするカッコいいLightBoxの作成チュートリアル。 デモページ 単純に背景をGIFアニメーションにしているだけっぽいけど、なんかオシャレです。 1ネタとして覚えておいて損はなさそう。サンプルもダウンロード可能です。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル jQueryやPHPを使った便利な仕組みのチュートリアル集
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
[JS]カスタマイズが豊富なグラフやチャートを描画するスクリプト -jqPlot
ツールチップやラインにシャドウをつけるなどカスタマイズが豊富な、グラフやチャートを描画する高性能なスクリプト「jqPlot」を紹介します。 <textarea name="code" class="js" cols="60" rows="5"> line1 = [['23-May-08',578.55],['20-Jun-08',566.5],['25-Jul-08',480.88],['22-Aug-08',509.84]]; line1.push(['26-Sep-08',454.13],['24-Oct-08',379.75],['21-Nov-08',303],['26-Dec-08',308.56]); line1.push(['23-Jan-09',299.14],['20-Feb-09',346.51],['20-Mar-09',325.99],['24-Apr-09',38
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
noobSlide - mootools
Lightboxスクリプトいろいろ - DesignWalker
