相性の良い色を自動でピックアップしてくれる「ColorBlender」
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
プログラマでも出来るWebデザイン - Blog.37to.net
home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成： 2007-01-08T01:58:41+09:00 更新： 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
サイトのCSSを見たままリアルタイムに編集するツール色々:phpspot開発日誌
サイトのCSSを見たままリアルタイムに編集するツール色々。 WEBデザイン開発において、編集→リアルタイム反映というのはなかなか効率がよいですね。 ということで、各種、リアルタイムCSS編集ツールをピックアップします。 FireFox拡張 or スタンドアロンアプリ FireBug - リアルタイムに指定部分のCSSが切り替え可能(参考記事)。CSS以外にも便利機能満載。 EditCSS - FireFox拡張で、エディタがインストールされ、エディタ編集と同時に即座にCSSが反映される。 CSSVista - IEとFireFoxの画面で一括プレビューが可能。 Web Developer ToolBar - WEBデザイナー必須のFireFox拡張。CSSの直接編集も可能。 他にもCSSやアクセシビリティに関する便利機能満載。 ブラウザ上で動作するオンラインツール たぬきのしっぽ - CS
GNOME 2.16.2リリース MOONGIFT
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
WEB開発者のためのWEB開発ツール:phpspot開発日誌
Brennan’s Blog Blog Archive Web Development Tools for the Power Developer Over the past few years the available tools for web development have become quite powerful. As Firefox became more popular the number of useful extensions grew quickly. WEB開発者のためのWEB開発ツール、ということで色々紹介されてます。 バリデータ(Validator) - フォーマットが正しいかチェックするツール HTML/XHTML Validator - W3C CSS Validator - W3C Feed Validator (RSS and Atom) Jav
IE 6.0 - memo.xight.org - Clean CSS - CSSの最適化，ファイルサイズ削減ツール
Summary テキストフィールドにCSSを入力するか，CSSが置いてあるURLを指定して，"Process CSS" をクリック． 使用前 (196byte) #example { color: rgb(0,0,0); background-color: #ffffff; font-weight: bold; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px 5px 10px 5px; } 使用後 (Compression: Low) #example { color:#000; background-color:#fff; font-weight:700; margin:5px; padding:10px 5px; } 入力 196 byte 出力 99 byt
CSSとHTMLをリアルタイムに書き換えてプレビューできる「rendr」 - GIGAZINE
「CSS」タブをクリックして、中のコードを書き換えると、リロードせずにそのままリアルタイムにページ全体を再レンダリングしてくれます。「Markup」タブをクリックすればHTMLコード自体を書き換え可能。元に戻すには「clear markup and css」をクリック。 Firefoxの拡張である「greaseMonkey」バージョンもあるので、自分のサイトで同じようなことができるようになり、CSSデザインの試行錯誤が楽になります。 詳細は以下から。 rendr http://gregtaff.com/rendar2.html greaseMonkey版はキャッシュが有効な場合に、ローカルキャッシュのHTMLファイルを直接書き換えてリアルタイムプレビューするというモノになっています。 インストールするにはgreaseMonkeyをインストールした状態で上記ページの「greaseMonkey
ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE
まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配
角丸テーブル簡単作成ツール
角の丸いテーブルの作成ツール。 画像あり、画像なしのパターンを選択でき、 角のデザインなども自由にカスタマイズできます。 [ 画像あり版 - 画像なし版 ]
Webベースですぐにデザインを反映できるCSSエディタ:phpspot開発日誌
Web-based CSS Editor Tamkey It is a very strong web tool for weblog owner. "Tamkey CSS Editor" can modify your current stylesheet and easily change it what you want. Styles will be updated with a single click and you can verify it at the same time. You can also find the CMS/BLOG special selector with "Red Mark". The current selector will be in a red box while you press the "Red Mark" button. Tamke
その場でデザイン編集@はてな
概要 はてなダイアリー、はてなグループ、はてなブックマーク、はてなアンテナのデザインをその場で編集します。 ダウンロード hatenadesigneditor.user.js スクリーンショット 使い方 まず編集ウィンドウを出します。 Operaの場合ブックマークレットを使います→デザイン編集 Firefoxの場合メニューのツール→User Script Commands→edit Hatena Designを選んでください テキストエリアにスタイルシートを入力して「プレビュー」を押してやると、その場でページのデザインが変わります。 テーマの変更もできます。この時点ではまだはてなのサーバーに情報は送られていません。 今選択しているテーマのスタイルシートを確認したいときは「CSS」を押すとcssファイルを別ウィンドウで開きます。 間違えてしまってやり直したい、というときには「やりなおし」ボタ
Web2.0 アプリケーションライク な背景画像を生成する Background Image Maker
http://lab.rails2u.com/bgmaker/ ウェブサイトのデザインをしているとき、自分はCSSを利用します。そのCSSを書いていて、「ああ、こんな背景画像がほしーな」と思うと、今までは画像編集ソフトでちまちま作ってSCPでサーバにアップして確認し「いやここはもうちょいこうした方が」とまた少しだけ修正してアップして…という繰り返し作業を行ってました。 しかしその作業単調が面倒になってきたため、簡単にWeb2.0っぽいアプリケーションでよく使わるような背景画像をWeb上から作成できるツール、「Background Image Maker」を作ってみました。下のような背景画像を簡単に作成ができます。また先日このページを現在のデザインにリニューアルしたのですが、今使っている背景画像も全部 Background Image Maker を使って作成してます。 使い方は値を適当に弄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインに使える16のジェネレーターツール - DesignWalker
Web Design Tools
caramel*vanilla - 色に関する便利ツールいろいろ