CSSベースのフォームテンプレート:phpspot開発日誌
A CSS-based Form Template CSSベースのフォームテンプレート。 フォームをデザインするのって結構面倒だったりしますよね。 フォームのテンプレートがあらかじめ容易されていれば、コピペであっという間にフォームが出来そうです。 しかもCSSベースなのでデザイン変更も容易でHTMLも綺麗ということですごく便利です。 次のような綺麗なフォームのテンプレート。 １枚の中にCSSの定義も全部入っていて便利に使えそうです。 関連エントリ セクシーなCSSホバーボタンを作成するチュートリアル DIVを垂直方向に中央寄せするCSSサンプル CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例 CSSの小技集、20個
便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌
Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか？(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限
サイトのCSSを見たままリアルタイムに編集するツール色々:phpspot開発日誌
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
2006年を彩った50の超美麗CSSデザインサイト集:phpspot開発日誌
50 Beautiful CSS-Based Web-Designs in 2006 | Smashing Magazine Let’s take a close look at some of the most beautiful designs we’ve seen in 2006.2006年を彩った50の超美麗CSSデザインサイト集。 どれも凄まじく凝ったサイト集で、1個1個が1つのクリエイターが精魂込めて作ったのが伺えます。 (Webデザイナーのためのリンク集) こういった美しいサイトを参考にサイトを作ったりすると自分のセンスも磨かれそうですね。 単に見るだけでも楽しめます。 2007年も素晴らしいサイトが出てくるんでしょうね。こういったデザインは数年前では見られなかったようなもののように感じます。 WEBデザインの面での進化についても今後が楽しみでしょうがないですね。 作成に使っ
CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与:phpspot開発日誌
Showing Hyperlink Cues with CSS (Ask the CSS Guy) I like the little icons next to hyperlinks that signify if that link will take me offsite, open a popup, or link to a file (as opposed to another html page). Here's how to do it in a way that's supported in IE7, Firefox, and Safari. CSSでPDFやExcel等のファイルタイプ別アイコンを自動付与する方法が紹介されていました。 自動付与、というのは、例えば、<a href="***.pdf">pdfファイル</a> のようなリンクがあったとすると、pdfという最後
10分だけ使えるメールアドレスを作成「10 Minute Mail」:phpspot開発日誌
10 Minute Mail By clicking on the link below, you will be given a temporary e-mail address. Any e-mails sent to that address will show up automatically on the web page. 10分だけ使えるメールアドレスを作成「10 Minute Mail」。 ちょっとだけ試したいウェブのサービスがあってもむやみに使っているアドレスの登録を行うとメールアドレスが漏れてしまってスパムの元となったりする場合があります。 そんな場合に使える「10 Minute mail」。アクセスすると即座にメールアドレスが発行されてその場で使えるようです。 メールアドレスが発行されたページのリロードで新着メールのチェックが行えます。 ただし、発行されたアドレスの有
ブログのコメント部分やコメントフォームのデザインを色々集めたサイト:phpspot開発日誌
Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメント部分やコメントフォームのデザインを色々集めたサイト。 いろんなブログのコメント部分やコメントフォーム部分の画像をコレクションしているようです。 コメント部分 コメントフォーム部分 これだけのデザインサンプルがあると、自分がデザインする時に大いに参考に出来そうですね。 形が決まったら後はオリジナリティを加えてデザインを完成させるという方法でデザインすれば効率よくカッコいいコメント部分が作れそうですね。 関連エントリ 2006年を彩った50の超美麗CSSデザインサイト集 ウェブデザインに便利なツールをまとめた「Web Design Tools」
知っておくべき５つの英文フォント2、他:phpspot開発日誌
5 Freefonts You Shouldn’t Have Missed | Smashing Magazine We expand our collection of high-quality freefonts we’ve put together few months ago (and started one year ago). 知っておくべき５つの英文フォント。 いろんな場面で使えそうな書体のフォントが紹介されていました。 District Thin Fertigo FF Clan Narrow Bold Kontrapunkt Com4T Fine Regular その他色々フォント関連エントリ クルッとカールした曲線が特徴のかわいらしい英字フォント「doremi」 10,000種類以上のフリーフォントを試してダウンロードできる「better fonts」 オンラインでフォン
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
FlashやCSSのデザインギャラリーサイトをあつめた「Zeniltuo.com」:phpspot開発日誌
Zeniltuo.com - inspiration journey - All website galleries in one page FlashやCSSのデザインギャラリーサイトをあつめた「Zeniltuo.com」。 以下、CSSギャラリーサイトの抜粋。沢山あるもんですね。 Artnetz Best Web Gallery brdcast CeeSeS Cool Site Collection Creative - Pakistan CSS - Website css Beauty CSS Blast - RU CSS Bloom CSS Brain - HU CSS clip CSS Collection CSS Container CSS Demo CSS Design .ru CSS Drive CSS Elite CSS Fill CSS Galaxy CSS Galer
iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」:phpspot開発日誌
ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白ＵＩサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風ＵＩでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>
PHPからYouTubeのAPIを簡単に使えるServices_YouTube:phpspot開発日誌
Index of /pear/Services PHPからYouTubeのAPIを簡単に使えるServices_YouTube。 PHP4用、PHP5用が配布されてます。 PHP4用はYouTube4.phps、PHP5用はYouTube.phpsになってます。 次のサンプルはPHP4からYouTubeを扱う際のサンプル。 こんな感じで非常に簡単に扱うことが出来ます。PHP5版も殆ど同様(requireするファイルが別)に使えます。 <?php require_once 'Services/YouTube4.php'; $youtube = new Services_YouTube('YouTubeのDEVID'); //$response = $youtube->getProfile("userid"); // プロフィールを得る //$response = $youtube->list
超クールなフリーフォント５種:phpspot開発日誌
5 More Freefonts: Chara, Preface, Colaborate | Smashing Magazine High quality freefonts are always nice to have, but usually they are extremely hard to find. 超クールなフリーフォント５種。 フォントは色々入れておくとデザインの際に役立ちますね。気にいったフォントは入れておきましょう。 (フォントの入れすぎはディスクやメモリ容量を食ったりするので注意が必要ですが) Chúcara Preface Light Zalamander Colaborate Lindau フォント関連エントリ 超クールフォント10選 Web 2.0なサイトのロゴに使われているフォントへのリンク集 WindowsVista標準の日本語フォント開発版を試してみまし
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル:phpspot開発日誌
Harry Maugans How to Create a Collapsible DIV with Javascript and CSS One of the most handy (and cool) tricks a web developer could learn to use is collapsible DIVs. JavaScriptとCSSで特定DIV要素の表示/非表示を切り替えるサンプル。 次のように数行で行える簡単なサンプルが紹介されていてライブラリに依存しない＆軽い、簡単な実装を行いたい時に使えます。 <div id="mydiv" style="display:none"><h3>This is a test!<br>Can you see me?</h3></div> <a href="javascript:;" onmousedown="if(document
WEBデザインの際に使える５０のソース:phpspot開発日誌
50 sources for web design inspiration by Fuzzy Future When Fuzzy Future first got started, I said that our goal was to build content that other people can use to improve their own projects. WEBデザインの際に使える５０のソース。 当ブログでもいろいろと紹介してきましたが、カッコいいサイトをまとめているサイトがあったので紹介。 デザインに迷ったときはまず、他のデザインサイトを見ていろんなデザインを視覚に入れることが重要ですね。 The Best Designs Six Shooter Media’s Free Templates 2Advanced Studios Andreas Viklund Fre
PHPで画像のサムネイルを超簡単に作る方法「phpThumbnailer」:phpspot開発日誌
Index of /projects/phpThumbnailer PHPで画像のサムネイルを超簡単に作る方法「phpThumbnailer」 PHP+GDな画像のサムネイル作成って結構面倒だったりしますが、配布されているThumbnail クラスを使えば超簡単にサムネイルが作れます。 配布パッケージ内に、class.Thumbnail.phpが含まれていて、次のようなサンプルプログラムで簡単に画像のサムネイルを生成できます。 <?php include("class.Thumbnail.php"); $tn_image = new Thumbnail("sample.jpg", 300, 300, 0); $tn_image->show(); ?> プログラムでは、sample.jpg のサムネイルを 最大幅 300px, 最大高さ 300px のサイズで作成し、画面に出力します。 Th
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 も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressの超クールなテンプレート集:phpspot開発日誌
CSSベースの超クールなナビゲーション集:phpspot開発日誌