[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent
デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML <div id="demo"> <a title="" href="#" class="prev"></a> <div class="slides"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> <a title="" href="#" class="next"></a> </div> JavaScript <script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/j
約700,000枚の壁紙が無料でダウンロードできる -Wallbase
高解像度のクールな写真をはじめ、タイポグラフィ、アート、マンガ、アニメ、そしてセクシーな壁紙が無料でダウンロードできるサイトを紹介します。 Wallbase [ad#ad-2] 壁紙はキーワードによる検索、人気のあるものから好みのものを探すことができます。 探すのが面倒くさい、という方にはランダム表示も用意されています。 キーワードで壁紙を探す 人気のある壁紙を探す 壁紙をランダムで表示 人気のあるもの、ランダムにはソート機能がついています。ページ上部のバーより選択してください。 壁紙のソート機能 ソート機能は、左から順に下記のようになっています。 WG: 壁紙・一般 W: アニメ・マンガ HG: 高解像度画像 SFW: クリーンなもの SKETCHY: 少しセクシー NSFW: かなりエロ [ad#ad-2]
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit... 次の記事 ≫：かなりいい感じのWordPressテーマ２０ Allan Jardine | Reflections | Visual Event ページに仕込まれたJavaScriptのイベントを全部見える化出来るブックマークレット「Visual Event」。 JavaScript で開発していて、jQuery等の各種フレームワークや、on〜 を使ってイベントを埋め込むことは多いですね。 後になって、どこにイベントがあるのかをすぐ見える化し、どのような処理が記述されているのか、確認することのできるブックマークのご紹介です。 当サイトにはそれほどイベントが組み込まれていませんので、Yahoo! Japanのトップページで試してみます。 ブックマークレットを起動すると、グレーアウトされ、エレメントの上
かなりいい感じのWordPressテーマ２０:phpspot開発日誌
20 Beautiful Wordpress Themes | Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers かなりいい感じのWordPressテーマ２０。 次のようなセンスのいいテーマが２０種類もまとまったエントリのご紹介です。 テーマ選びの参考に。 関連エントリ シンプルなポートフォリオサイト構築用WordPressテーマ25 WordPressデフォルトテーマのTwentyTenから派生した12のテーマ かなり美麗なフリーのWordPressテーマ60 黒ベースのクールかつフリーなWordPressテーマ色々
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
ダークで抽象的な模様のテクスチャまとめ「45 Awesome Abstract Textures」
暗めの配色を利用したデザインは、テクスチャの付け方や構成に悩むということも多いかもしれません。今回紹介するのは、ダークなイメージ制作に役立つテクスチャまとめ「45 Awesome Abstract Textures」です。 city stars bokeh texture by =DyingBeautyStock on deviantART ダークな中に可愛さを表現したデザインから、とことん恐ろしい雰囲気にこだわったものまで、さまざまなテクスチャ素材が45種類も紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Green Glass texture by ~thiselectricheart on deviantART ひび割れを表現したテクスチャは、背景とあわせることで手軽にダークな印象を作ることができそうです。色を変えるだけでも印
MySQL 5.6登場！！新機能速攻レビュー
現在、米国で行われているMySQL Conference & Expoにあわせて、新しい開発版であるMySQL 5.6が発表された。MySQL 5.5における新機能もかなりのものだったが、MySQL 5.6の進化は質・量ともに勝とも劣らない内容となっている。そこで、今日は簡単に、MySQL 5.6で追加された新機能の概要について見てみよう。開発版なので利用にあたっては十分な注意が必要（予期なく予定が変更される可能性あり）だが、次期正式版のリリースに向けて是非試してみて欲しい。 InnoDB関連MySQL 5.5で大幅な進化を遂げたInnoDBだが、その勢いはまったく衰えることを知らない。性能の強化だけでなく、痒いところに手が届く便利な機能が追加されている。 ダーティページのフラッシュをするスレッドが独立した。以前はマスタースレッド内でフラッシュが行われていたが、スレッドが独立したことによっ
QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」:phpspot開発日誌
jquery.qrcode - jquery plugin for a pure browser qrcode generation QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」。 通常QRコードというとサーバ側で画像にして画像を送信するというのが一般的ですが、このプラグインはブラウザ上で描画するタイプです。 <div id="qrcode"></div> というマークアップがあったとして、次のようにすることでQRコードを埋め込みます。 jquery('#qrcode').qrcode("this plugin is great"); カメラ等で読み取れば、「this plugin is great」がテキストとして読み取れます。 canvasを使っているので、canvas対応ブラウザでしか動作しない点に注意。 関連エントリ リンクにカーソルを合わせる
今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
HTML5ベースの動画プレイヤー１１:phpspot開発日誌
11 Efficient HTML5 Video Players | blueblots.com HTML5ベースの動画プレイヤーが１１種類まとまったエントリのご紹介です。 UIがそれぞれ個性を持っているので好みに合わせて選ぶことができそう Flashを使うことなく、既存のWEB技術でデザインを調整できるのはいいですね。 関連エントリ HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 これは見ておくべきHTML5のCanvasを使ったデモ集 HTML5のキャンバスと連動させて音声をビジュアライズしたデモ
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」:phpspot開発日誌
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が
パターンやテクスチャ背景が活かされたwebサイトまとめ「Patterns and textures in web design: awesome examples and resources」
パターンやテクスチャ背景が活かされたwebサイトまとめ「Patterns and textures in web design: awesome examples and resources」 デザインの大枠を決める背景は、背景に質感を持たせることにより表現の幅が広がる、視覚的アプローチの重要な要素ではないでしょうか？そこで今回紹介するのは、質感を活かした背景デザインが特徴的なwebサイトまとめ「Patterns and textures in web design: awesome examples and resources」です。 galp.in シンプルなパターンから、サイトの特徴をダイレクトに伝えてくれるテクスチャまで、さまざまなwebサイトが紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■stephencaver.c
知って便利な「pbcopy」と「pbpaste」 - builder by ZDNet Japan
Mac OS Xでは、コピー＆ペースト用のバッファに「ペーストボード」を使用する。歴史的な経緯から、クリップボードと呼ばれることが一般的だが、ドラッグ＆ドロップやサービスを含めシステムに常駐するペーストボードサーバ（/usr/sbin/pboard）がデータの受け渡しを担当する。Cocoa/Carbonをかじった経験があれば、NSPasteboardクラスを耳にしたことがあるはず。そう、接頭辞からわかるとおり、NEXTSTEP以来連綿と利用されている機構なのだ。 そのペーストボードをハンドリングするコマンドが「pbcopy」と「pbpaste」だ。前者は標準入力から受け取った内容をペーストボードに渡し、後者はペーストボードの内容を標準出力へと書き出す。 例を示しつつ使い方を解説してみよう。以下のコマンドラインでは、UTF-8エンコードのプレインテキストを標準出力へ書き出し、それをpbcop
[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ（Chrome, Safari, Opera）ではアニメーションで表示し、非対応ブラウザ（Firefox3）ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう？ それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5ベースのWordPressのテーマファイルのまとめ