自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね!ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)! 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました!このテ
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
サムネイルを表示して動画にリンクするパターン あとは「$.getJSON」などで取得するだけです。 htmlで適当なidでマークアップしておきます。 html <div id="youtube"></div> javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { $.getJSON('http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3&callback=?', function (json) { var
パララックス効果のあるコンテンツ を作る為の雛形みたいなコードがあ ったのでメモ。既に似たようなのは いろいろあるんですが、div要素を 使って実装していて自由度がありそう だったので備忘録的に記事にしておき ます。 昨日訳あって、FAQサイトをさまよってたらたまたま見かけて良さそうだったので勉強用にちょっと拝借しました。 Parallax with jQuery レイヤーはdiv要素です。赤いボックスはクリックで緑に変わりますが、IE7以下ではz-indexのバグがあるためクリックできません。 スピードや動く範囲だけなら以下のあたりを変えればいいです。 distance = 70;//マウスに対して要素が動く距離 sensitivity = 7;//感度。というか動くスピード var distHalf = distance / 2; //親要素を指定したセレクタ var parW = $
jqPagination, a jQuery pagination plugin (obviously) jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」。 次のようなインタフェースのページ送りのインタフェースを簡単に実現できます。 クリック時にコールバックを指定して何ページ目がリクエストされたかを知ることが出来るので、指定ページにJSで飛ばすだけという流れです 実装は次のように決められたマークアップをコードして、コールバックを指定しつつ初期化するだけです。 デザイン等はCSSで調整できそうです。 標準のデザイン的にはスマホなどで使えそうなものになってますね 関連エントリ 面倒なページ分けを簡単実装できる10のスクリプト集
jQuery Timelinr ○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」。 次のような年をインデックスとしたスライダーを作ることができるjQueryプラグイン。 会社の歴史とか、PHPの歴史とかなんでもいいのでタイムラインをちょっと雰囲気を持たせながら表示させたい場合に使えそうです 年部分をクリックするとかっこよくアニメーションしながらスライドしてくれます。 すべての内容は1個のHTMLに入れられて作るのも楽そうです。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン 綺麗なツリービューが実装できるjQueryプラグイン「jsTree」 RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」
Jquery.ascensor.js 全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」 全画面でスライドが切り替わりつつ2次元のスライド移動が可能な機能を実装できるjQueryプラグインです。 各スライドはDIVで記述するので簡単です。 スライド画面右下にスライドのマップのようなものが表示され、これをクリックすることでも移動することが可能です。 単なる横方向のプレゼンではなくて、なかなかオシャレで目を引くプレゼンが作れそうです スライド切り替えはアニメーションされます。 個人的にも、いつものPowerPointをやめてこういうのでやりたいですね 関連エントリ JavaScriptでプレゼンテーションを作る際に使えそうなjQueryプラグイン「Fathom.js」 WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項30。 自分へのインプット&メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない(使った事ないですが) for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy & Paste Hijacker」 2011年09月08日- Copy & Paste Hijacker | jQuery Plugins ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy & Paste Hijacker」。 例えば、ページ内で気になった文書があってCtrl+Cとか、右クリックして「コピー」した場合、その文書になんらかの文字列を追加することができます。 引用元を追加でコピーしてもらったり、ツイッターアカウントやFacebookアカウントもコピーに追加することができちゃいます。やり過ぎは禁物ですし、嫌がられる場合もありそうなので、あくまで利用者の利便性を高めるために使いたいですが、技術的にも非常に面白かったのでご紹介です。 使い方は次のように初期
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるjQueryのプラグインを紹介します。 Flexible Nav jQuery library デモページ 抽出した見出しの一覧は、右側に表示されています。 [ad#ad-2] 閲覧中のページで見出しを抽出する方法 まずは、閲覧中の他人のページで見出しを抽出する方法からご紹介。 Flexible Navはブックマークレット版があるので、それを利用します。 ブックマークレット Flexible Bookmarklet このブックマークレットをブックマーク(お気に入り)に登録して閲覧ページでクリックしてください。 ※上記をクリックすると、このページで適用されます。 当サイトでFlexible Navを実行したキャプチャ Flexible Navを実行すると上記のように、右側に見出しの一覧が表示され
自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」 2011年06月16日- Auto-growing and re-sizable textarea ? Jquery Plugin - Hycus 自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」。 次のような、どんなサイトのデザインでもじゃまにならない、普通のテキストエリアの下にツマミをつけたようなテキストエリアが実装できます。 改行をうって文書が長くなろうと自動でサイズが大きくなる点も特徴。 実装は必要なライブラリを読み込んだら以下1行でOK。 対象もjQueryのセレクタで一括指定も可能。 $('#txtarea').hycustextarea(); ひょっとしてHTML5いらないんじゃないかとい
Tired of turning upside down the internet and not finding what you’re looking for? Well, here we’re providing you the best of our CSS buttons search. Here you’ll find over 100 buttons, among pure CSS and image + CSS made. All of them great looking, with neat effects and really easy to include them in your code. Some people says there’s nothing new under the sun, however, we can always come up with
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課(めか)でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType(ブログ構築ツール)での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript(以下 JS)プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」 2011年05月09日- Awkward Showcase ? A jQuery Plugin | Awkward Group - A Digital Agency WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」。 divの中に複数のdivを並べて初期化することで簡単にコンテンツスライダーを作れます。 1つのコンテンツにはHTMLが入れられ、ツールチップ表示用の機能なんかも同梱されています。 初期化も次のように簡単。コンテンツのサイズ等をオプションとして渡せます。 $("#showcase").awShowcase({ content_width: 700, content_height: 470 }); デモページはこちら
画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit... 次の記事 ≫:かなりいい感じのWordPressテーマ20 Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く