CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
全てのIT・Web関係者に見つめなおして欲しい「Don’t Make Me Think」 - Feel Like A Fallinstar
”Don't Make Me Think” 訳すと、「いちいち私に考えさせるな！ボケ！」といったところでしょうか。 これは、2001年にSteve Krugが出した書籍の名前なのですが、この「ユーザにいちいち考えさせない」ことを忘れているか、いないかがソフトウェア・Webサイトの勝負を分ける最も大きな分岐点の1つです。 人間は日々の生活の中で、いちいち物を操作したり情報を見るたびにあれこれ考えたくなんてありません。 ユーザをつまらない操作やナビゲーションで考えされればさせるほどストレスは増大し、企業への信用は急激に失われます。 今日は、この”Don't Make Me Think”について、 如何にユーザが考えることを嫌うか 「考えさせない」とはどういうことか を、これまで見てきたユーザ検証の結果なども交えて、少しばかり書いてみようと思います。 あらゆる「無駄な」思考が、ユーザを苛立たせ、
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
CSS3を応用したテクニック集「18 Incredible CSS3 Effects You Have Never Seen Before」
TOP > WebDesign > CSS3を応用したテクニック集「18 Incredible CSS3 Effects You Have Never Seen Before」 WEB業界では最近度々話題になるCSS3。先日DesigndevelopでもCSS3を使ったボタンデザインのテクニックを紹介しましたが、今回はボタンデザインに限らず、CSS3で様々な実験的な試みを行なっているチュートリアル、Tipsを集めたエントリー「18 Incredible CSS3 Effects You Have Never Seen Before」を紹介したいと思います。 Awesome CSS3 Lightbox Gallery – Demo 今まで、HTML×CSSではできなかった事が、CSS3の新たな機能を使って実現しています。多々紹介されていますが、今日はその中からいくつか気になったものを
フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ
Webデザインパーツごとのデザイン例 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザインユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。 30 Creative Website Headers クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。 30 Creative Website Headers 27 Stunning
そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ
こんにちは、「プチペット」を担当している吉沢です。 最近はモバイルサイトを作成するためのブログやノウハウ本などがたくさん出てきて、とても便利になってきましたね。 個人的にはモバイルサイトのデザインやユーザインターフェース関連に関心が高いので、ブログでは「モバイルデザインアーカイブ」さん、「case:MobileDesign!」さん、本では日々、こちらで勉強させていただいております。 モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 著者：株式会社ゆめみ 販売元：インプレスジャパン 発売日：2008-12-25 おすすめ度： クチコミを見る モバイルデザインアーカイブの本。―携帯Webコレクション 著者：モバイルデザインアーカイブ 販売元：春日出版 発売日：2009-08 おすすめ度： クチコミを見る ケータイサイトのレイアウト 企業・キャンペーン・サービ
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
ロゴデザインをする時に参考になるサイト60+ – creamu
DESIGNM.AGで、ロゴデザインをする時に参考になるサイトが紹介されています。 4つのカテゴリーに分かれてたくさんありますね。いくつかご紹介します。 ロゴデザインのインスピレーションが得られるサイト » Logo Faves » LogoGala » Logo of the Day ロゴをテーマにしたブログ » Logo Design Love » David Airey » Logo Designer Blog ロゴデザインチュートリアル » Zeeのロゴをillustratorで作る方法 » オバマ大統領のOのロゴの作り方 » レインボーカラーのロゴを作るチュートリアル ロゴに関する記事やケーススタディー » Henri Ehrhartのブランドデザイン » Miskeetoのブランドデザイン » Butterfield Photographyのロゴデザインプロセス よくまとまって
国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ - かちびと.net
日本のWebデザインってあまりトレンド というのは無いような気がします。なんと言うか 見易さとか実用性メインでデザインは結構 シンプルだったりしますし、日本人に合ってる のかもしれないですね。そんな訳で日本人の 感性で作られた商用利用もOKの国内の Web素材配布サイトをまとめてメモしておきます。 僕自身がいいと思ったサイトを厳選してご紹介します。順不同。 サイトごとに利用規約が若干違うので重要な部分はメモしますが、ご利用の際は必ずご自身の目で利用規約ページをご確認下さい。問題が起きても当方は責任負いかねます。利用規約ページがある場合はそのページにもリンクを貼っておきます。 デザイン素材.com アイコンがメインでファイルはPNG。ネットショップ素材が中心で使いやすいデザインが沢山あります。 加工、商用OK、印刷物、ソフトウェアでも可能、Webデザイナーも利用可能。再配布、２次配布は不可。
WEBデザインツール：カラーパレットを自動作成するサイト数々：Goodpic
This shop will be powered by Are you the store owner? Log in here
『CSS でよく使う装飾定義をコンポーネントとしてまとめる』をもう一度
2007-01-27T20:51:03+09:00 CSS でよく使う装飾定義をコンポーネントとしてまとめるの続き 前回の記事で、コンポーネントする方法としてひとつの class に集約するという方法をとっていましたが、それではそもそも見た目重視のマークアップになってしまい HTML の構造化と、CSS で見た目制御するということについて本来の目的と離れた方向性であるというご指摘をいただき、考えを改めてみました。 単にclass名を変更するだけでは状況は大差ないような気がします。問題は、「よく使うスタイル定義の組み合わせ」をコンポーネントとしてまとめるのはいいとしても、それを或る一つのclass名に集約することなのではないかと思います。 HTMLのclass属性はスタイルシートのセレクタとしても利用されますが、より汎用的には、要素を分類するためにあるものだと考えます。なので、class名を
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
デザイナーならブックマークしておきたい記事10選『10 lists every designer should bookmark』 | CREAMU
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
Collection: Design Patterns
Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther
グラデーションをマスターするためのPhotoshopのチュートリアル集 | コリス
Vandelay Web Designのエントリー「ウェブデザインのための71のグラデーションのリソース」から、グラデーションをマスターするための基本的な使い方から、実践的なサンプル・実用的なダウンロードできるリソースを紹介します。 71 Gradient Resources for Web Design Vandelay Web Designのエントリーでは他にも、IllustratorやGIMP、ジェネレーターなどが紹介されています。
Webデザイン エンジニアリング---目次：ITpro
この数年間で，（インターネットの総称としての）Webは私たちの生活に深く関係する身近なツールになりました。様々な情報を，この環境の上で閲覧や操作できることは，特別なものから，徐々に当たり前で，なくてはならないモノに変わろうとしていると言えるでしょう。 特別なものから日常のものへとシフトしていく中で，Web自体も大きく変わるべきところが見えてきています。様々なことが挙げられますが，利用者という立場からすれば，やはり「ユーザー・インタフェース（UI）」が一番の関心事です。 特定のITリテラシの高い人たちだけが使うものではない世界に突入する以上，作り手の側の意識も変化しなければ，ニーズに対応できません。そして，こうしたWebアプリケーションの大量生産の時代にも入っています。今あるWebアプリケーションは，私たちの生活を便利にしてくれていますが，これで十分ではないのです。もっと多くの分野で，もっと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
