自分でコピペできるように、browser判別のTipsを貼っておきます。 PHPで判別 [php] function browser_class(){ $classes = ""; $agent = getenv( "HTTP_USER_AGENT" ); if(strstr($agent,"MSIE")){ $classes .= "msie "; if(strstr($agent,"MSIE 6.0")) $classes .= "ie6 lt7 lt8 lt9"; if(strstr($agent,"MSIE 7.0")) $classes .= "gt6 ie7 lt8 lt9"; if(strstr($agent,"MSIE 8.0")) $classes .= "gt6 gt7 ie8 lt9"; if(strstr($agent,"MSIE 9.0")) $classes .
CJ Object Scaler 3.0 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」。 幅300pxのブロックに、幅500の画像がきたらデザインが崩れてしまいますが、これをjQueryで自動補正してくれるプラグインのご紹介。 スクリプトでやってくれるため、予め自分でサイズを計算して指定しておく必要はなく、かつデザインを崩しません。 ブログなんかで、画像をアップしたけど、ちょっと大きくてデザイン崩れるかもっていう場合にも、自分でリサイズしなくてもやってくれるというのは楽でいいですね。 調整方法も２種類選べます。 ぴったりと埋める Fill 画像の表示領域をそのままで表示するFit 使い方は $(element).cjObjectScaler(options, callback) で、調整後のコールバック関数も呼べます。 $(element)
ブログのプチリニューアルに使った技術要素色々。 先日、少し頑張ってブログのプチリニューアルを実施したのですが、その際に使った色々な要素をご紹介します。 タイトルも微妙にリデザインしてます まず、当ブログの問題点として、多数ある記事がきっちりカテゴリわけされていないという点がありました。 過去の記事を探そうにも見つけづらくて困るという連絡を頂いたこともあったり。 というわけで、沢山ある記事をある程度自動でオーガナイズしてしまおう、ということで作業してみました。 最初からタグ付けしとけばいいという話ですが、独自の入稿システムがタグを入力できるシステムになっていない事で、既にある５０００以上の記事をいちいち分類するのは面倒なので機械的にやりました。 手間の割には、ある程度いい感じに構築できたかなと思っています。 何か他の仕組みにも参考にして頂ける点もあるかもということでエントリにしてみます。 h
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 気になったので備忘録。スクロール した位置に付いてくるサイドバーを 実装してくれるjQueryプラグイン・ Contained Sticky Scrollです。細 かいオプションも設定できて、IE6や IE7でも動作してくれるので覚えて おこうと思って記事にします。 Web Designer Wallがリニューアルしてサイドバーを固定していました。これはcssで実装してるみたいですが、IE6利用率が10％を超える日本では、まだ捨てるわけにもいかないのが現状ですね。（個人的には徐々に捨て始めてますがｗ） 基本的にはアニメーションで付いてきますが、ノンアニメーションも可能です。 使い方 いつもどおりjQueryとプラグインのパスを書きます。 <script type="
スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。[/note] サンプル ※Androidも動くらしいですが、僕が持っていないのでiPhone以外は動作確認していません。 サンプルにアクセスすると以下のような画面になります。 結構な数のサンプルが用意されているのですが、ここでは一部ご紹介したいと思います。 アコーディオン アコーディオンコンテンツです。タップで開閉します。 ページめくり ページめくりです。フリックすると本をめくるようなアニメーションエフェクトで次のコンテンツに進
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaS
An interactive film by Chris Milk Featuring "We Used To Wait" Built in HTML5 This film does not work on mobile as it requires pop-ups. Please visit the site from a desktop browser. This film requires pop-ups. Click the icon in the address bar. Select "Always allow pop-ups from wildernessdowntown.com."
Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度が向上することによって、Webアプリケーションなどの利用が促進される。HTMLレンダリング性能と合わせて重要な指針だ。 マウスの動きを追従する エンジンが高機能化すれば実現できる幅が広がる。その一つが3Dレンダリングだ。JavaScriptで3Dオブジェクトが表現できるようになれば、ゲームはもちろん様々な分野で活用できるだろう。そのレンダリングエンジンとしてThree.jsを紹介しよう。 Three.jsは3Dオブジェクトをレンダリングするライブラリで、先日話題になったGoogleマップを使ったマッシュアップ「The Wilderness Downtown」もこのThree.jsを使って作られた一つだ。さらにマウスで反応する
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Krispy Kreme Doughnuts 新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。 有楽町丸井の地下にもあります！こちらも同じく長蛇の列ですが新宿よりは込んでないみたい。待っている間に焼きたてのドーナツをくれたりします♪ ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！ サインがいっぱい 芸能人の方や、著名人の方のサインが壁にところなしと！ レバ刺 びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！ ハツ刺 珍しいハツ刺。生でハツ食べるなんて初めてでした！味
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
pdf.jsはnode.js/JavaScriptで作られたPDF生成ライブラリ。クライアントサイドの出力にも対応。 pdf.jsはJavaScript/node.js製のフリーウェア（ソースコードは公開されている）。基幹系、ユーザ系問わず何らかのデータを蓄積した結果、一覧やレポートを出力したいという要望は多々発生する。そのフォーマットとして代表的なのがPDFだ。 ブラウザのみで生成されたPDF PDFは仕様が公開されているとは言え、一から手作業で作るのは非常に面倒なフォーマットだ。そこで既存のPDFライブラリが使われる。PHP、Ruby、Javaなど各種言語向けにPDFライブラリが存在するが、JavaScriptではどうだろう。そう、pdf.jsを使えば良い。 pdf.jsはその名の通りJavaScriptを使ってPDFを生成するライブラリだ。やり方は二種類ある。一つは完全クライアントサ
Since usually the best galleries are created in jQuery, we’ve mainly focussed on jQuery type sliders, but there are a few simple CSS galleries as well. This collection has been organized into five main categories so you can easy switch to your preferred section. Before we start, we wanted to tell you that it’s up to you to go for a free or premium solution. Your Web Designer Toolbox Unlimited Down
twitter facebook hatena google pocket これは簡単に導入できてよさげなプラグインです。 本をめくるような表現をさくっと導入できるViewbook - jQuery Pluginを紹介します。 また、オプションも色々あるので、オリジナルなコンテンツになりそうです。 sponsors 使用方法 Viewbook - jQuery Pluginからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.viewbook.1.0.0.js" type="text/javascript
この記事は賞味期限切れです。（更新から1年が経過しています） 既に広く知られているであろう、IE9.jsは、 新旧IEの差異を（出来るだけ）埋めてくれる素晴らしいスクリプトです。 今日のお話は、IE9.jsで実現出来るシンプルなclearfixと、 このスクリプトで実際どんな恩恵が受けられるかの備忘録です。 cf) ie7-js – Project Hosting on Google Code シンプルになったclearfix 念の為スクリプトのロードも記載しておきます。 IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。 （これも内部で条件分岐して頂けると大変幸せだなぁ） <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
