DiaryTechnology 見やすいチャートを作成するコード22選『22 Code Snippets for Creating Decent Charts』 見やすいチャートを作りたい。 そんなあなたにおすすめなのが、『22 Code Snippets for Creating Decent Charts』。見やすいチャートを作成するコード22選だ。 以下にいくつかご紹介。 » CSS FOR BAR GRAPHS 見た目が綺麗。クリーンなXHTMLとCSSしか使わない。 » Webfx Charts ライン、バー、面でグラフを表示 » A definition list bar chart by CSSPlay メジャーブラウザに互換性がある » CSS Line Graphs CSSのライングラフ » An accessible bar chart 使いやすいバーチャート その他の

Design デザイナーならブックマークしておきたい記事10選『10 lists every designer should bookmark』 デザインに使える記事を探している。 そんなあなたにおすすめなのが、『10 lists every designer should bookmark』。デザイナーならブックマークしておきたい記事10選だ。 以下にご紹介する。 » 101 ideas to get more freelance work and generate new clients leads フリーの仕事を増やすアイディア101選 » 25 best free quality fonts 無料で使えるクオリティの高いフォント25選 » Where can i find textures and background images? テクスチャと背景画像配布サイト集 » Free

ページのソースをもっと見やすくしたい。 そんなあなたにおすすめなのが、『View Source Chart』。HTMLソースをネストでグラフィカルに表示するFirefoxアドオンだ。 『View Source Chart』は、ページのソースをタグごとに見やすく表示してくれる。背景色や点線、実線で区別してくれたり、タグをクリックすると折り畳んでくれたりする。 インストール後、右クリックのメニューから「View Source Chart」を選ぶことで使える。 思ったよりもソースが見やすくて快適だ。 HTMLソースをネストでグラフィカルに表示、チェックして使っていきたいですね。 スカルリングのことで頭がいっぱいです。。

DiaryTechnology CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type="text/css"> body { background:#ccc; margin:0; padding:0; } #wrap { position:absolute; width:500px; height:100px; left:50%; top:50%; margin-left:-250px; margin-top:-50px; background:#ff

手軽にblockquote（引用）のデザインがしたい。 そんなあなたにおすすめなのが、『CSS Speach Bubbles』。CSSによるバブルタイプのblockquoteデザインだ。 このサイトでは、CSSでレイアウトされた、バブルタイプのblockquoteデザインを配布している。zipでダウンロードが可能だ。 ダウンロードすると、以下のファイルがゲットできる。 bubbles.css rounded_corners.inc.js tip-rounded.gif index.html tip-pimped.gif tip.gif htmlは以下のように記述。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</st

いろんなAjaxを実装したい。 そんなあなたにおすすめなのが、『Ajax Compilation』。クールなAjaxスクリプト108選だ。 以下にご紹介する。 Pie & Donut chart パイ&ドーナツチャートを実装 Reflection.js 写真に反射効果を与える Highslide JS クリックで拡大するサムネイルビューアー TripTracker アニメーションするバーを持ったイメージビューアー Prototype Window HTMLにwindowを追加 Dragable Content Script コンテンツをドラッガブルにする Drag & Drop ドラッグ&ドロップを可能に Amberjack クールなサイトツアーを実装するライトなオープンソースライブラリ Tabbed Content Ajaxで作られたタブ ThickBox 3 一枚の画像や複数の画像、i

CSSでナビゲーションの実装方法がまとまっているサイトはないだろうか。 そんなあなたにおすすめなのが、『CSS Navigation Techniques (37 entries)』。CSSのナビゲーションメニュー37選だ。 このエントリーでは、CSSで作られたナビゲーションメニューが37種類紹介されている。 リンク先はA List Apartなどにリンクし、そこに実装方法が紹介されている。 CSSでメニューを実装できるのはわかっていても、これだけ種類があると、いろんなメニューをデザインできるのではないだろうか。 CSSのナビゲーションメニュー集、チェックして今後実装してみたいですね。 かなり久々に早く帰ってきました。。まったりと制作かな。

Design Webデザイナーのためのコードスニペット125選『125 Code Snippets for web designers』 Webデザインのネタを探している。 そんなあなたにおすすめなのが、『125 Code Snippets for web designers』。Webデザイナーのためのコードスニペット125選だ。 以下にいくつかご紹介。 » Ajax Star rating Bar PHPとMySQLで作るレーティングバー。リロードはない。 » Ajax Contact Form Ajaxのコメントフォーム » Wufoo オンラインフォームを簡単に作成 » Adam’s Radio & Checkbox Customisation Method チェックボックスを画像を使ってカスタマイズする方法 » CSS Rounded Corners 画像やjavascriptを使

かっこいいテーブルをデザインしたい。 そんなあなたにおすすめなのが、『A CSS styled table version 2』。デザイナーならこう作るCSSスタイルテーブルだ。 このエントリーでは、クリーンなソースでコーディングされたテーブルが2つ紹介されている。 » Example 1 背景画像は使わず、セルに背景色を使った例 » Example 2 背景画像を使った例 どちらもページのソースを見るのが早いだろう。 シンプルでとても綺麗なテーブルに仕上がっていると思う。 デザイナーならこう作るCSSスタイルテーブル、チェックして作っていきたいですね。 プランナー、アートディレクターにたくさんのことを教わりました。「とりあえず手を動かすのがレイアウトの基本」だと。あとデザインはピクセルよりも見た目。人間の目にはくるいがあるから見た目で綺麗にそろっていればいい。とにかく手を動かしていこうっ

優れたブログデザインを参考にしたい。 そんなときにおすすめなのが、『30 More Excellent Blog Designs』。Smashing Magazineによる素晴らしいデザインのブログ30選だ。 このエントリーでは、以下のカテゴリーにわけてブログデザインが紹介されている。 ・シンプル&ホワイトスペースを活用したデザイン – Simplicity and Whitespace ・ブログに見えないデザインのブログ – Weblogs Which Don’t Look Like Weblogs ・かっこよくオリジナルなブログデザイン – Nice And Original Blog Designs ヘッダデザインや背景、パーツデザインに凝ったブログが多く、刺激になる。 ブログのデザインを考える際に参考になるのではないだろうか。 素晴らしいデザインのブログ、チェックして自分のブログに

DiaryTechnology かなり使えるAjaxアプリケーション43選『43 Exceptionally Useful AJAX Applications』 サイトに便利なAjaxシステムを追加したい。 そんなあなたにおすすめなのが、『43 Exceptionally Useful AJAX Applications』。かなり使えるAjaxアプリケーション43選だ。 以下にいくつかご紹介。 » Dragable Boxes ドラッグできるボックスを生成 » AJAX Poll Ajaxで実装された投票システム。PHPとMySQLで動作 » TableKit Ajaxでリサイズ&ソートができるテーブルを生成 » JqUploader サイトにファイルアップローダを実装。AjaxとjQueryで動作 » Rounded Corners With AJAX Ajaxで角丸を実装 » AJAX

無料でクオリティの高いアイコンを使いたい。 そんなあなたにおすすめなのが、『Quality mini icons』。商用でも無料で使えるロイヤリティーフリーアイコン400選だ。 このエントリーでは、10×10と16×16のサイズのアイコンを配布してくれている。 個人利用、商用利用に関わらず無料。 ただし、「The icons can be used royalty-free by Creative Commons Attribution 3.0 license」 とあるように、Creative Commons Attribution 3.0 licenseに則ったロイヤリティーフリーとのこと。 サイトに以下のようにリンクをすればOKだ。 » Creative Commons Attribution 3.0 license 無料でしかもクオリティの高いアイコンがそろっているため、かなり使える

ナビゲーションメニューをかっこいいものにしたい。 そんなあなたにおすすめなのが、『Navigation Menus: Trends and Examples』。Smashing Magazineによる、かっこいいナビゲーションメニュー集だ。 このエントリーでは、以下のカテゴリーにわけてたくさんの魅力的なナビゲーションが紹介されている。 ・ブロックナビゲーション ・Macスタイルのナビゲーション ・かっこいいアイコン付きのナビゲーション ・垂直方向のタブ型ナビゲーション ・手書きのナビゲーション ・ちょっと変わった動きをするナビゲーション ↑の画像はMacスタイルのナビゲーション。今すぐにでも実装したくなってくる。 これを機会にナビゲーションをリデザインしてみてはいかがだろうか。 かっこいいナビゲーションメニュー、チェックして参考にしていきたいですね。 TSUTAYAで本を見ていたらテンショ

DiaryTechnology 優れたCSSメニュー7選『7 Advanced CSS Menu, A Great Roundup!!』 かっこいいCSSメニューを実装したい。 そんなあなたにおすすめなのが、『7 Advanced CSS Menu, A Great Roundup!!』。優れたCSSメニュー7選だ。 以下にご紹介。 » Advanced CSS Menu » Advanced CSS Menu Trick » Son of Suckerfish Dropdowns » Tree Frog slide and fly menu » Mike’s Experiment » 8 web menus you can’t miss » Drop Down Tabs それぞれHTML、CSSなどが紹介されている。 優れたCSSメニュー、チェックして使っていきたいですね。 「トランスフ

DiaryTechnology CSSでドロップシャドウなどのCSSテクニック集『101 CSS Techniques Of All Time- Part 1』 CSSでサイトに彩りを加えたい。 そんなあなたにおすすめなのが、『101 CSS Techniques Of All Time- Part 1』。CSSでドロップシャドウなどのCSSテクニック集だ。 このエントリーでは、以下のカテゴリにわけてたくさんのCSSテクニックが紹介されている。 ・CSS Sprites – リストのアイコンを背景画像で指定する方法 ・CSS Rounded Corners – CSSで実装する角丸 ・Image Replacements Technique – テキストを背景画像で置き換えるテクニック ・Sliding Doors – スライディングCSSメニューの実装方法 ・Image Text Wra

DiaryTechnology テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』 美しいナビゲーションメニューを実装したい。 そんなあなたにおすすめなのが、『Elegant navigation bar using CSS』。テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーションだ。 このエントリーでは、↑のような美しいメニューのHTMLソースとCSSソースがすべて公開されている。 「Live preview」からはサンプルがみることができるし、「Download this tutorial」からは全ソースがダウンロードできる。 メニューのテキストとリンク先を変更するだけで実装可能だ。 テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション、ぜひ使ってみてはいかがだろうか。

CSSのサンプルから簡単にサイトが作りたい。 そんなあなたにおすすめなのが、『750 pixel Pure CSS Layouts』。100%ピュアCSSのレイアウトサンプルが見られるサイトだ。 このサイトでは、750px、900px、および100%（ブラウザいっぱい）のサイズのCSSレイアウトがたくさん紹介されている。 サイドバーも左だけのもの、右だけのものや、3カラム、4カラムなどがあってとても参考になる。 CSSはリンク先のソースを見ればOKだ。 100%ピュアCSSのレイアウトサンプルが見られるサイト、チェックしてぜひ使ってみてはいかがだろうか。 いろいろとインテリアショップを見に行って部屋のレイアウトを変えてみた。すごくよくなって気持ちいい☆

Technology デザイナーのための素晴らしいjQueryのチュートリアル8選『8 Fantastic jQuery Tutorials for Designers』 jQueryでクールなインターフェースを実装したい。 そんなあなたにおすすめなのが、『8 Fantastic jQuery Tutorials for Designers』。デザイナーのための素晴らしいjQueryのチュートリアル8選だ。 以下にご紹介。 ・Slide out and drawer effect アコーディオンメニュー ・Chain-able transition effects 数行のコードで大きさや透明度を変えながらボックスを動かすことができる ・jQuery Tabs リロードなしでタブを遷移 ・Creating an Editable Chart 編集できる表を作成 ・Easy Multi Sel

DiaryTechnology クリエイティブなCSSサンプル&チュートリアル50選『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』 クリエイティブなCSSを実装したい。 そんなあなたにおすすめなのが、『Using CSS to Do Anything: 50+ Creative Examples and Tutorials』。クリエイティブなCSSサンプル&チュートリアル50選だ。 以下にいくつかご紹介。 » Better Ordered Lists (Using Simple PHP and CSS) ↑のキャプチャはこちら。今までのリストとは違った見せ方をしたいときに。 » List Based Calendar リストでカレンダーを作成する方法。 » Create Custom Search Bars C

Design 革新的でプロフェッショナルなWebサイト49選『49 Professional and Innovative Websites』 かっこいいサイトを探している。 そんなあなたにおすすめなのが、『49 Professional and Innovative Websites』。革新的でプロフェッショナルなWebサイト49選だ。 以下にいくつかご紹介。 ↑はIMMOMENT OUTLINE2DESIGN StrawPoll Deaxon serene green discount box etonDIGITAL その他のリストは以下から。 » 49 Professional and Innovative Websites 革新的でプロフェッショナルなWebサイト、チェックしてぜひ見ていただきたい。 今日は暑そうだからTシャツを着ていこうっと。