[B! WEBデザイン] [2ページ] takesukeのブックマーク

プログラマでも出来る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 な人を対象にしています。使用したツール・サイト一覧作成過程は後半に書くとして、今回使用したサイト・ツールで

takesuke 2007/01/09

素人のオレでも出来る様になるだろうな

WEBデザイン

リンク

Collection & Copy - 相対パスを絶対パスに変換する

JavaScriptIE 6、IE 7、Firefox 2.0、Opera 9で確認。 function absolutePath(path){ var e = document.createElement('span'); e.innerHTML = ''; return e.firstChild.href; } alert(absolutePath('/')); 関連リンクJavaScriptな日々 | 相対パスを絶対パスに変換する方法Imageを使っています。 getAttribute href bugBug Report: getAttribute(”HREF”) is always absolutegetAttribute("href",2)とか。既存のa要素のhrefは上記の方法で絶対パスになるけど、document.createElement('a').href='/'では、

takesuke 2007/01/03

リンク

ステルス・ウェブ・デザイン - Ringo's Weblog 2006年12月16日アーカイブ

ステルス・ウェブ・デザインステルス・デザインの方法という本がある。(Webテキスト) この本では、﹁レーダーで見つけにくいかたちは良いかたちである﹂という、デザインに関する新しい理論を提唱し、その名前を﹁ステルス・デザイン﹂と命名している。ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、極めて大きく発展する可能性を秘めている。このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。私はまず、ステルス・デザインの考え方を発展させる第一段階として、﹁ステルス・ウェブ・デザイン﹂という方法論を考え、いくつかの提案をする。その提案資料を作成したので、このエントリにupしておく。この資料は、Mac用のKeynoteで作成した。PDFで出力すると、画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、ぜひTIFF版を見て

takesuke 2006/12/22

ステルス？見えなかったら、デザインもあったもんじゃないじゃん、意味無いじゃん。

WEBデザイン

リンク

Web デザイナーに求めたい 5つのこと | WWW WATCH

趣味として Web サイトを作っている場合は置いといて、仕事として Web サイト制作に携わる Web デザイナーであれば、今後、最低限これくらいは押さえといて欲しいなということをえらそうに書いてみます。個人的にスキルが「デザイン」よりも「コーディング」に偏っている傾向があるので、内容的にはコーディングに関係する話が多くなっているかもしれませんけど...... 1、DTP 脳からの脱却 DTP の延長で作られる Web サイトデザインの中にはフォントサイズやテキストの量が決め打ち前提で作られているデザインも少なくありません。それが悪いとは言わないんですけど、現在の Web 制作においては、CMS を始めとした他のプログラムとの連動やアクセシビリティを念頭に、柔軟性のあるデザインが求められます。自分の思い描いたとおりにデザインをコントロールしたいという気持ちはわからなくはないので

takesuke 2006/12/15

人の考えと自分の考え

WEBデザイン

リンク

pruto.jp - よく使うCSSの話|基本編

2008.06.24 1年半ほど前の記事なので、現在は通用しない部分もあるかと思いますので最新の技術・流行り等を求めている方はご注意ください。仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCSSを書き始めるときである。どうしようかなーなんて迷いながらもなんだかんだで結局はいつも同じ形で出来上がるから今後どうしようかなーなんて迷わずにスパっと仕事に入れるようにするためのまとめてみよう。はてなブックマークなんかでもよくCSS関連の記事が人気エントリーにあがってきたりして、それらを踏まえつついつか自分なりにまとめて書きたいとおもっていたから丁度良い。色々あるからまずは基本となるところから。仕事を始めて数ヶ月が過ぎ、案件もいくつかこなしてきたりしてきた。自分の仕事の進め方の中で毎度一瞬迷う部分がある。それはCS

takesuke 2006/12/13

cssにつーいて

webデザイン

リンク

【コラム】プロに学ぶWeb 2.0な画像テク (1) Web2.0的サイトのグラフィック表現 | クリエイティブ | マイコミジャーナル

Web2.0的サイトのグラフィック表現一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、﹁なんかIT﹂な香りがして、さまざまな企業の﹁ホームページ﹂に採用されていたものです。時は流れて﹁IT﹂という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに﹁Web2.0﹂があります。これも多少の﹁今更﹂感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。その昔、

takesuke 2006/12/07

すんげぇ～

リンク

http://free-ten.com/

takesuke 2006/12/04

いいねぇ

リンク

ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト

こんにちは　satoです。いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま

takesuke 2006/11/28

見るのではなく、理解する事が大事だって最近になって思い始めた

リンク

XHTML、CSS を学ぶ時の 6つの間違い

XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりもXHTML でしょということでタイトルや本文内ではXHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。1、とりあえず Dreamweaver を買ってくる別に﹁Dreamweaver﹂だけに限らず、オーサリングツールさえ手に入れればXHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま﹁オーサリングツールが使える = XHTML を理解している﹂だと思い込んでいると後になって困ることになると思いますよ。オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に

takesuke 2006/11/22

鈴木から

リンク

Neave.com ...the interactive playground of Paul Neave

Neave Interactive Apps from Neave Interactive, including Zoom Earth, Webcam Toy, Strobe Illusion, Bouncy Balls and more.

takesuke 2006/11/22

こんなアイデアもある

WEBデザイン

リンク

無料でウェブサイトのテンプレートを配布しているサイトいろいろ - GIGAZINE

オープンソースだったり、フリーだったりといろいろ。ブログのデザインの参考にしたり、見映えのするサイトを作りたいときとかに便利。全部でサイトデザインの総数は3000個以上ありますので、よりどりみどりです。まずはこれ。数は少ないですが、ブログ用とかウェブサイト用以外に、写真もあります。 Open Source Website Templates and Downloads studio7designs studio 7 designs 次のサイトは現時点で1645もウェブサイトのデザインが置いてあります。 Open Web Design - Home 以下のサイトはテンプレート79個＋35個＋11個。ほかにもロゴとかもあります。 Zymic ¨ Free Templates & Tutorials 最後のサイトは現時点で1688もデザインがあります。 Open Source Web Desi

takesuke 2006/11/20

遅い、遅すぎる。。。こんなページがあるなんて ●WEBデザイン ●HTML

リンク

高品質でフリーのウェブサイトテンプレート集「TemplatesBox.com」 - GIGAZINE

通常のウェブサイトだけでなく、Flashサイトのテンプレートやロゴマークのテンプレート、バナーやボタンまで置いてあります。これらがすべてフリーというのが驚き。全部で200個以上あるようです。 TemplatesBox.com http://www.templatesbox.com/ ウェブサイト用テンプレートは利用したPSDファイルやフォントも同梱されており、DreamweaverかFrontpageで編集しやすいようにできています。ウェブサイト用テンプレートあれこれ http://www.templatesbox.com/templates.htm ロゴデザインのテンプレートはPSDファイルとフォントファイルが同梱されています。親切。ロゴデザインのテンプレート http://www.templatesbox.com/free-logo-templates/index.htm ウェブサ

takesuke 2006/11/20

見つけるのが1週間早かったらな～～～～～

リンク

web2logo.com

This domain may be for sale!

takesuke 2006/11/20

言葉でこんな感じって表現するより、フィーリングで感じるものがＷＥＢ2.0なんだろーな

リンク

ゆんフリー写真素材集

写真素材集ｈｐへようこそ。約20000枚、最大600メガピクセル︵デジカメ100枚分︶クラスの超高解像度無料写真素材画像サイトです。この写真素材画像は商用利用、加工を含めてフリー︵無料︶です。風景、花、かわいい写真がありますので、hpの背景壁紙画像やイラストの背景、携帯待受画像などにどうぞ。利用にあたっては条件を御読みください。入り口は→こちらワールドワイドで活用されています世界の200の国と地域から月間30万人、200万PVの利用をされています。メジャーなアーティストシーンで活用されています平原綾香さんの﹁心﹂という曲のプロモーションビデオのオープニング画像としても使われています。 NHK、フジテレビ、TBS、テレビ朝日、TV東京などのキー局のドラマ、クイズ番組やCATV、コマーシャルフィルムで利用されています。

takesuke 2006/11/20

素材よりも自分で撮ったものをつかいたいなぁ

WEBデザイン

リンク

自由に改造できるPSDファイル同梱の「I Love」Faviconセット

非常に高品質で商用利用可能なアイコンやベクターアートを配布していることで有名な「N.Design Studio」が今月からおもしろいFaviconのセットを配布し始めました。元素材となったPSDファイルも入っているので、自分好みのFaviconを作ることも可能です。ダウンロードは以下から。 I Love Favorite Icon 中にはGIFファイルとICO形式のファイルが入っており、名前を変更するだけですぐに利用可能です。中に入っているPSDファイルは「I」とハートマークがそれぞれレイヤーになっており、背景画像の上に乗っている形式です。なので、配布されているミニアイコンをレイヤーに貼って追加することで、好きなデザインのFaviconが仕上がるというわけ。同じサイトから商用利用可能なアイコンセット「Mini Pixel Icons」がダウンロードできるので、これと組み合わせても面白い

takesuke 2006/11/16

Favarite Iconの訳がＦａｖｉｋｏｎかぁ

リンク

free stock photo gallery | stockvault.net

Need Stock Photos for your next Project? We are a free stock photo community where photographers & artists can share their own photos and artwork with people from all over the world. We offer thousands of pictures and illustrations of people, animals, buildings and street photography, beautiful landscapes, plant & flower photos, objects from computers & electronics to food images and jewelry photo

takesuke 2006/11/15

素材がフリーダウンロード！こｋは使えるよ

リンク

フリーのWeb2.0風の16x16アイコンを配布しているサイト集:phpspot開発日誌

DHTML Site - Free 16x16 Icons 22 Free Essential Icon Sets フリーのWeb2.0風の16x16アイコンを配布しているサイト集。サイトの彩りやユーザビリティに欠かせないアイコンがフリーということでアイコンが書けない開発者にはうれしい限り。 Silk Icons Mini Icons Sweetie Tango Icon Gallery Web Control Icons IceCons Mini Pixel Icons Gallery 2 Web Icon Set →他にも見るこれだけ沢山のフリーアイコンがあるとサイト作りがますます楽しくなりそうです。フリーですが、ライセンスについては各サイト上の明記を確認の上で使いましょう。

takesuke 2006/11/15

課題に活用できるぞ、アイコンアイコン

リンク

hereticanthem co.,ltd. » CSSやJavaScriptを使ったオシャレな技やサンプルが解説＆配布しているサイトのまとめ

takesuke 2006/11/13

早くやりたい帰りたい

リンク

無料で写真プリント Priea

当サイトは人気漫画の最新話のネタバレや、無料で漫画を読む方法、電子書籍の選び方など素敵な漫画タイムを過ごせる情報をご紹介しています！記事は随時拡充していきますので、ぜひブックマークをして簡単にご覧になれるようにしていただけると嬉しいです♪

takesuke 2006/11/13

写真が無料でプリントだって

リンク

Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE

Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d

takesuke 2006/11/13

どんどん活用しなきゃね

リンク

はてなブックマーク

タグ

関連タグで絞り込む (13)

WEBデザインに関するtakesukeのブックマーク (61)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス