モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
リアルなWindows風ツリービューが実装できるjQueryプラグイン「dynatree」:phpspot開発日誌
dynatree - Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading. - Google Project Hosting リアルなWindows風ツリービューが実装できるjQueryプラグイン「dynatree」。 次のようにまるでWindowsのインタフェースじゃないか、といってしまう人が多数なツリービューが実装できます。 Ajaxによる動的ローディングやコンテキストメニュー、ツリービュー横のチェックボックス等、機能はそろっています。 また、ドラッグ＆ドロップでアイテムを移動できるあたりも素晴らしいところです 何かと便利なUIなので、実装する際には１つの
CSS3でシャレオツなリストを作るチュートリアル:phpspot開発日誌
CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」:phpspot開発日誌
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ
面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」:phpspot開発日誌
textualizer 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 様々なアニメーションエフェクトがあり、文字に動きをつけて注目を集めたい場合なんかに使えそうです。 IE6を含むレガシーなブラウザにも対応しています。 次のような簡単な分かりやすいソースコードで実装できます。 キャンペーンサイトなど、インパクト重視のサイトに入れてみるとよさそうですね 関連エントリ 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」
秀逸なiPhoneサイト38:phpspot開発日誌
38 Mobile (iPhone) Sites 秀逸なiPhoneサイト38がまとまっております。 日本でも新規リリースの携帯はほとんどスマホということになってきて、もう一年もすればシェアはかなり変わっているのだなというのは誰もが予測が付きそうですが、スマホサイトのデザイン知識は必須の物になりそうですね。 個人的にも徐々に慣れてきましたが、こうしたうまくデザインされているサイトは参考になります。 将来的にはスマホがPCを逆転するなんていう予測もあるぐらいなので、ちゃんとやっておきたいところ。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 スマフォ向けのPHP/
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」:phpspot開発日誌
もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」 2011年05月11日- 追記）じっくり利用して見た方が以下のような問題点を示してくれました。 ・利用勝手があまり良くなく、日本語環境を前提には、考えていないように思われます。 ・ＡｃｔｉｏｎＳｃｒｉｐｔ の記載方法が不明。 ・モーショントゥイーンの機能不足 レビューを参考にさせて頂く限り、現段階では「Flashを買わなくてもいい」という結論には当然ならないと思います。いつもながら脊髄反射的にエントリにして、不快にさせてしまった方々には申し訳ありませんでした！ 但し、簡易的なアニメーションがフリーで作れるということは有用で、掲載されているサンプルの質も高く、フリーである限り機能のデグレードはある程度しょうがないと思うのと、話題に上がることで今後の発展にも期待していきたいと思い
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」:phpspot開発日誌
新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」 2011年04月25日- 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」。 この春、会社に入って、サーバに入って vim でプログラミングさせられている人はそれなりにいそうですが、その場合に速攻でプログラミングをマスターできるquickrunプラグインを入れておきましょう。 プログラミングを覚えるには作って動かすが一番いいですが、「書いて」→「保存して」→「実行して」を一瞬で行えます。 具体的にはプログラムを書いていて、コマンドモードで「￥r 」をタイプするだけでペインが分かれてプログラムの実行結果が得られます。 VPSなどを借りて、これからプログラミングをはじめようって方にも有効です。 かなりインスタントに実行できるので、こう書くとこう出る、がサクサク進められる
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
スライドショー付きLightBox風イメージアルバムのサンプル:phpspot開発日誌
Dynamic Image Gallery and Slideshow - Web Development Blog This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. スライドショー付きLightBox風イメージアルバムのサンプル。 次のようなＵＩを持つイメージアルバム実装用のコードサンプルが公開されてます。 デモページを開いてみる ページ送りする際もフェードイン/アウトしてクールになってます。 自動ページ送り機能もあってなかなかいいです。 関連エントリ 気持ちよいスライド機能を提供する「noobSlide」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画
PHPでファイルをDLさせる際のPHPコード例:phpspot開発日誌
2008/2/22: sotarok様より、連絡がありコードを一部訂正 参考1）http://d.hatena.ne.jp/odz/20080215/1203099900 参考2) http://d.hatena.ne.jp/cocoiti/20080221#1203611811 PHPでファイルをDLさせる際のPHPコード例 通常、PHPでファイルをダウンロードさせるとすると、次のようにシンプルにかけます。<?php header('Content-Type: application/octet-stream'); readfile("dl.zip"); ?> が、これだと、ダウンロード時に、保存名がアクセスしたphpでのファイル名になってしまいます(例えば、dl.php)。 そこで次のように Content-Disposition でファイル名をブラウザに通知することで、dl.zip
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
