関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」:phpspot開発日誌
bxCarousel | jQuery Carousel Plugin 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 次のようなUIでamazonの関連商品を出すような場合に使えそうです。 個々のアイテム自体はulリストで定義するだけなので簡単。 ブログ記事の最後なんかに設置することもできそう 関連エントリ JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル カルーセルやページャ機能がついたYUI 2.6.0がリリース
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」:phpspot開発日誌
infinite, circular jQuery carousel --- CarouFredSel 2.1.3 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 指定した要素以下に<div>や<img>を単に並べるだけでカルーセル化してくれるプラグインです。 少ないスペースで多くのコンテンツを格納するのに便利です。 横だけでなく、縦スクロールもオプションで指定することが出来ます。 ページ下部にexamplesが多数紹介されているので他にも色々な機能があることを確認できます。 関連エントリ 関連アイテムを出す場合等に使えそうなjQueryカルーセル「bxCarousel」 JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」:phpspot開発日誌
特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 2011年02月10日- TypeWriter 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 １文字１文字をスピードを指定してアニメーション表示させられるので、１つのエフェクトとして使えそうです。 アニメーション終了後のコールバック等も可能で、アニメーション後に次のアニメーションを開始したりといったことが可能。 １から実装すると微妙に大変そうな機能も、たった１行で実現することが可能です。 単に文字をメッセージとして表示するよりも、動きがある方がインパクトがありますので、伝えたいメッセージがある場合に導入してみてもよいかも。 関連エントリ サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「
ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」:phpspot開発日誌
Hook.js - Pull to refresh. For the web. ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 最近iPhoneを使っているとよくみるあのインタフェースをブラウザ上で実現。PCでも下にスクロールして上に移動すれば更新出来ます。 ページが更新されるだけなので、コールバック関数を設定できるように改造すればajaxによるページの更新なんかも可能ですね 関連エントリ HTML、CSS、JSでiPhoneアプリのプロトタイプが作れる「Ratchet」 iPhoneアプリ作成に使えるPSD素材集１０ iPhoneの傾きで画像を回転させられるようにする「lenticular.js」 画像やスクリーンショットを実際に利用しているiPhoneやiPad画面にはめ込める「PlaceIt」 iPhone風のあのスクロールをPC
画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ:phpspot開発日誌
Animated Responsive Image Grid | Codrops 画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ 次のように画像が並んでおり、ランダムに数個が別の画像にアニメーションしながら切り替わる感じがオシャレです。 会社概要ページとかでメンバーを並べる、というような用途に使うと面白いかも。 サンプルダウンロードで利用することも可能。 関連エントリ 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」:phpspot開発日誌
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能） ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです） 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
FlashがブロックされているかJavaScriptで判断できるようになる「flashblockdetector」:phpspot開発日誌
FlashがブロックされているかJavaScriptで判断できるようになる「flashblockdetector」 2010年03月16日- flashblockdetector - Project Hosting on Google Code FlashがブロックされているかJavaScriptで判断できるようになる「flashblockdetector」というものが公開されています。 ChromeやFirefoxの拡張によって、Flashがブロックされている場合がありますが、そういう場合にサイト側で判断し、その場合の出しわけを出来るというもののようですね。 使い方は次のようなサンプルコードを張ってブロックされている場合とそうでない場合の処理を書けばOKです。 <script src="http://flashblockdetector.googlecode.com/hg/fbd.js"
iPhoneブックマーク用のアイコンを作成しよう:phpspot開発日誌
今更、かもしれませんが、iPhoneブックマーク用のアイコン作成法のエントリがあがっていたので参考にやってみました。iPhoneユーザ用のアクセシビリティ向上に使えます。 次のような 57x57 ピクセルのPNG画像を作ります。 作ったらサーバにアップロードします。 そして、HTMLタグを追記します。 アイコン画像を光らせたい場合 iPhoneにはボタンを立体的に光らせる機能がありますがこれを実装するためのHTMLです。 <link rel="apple-touch-icon" href="/path/to/icon.png" /> アイコン画像を光らせたくない場合 自分で光る部分もデザインしたいという場合は以下のコードが使えるみたい <link rel="apple-touch-icon-precomposed" href="/path/to/icon.png" /> 実際にコードを仕込
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
数枚の背景画像を使って面白い背景画像を設定するCSSサンプル:phpspot開発日誌
WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlPar... 次の記事 ≫：Photoshop用アニメの髪のブラシセット #68: Think Geek Background Fade Technique | CSS-Tricks 数枚の背景画像を使って面白い背景画像を設定するCSSサンプル。 静止画では説明しにくいのですが、画面をスクロールすることで面白い効果が得られます。 ↓↓スクロールでグラデーションが濃くなる とりあえず、デモページ を見るのがよいですね（＾＾；） fixedで固定にするのと、そのままスクロールさせるものを組み合わせて透過PNGで実現されてますね。 CSSは以下のように3枚の画像を使ってるみたいです。 body { background: #404143 url(../images/bodytiletop.jpg) repeat-
無茶苦茶クールな光のPhotoshopブラシ集:phpspot開発日誌
18 Photoshop Brush Sets for Creating Incredible Lighting Effects | Web Design Ledger 無茶苦茶クールな光のPhotoshopブラシ集。 これはちょっとカッコよすぎじゃないか、という光のブラシ集が公開されています。 ファイナルファンタジーみたいな画像も簡単に作れるかも。 Sui Generis 3 Fractal Brush Abstract 12 CS4 V2 Brush Destiny Brushes 全部見る ブラシなので好きに使ってクールな画像を簡単に作れそうですね。 関連エントリ マストハブなPhotoshopブラシ集 PhotoShopのブラシやパターンがいっぱい「myphotoshopbrushes.com」 自然に関するPhotoshopブラシいろいろ
これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌
Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック
デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集:phpspot開発日誌
PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫：アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページめくりができるInstgramのWEBマガジン作成チュートリアル:phpspot開発日誌
Webデザイナーのためのリンク集
文字をもあもあ、っとアニメーションさせるjQueryプラグイン「moatext」:phpspot開発日誌
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌