Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Flash 8 入門講座：ITpro
Flash 8 入門講座 目次 お絵描きからActionScriptを使ったアニメーション制作まで いまやすっかり，Web上のインタラクティブ・コンテンツの代名詞となった感がある“Flash”。実は，アニメーションやゲームなど私たちが目にする，いわゆるFlashコンテンツは正確には「Flashムービー（ファイルの拡張子は.swf）」と呼びます。 Flashムービーを作成する方法はいくつかありますが，一般には，アドビシステムズの開発ツール「Macromedia Flash（以下，単にFlash）」を使います。本連載では，Flashの最新版である「Flash 8」を使って，Flashムービーの作成方法を中心に紹介していきます。Flash 8を持っていないという人も，1カ月間タダですべての機能を使用できる体験版がアドビシステムズのWebサイトに用意されているので，ダウンロードして一度試してみては
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
WEBデザインの際に参考になる50サイト:phpspot開発日誌
My 50 favorite design resources There are thousands of design resources on the web which can lead to an overwhelming experience when looking for inspiration or ideas, so I created a list of resources that I use on a regular basis. WEBデザインの際に参考になる５０サイトの特集。WEBデザイナーの方にはありがたいリソースですね。 クールCSSサイトのまとめサイト Unmatchedstyle cssBeauty cssvault Stylegala CSS Drive css thesis Styleboost CSSElite CSS Import Web Cr
ユーザーの動き。｜CSS HappyLife
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック＝トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン（ドロップダウン）型メニューは、近くのボタンを押
とってもお手軽なFavicon作成ツール『Favikon』 | 100SHIKI.COM
これが決定版じゃね？とってもお手軽なFavicon作成ツール『Favikon』 November 14th, 2007 Posted in 画像・映像管理 Write comment これは便利。 Faviconをブラウザ上で作れるツールがFavikonである。もちろん、こうしたツールは他にもある。 ただ、Favikonは「画像のこの部分をFaviconにしてね」をブラウザ上で手軽に指定できる点が特徴である。 他のツールは画像のFaviconにしたい部分を切り出してからアップロードすることが多いが、Favikonではこの手順は不要になるのだ。 範囲の指定は直感的で、移動やら拡大・縮小をしながら、自分のイメージどおりのFaviconを作っていくことができる。もちろん、ダウンロードする前にプレビューもできるので、自分の気に入った画像ができるまで何度でも試すこともできる。 サイトやブログを持って
トップページだけでもなんとかしたいのよ
ホームページデザインに悩んだら試してみましょ。スカスカで薄っぺらいトップページだけでも、かっこよくする情報が、ここにあります。
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
GIGAZINE - CSSで角をもっと丸くする方法いろいろ
「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使用しているコードと画像のダウンロードはこちらから http://www.schillmania.com/projects/dialog/dialog.zip また、こちらに透過PNGを利用したバージョンもあります。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.s
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
グラデーションをマスターするためのPhotoshopのチュートリアル集 | コリス
Vandelay Web Designのエントリー「ウェブデザインのための71のグラデーションのリソース」から、グラデーションをマスターするための基本的な使い方から、実践的なサンプル・実用的なダウンロードできるリソースを紹介します。 71 Gradient Resources for Web Design Vandelay Web Designのエントリーでは他にも、IllustratorやGIMP、ジェネレーターなどが紹介されています。
覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & Design ::
この記事へのトラックバック ウェブデザインにも、「黄金比」「白銀比」 Excerpt: 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & Design :: 黄金比や白銀比の縦横比や色々なバナーサイズの紹介。 美しいモノは��... Weblog: 日々、ウェブデザインとネットニュースとゲームとか。 Tracked: 2008-04-25 23:55 バランスのよい若草？ Excerpt: 縦横比……。 ずっと以前から、 タテとヨコの比率によって、美しく見える割合が研究されてきました。 覚えておくと便利なバランスのよい縦横比とバナーサイズ Love & Design 白銀比、.. Weblog: ウェブライター流転記（改訂版） Tracked: 2008-05-12 21:44 覚えておくと便利なバランスのよい縦横比とバナーサイズ :: Love & De
コーポレートロゴデザインに使える素晴らしいフォント60選『60 Brilliant Typefaces For Corporate Design』
Diary コーポレートロゴデザインに使える素晴らしいフォント60選『60 Brilliant Typefaces For Corporate Design』 ロゴデザインに使えるフォントを探している。 そんなあなたにおすすめなのが、『60 Brilliant Typefaces For Corporate Design』。コーポレートロゴデザインに使える素晴らしいフォント60選だ。 以下にいくつかご紹介。 ↑のキャプチャはMuseo。 セミスラブセリフ書体 Gloriola TDC2 2008で表彰されたフォント Marat 優しく親しみのあるフォント Candy Script 窓のペインティングデザインからきているフォント Sloop 手書きフォント、セクシーで優雅で女性らしく視線を引きつけるフォント その他のリストは以下から。 » 60 Brilliant Typefaces For
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
ホームページを作る人のネタ帳
GALLERY GALLERY ： Result -> 98 Gallery site
リストに使える小さいサイズのアイコン Part2 - DesignWalker
デザイナーが嫌がる痛い客のありがちな行動･クレームの対処法*ホームページを作る人のネタ帳