自分の色(カラー）を持とう 【2】-デザインをつくる過程で出逢うもの、出逢うこと | 使える「デザインセミナー」
デザインの書籍というのは、すでに沢山あるとは思います。けれど、この勉強会の書籍が他と圧倒して異なる点、それは・・・ 実際にデザインにチャレンジしている人の、悩み、迷いとまどいが「ログ化」されて共有できるところにあります。 私はブログデザイン勉強会においても、本書の中でも、見られること、魅せることの重要さを強く訴えています。しかし、今、最もホットなデザインの可能性というのは、実は参加ブロガーさんたちが実感した「自分だけのデザインを作る」という過程において人が直面する、広義の「デザイン」—ブログへの取り組み方や、人生そのものを意匠・設計（デザイン）することにあります。 デザインとは、その関係性によっては、本来のスペック以上の力を持ち得ます。本書を通じて、ぜひ読者の皆さんにもそういったデザインのパワーを体験していただけたらうれしいです。自分のための、自分にとっての「正解のデザイン」は、インターネ
【CSS 】clearfixを使ってfloatを解除する | バシャログ。
最近、cssでよく使用しているのがclearfixです。 親ボックス内で子ボックスをフロートする場合、親ボックスの背景画像が表示されなかったり親ボックスのマージンがなくなってしまったりと問題がありました。 clearfixを使ってからは、結構スムーズにCSSを設定できるようになりました。 ソースは以下です。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; min-height: 1%; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hid
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
これでデザイナも安心？DreamWeaver向けRails拡張·RubyWeaver MOONGIFT
Ruby on Railsは開発者にとっては便利なフレームワークだ。だが、規模が大きくなるとデザイナーの方との協業が欠かせない。そうなるとデザイナーの立場になるとrhtmlやerbといったファイルはあまり都合が良くない。 入力補完機能が使える その点、PHPとDreamweaverの親和性は高く、作業がしやすい。その壁を乗り越えるためのソフトウェアがRubyWeaverだ。 今回紹介するオープンソース・ソフトウェアはRubyWeaver、DreamWeaver向けのRuby on Rails拡張だ。 恐らくデザイナーの方が最も使っているであろうDreamWeaverをRuby on Railsに対応させるのがRubyWeaverだ。DreamWeaverの機能拡張として提供され、インストールすればRuby on Railsのファイルが開けるようになる。 デザインモードでビューを編集 コント
MOONGIFT: » prototype.jsベースのカレンダー「protocalendar.js」:オープンソースを毎日紹介
よく、誕生日の入力などでドロップダウンリストから選ばせるものがあるが、あれほど入力が面倒なものはないと思っている。テキストボックスにそのまま数字で入れた方がよっぽども手軽だ。 とは言え、入力チェックやユーザビリティを考えるとそれもお勧めはできない。手軽で、さらに正確な入力が促せる方法としてこれをお勧めしたい。 今回紹介するオープンソース・ソフトウェアはprotocalendar.js、prototype.jsベースのカレンダー入力ライブラリだ。 protocalendar.jsはテキストボックスにフォーカスが当たるとカレンダーが表示されるライブラリだ。良くあるものだが、prototype.jsベースなのと、何より日本製というのが特徴だ。 日本製の嬉しい点としては、休日に対応している点だろう。ハッピーマンデーにも対応しているので、数年後の休日も表示されるのが素晴らしい。 さらに多言語対応によ
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
カラフルでフリーな美麗テクスチャ集:phpspot開発日誌
31 Most Colorful Collection Of High Quality Free Texture Packs - Opensource, Free and Useful Online Resources for Designers and Developers カラフルでフリーな美麗テクスチャ集が紹介されていました。 背景画像なんかに使うとインパクトがあってよいかもしれません。 Textures 05 - Stock Pack Vintage Grunge Textures High-Resolution Grungy Paper Textures Scrapbooking Large Textures 全部見る それにしても、deviantart ってなぜここまでリソースが集まるんだろう、と思ってしまうぐらい多数のリソースがありますね。 世界中から集まってうまくコミュニテ
プロレベルでハイクオリティなXHTML/CSSテンプレート集:phpspot開発日誌
100 Free High-Quality XHTML/CSS Templates | Developer's Toolbox | Smashing Magazine プロレベルでハイクオリティなXHTML/CSSテンプレート集。 本当にフリーなのか？というクオリティのテンプレート集が色々。 Package Consultant Environmental Brand Internet Jobs Internet Music Greefies Squick Design Harvest 全部見る 毎回驚きですが、今回もすごいです。 デザインの仕事も減ってしまいそうで怖い。 関連エントリ CSSテンプレート配布サイト色々まとめ デザインされたフリーのCSSテンプレート集 フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」
ファイルアップロードの際に便利なFlash/JavaScriptウィジェット集:phpspot開発日誌
10 Most Interesting Upload Widgets | AjaxLine ファイルアップロードの際に便利なFlash/JavaScriptウィジェット集。 通常のアップロード機能を実装すると使えないと言われないくらい、Flickrなどのアップローダなんかは便利になっていますよね。 実装すると便利になりそうなウィジェットが色々と紹介されていましたのでご紹介。 Flash Upload Widget Flashを使って、アップロードの進捗を表示してくれるウィジェット XUpload Perlで書かれたリアルタイムアップロードウィジェット Uber-Uploader Perl or PHP + JSで書かれた複数ファイルアップローダー。進捗表示つき jqUploader jQueryアップロード用プラグイン Ajax Style File Upload ASP.NET用リアルタ
リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集:phpspot開発日誌
45 New jQuery Techniques For Good User Experience | Developer's Toolbox | Smashing Magazine リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集。 JSフレームワークはもうjQueryの時代だと言わんばかりの豊富かつ有用なサンプルが多数掲載されています。 Build A Login Form With jQuery Spoiler Revealer with jQuery AJAX Upload FCBKcomplete Create Accessible Charts Using Canvas and jQuery Radio Button and Check Box Replacement Submit a Form without a Page Refresh jQuery
とても洗練されたＵＩの日付ピッカー＆カレンダー集:phpspot開発日誌
Beautiful datepickers and calendars for web developers とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。 日付入力も便利だけでなく、クールに行えます。 datepicker シンプルだけどクールなカレンダー jquery datepicker From〜Toが指定できるカレンダー Calendar 立体的でクールなＵＩ jPint iPhoneっぽいＵＩ 全部見る たくさんありすぎて迷いますが、サイトのＵＩや、用途に応じて使い分ければ便利そうですね。 関連エントリ 超クールなカレンダー型日付入力補助用JSライブラリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 日付入力を便利にするカレンダー/日付ピッカー集
Eコマースに使えるWordPress、osCommerce用テンプレート集:phpspot開発日誌
35 Free High-Quality E-Commerce Templates | Developer's Toolbox | Smashing Magazine Eコマースに使えるWordPress、osCommerce用テンプレート集。 以下は紹介されているosCommerceテンプレートの一部で英語だけど結構かっこよくそれっぽくなっています。 Footwear Appliance Computer Store 全部見る テンプレートもたくさんありますが、オンラインショッピングカート用のプログラムも多数あることが分かりますね 関連エントリ Eコマースに使える、ハイクオリティなフリーアイコン集
わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
WEB開発に活用できる、２００９年初お目見えアイコンセット集:phpspot開発日誌
WEB開発に活用できる、２００９年初お目見えアイコンセット集。 知っていると思っていても、まだまだ知らないアイコンは色々あるみたい＆生まれているみたい。 Proxal Icon Set v2 by !valkyre on deviantART 細かくデザインされたミニアイコンセット Sanscons シンプルだけど背景色が選べて汎用に使えそうなアイコンセット iconset "sketch'd up!" on the Behance Network スケッチがいい味をだしているアイコンセット WebDev Icon Pack WEB開発に使えそうなものがかなり沢山詰まっている Irokez CMS Icon Set CMSに使えそうなアイコンセット集 参考エントリ：50 of the Best Ever Web Development, Design and Application Ico
Bodenplatte » MODx ドキュメント タグ
ドキュメントに書く事ができる MODx が提供するタグ ドキュメントに書く事ができるMODxが提供するタグとは ドキュメントの何たるかを飲み込んでいただいたとして、次は実際のドキュメントを書いてみるわけである。MODxのドキュメントの書き方の殆ど全てを占めるのがMODxタグであるので、これを紹介しておこう。 ドキュメントを書くにあたり、通常はHTMLをつらつら書き込んでいく。HTMLでは < と > の対で示されるHTMLタグを埋め込む事でブラウザへの指示を行う。MODxにおいてはMODxへの指示をタグの形式でドキュメントに書き込む事で行う。HTMLタグはブラウザが解釈するが、MODxタグは、MODxがドキュメントをリクエストに従って出力するとき、MODxが解釈して文字列に変換するのである。 MODxのドキュメントの内容はMODxタグ以外全て書き込んだとおりに出力する。ドキュメント
商用・個人サイトで利用可能なロイヤリティフリーの写真素材サイト集 | コリス
Freeziqのエントリーから、商用・個人サイトで利用可能なロイヤリティフリーの20の写真素材サイトを紹介します。 20 Best Places to get Free Stock Photography ライセンスは再販以外はフリーのものが多いですが、利用する際には個別に確認してください。
ウェブデザインの7つのトレンドとそのチュートリアル | コリス
Deziner Folioのエントリーから、ウェブサイトのデザインに使用されている、最近の7つのトレンドとそのチュートリアルを紹介します。 Design Trendz ※チュートリアルのいくつかは当方で追加しています。 Lights n Shadows ライトを当てているように、シャドウ効果を持たせます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSやHTMLを知らなくてもレイアウトやタブや角丸が作成できる -Layout Generators
牛肉、豚肉、鶏肉のイラスト｜イラスト素材の素材ダス