タグ

ブックマーク / coliss.com (9)

  • GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス

    GitHubCSSのパフォーマンス改善について、2012年ホノルルで行われた「CSS Dev Conference」のスライドが公開されていたので、紹介します。

  • デザインをウェブサイトに適用する際にありがちな7つの間違い

    7 mistakes developers make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 良いデザインがどのように見えるか 2. カラー選択の理由は好みだからはダメ 3. 真ん中配置の誘惑 4. フォント選びは慎重に 5. 情報の詰め込み過ぎ 6. 質問をもって 7. ディテールは時間の浪費? はじめに もしあなたがフリーランスのコーダーであるなら、あなたの資産の一つに、ウェブ開発の始めから終わりまで全てのプロセスを把握している、ということがあります。これはデザインも含みます。 プログラマーはコードと素晴らしく構築されたシステムをデザインし、自身がデザイナーであると言えるでしょう。また、個人のプロジェクトなどで、ウェブサイトを作成しなければならないかもしれません。 これはデザインでビジュアルの何かに違和感があっても、あなたがデザインのために良い目を持っ

  • 人間のために分かりやすい実用的なURLを設計する方法

    URL Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに URLを設計する理由 トップレベルのセクションは重要 URL構造を増強する方法 クエリの文字列 URLにはASCIIを URLは検索エンジンのためにではない URLは合意 全てがURLを持っているべき リンクはリンクらしく 再利用できないURL 素晴らしいURLの例 おわりに はじめに あなたは、URLの構造を設計するのに時間をかけるべきです。この記事を読んだ後で、あなたに一つだけ覚えておいてほしいことは、URLの構造を設計するのに時間をかける、ということです。 URLデザインは簡単ではなく、正しい解決方法があると言うことはできません。しかしそれは、他のデザインと同じです。良いURLデザインがあり、良くないURLデザインがあり、そしてその中間もあります。 しかし、それは素晴らしいURLデザインを作るこ

  • ウェブデザインのアイデアに悩んだ時に訪れたいサイトをまとめて一覧できる -Visual Heap

    ウェブデザインのインターフェイスからロゴデザインやビジュアルなど、インスピレーションやアイデアを探してる時に利用したい便利なサイトを紹介します。 Visual Heap [ad#ad-2] Visual HeapはDribbbleやCreatticaなどのサイトから最新のアイデアを集めたポータルサイトで、Visual Heapのサイト自体のインターフェイスも面白い作りになっています。 レイアウトは各サイトの作品が横にスライドするもので、各作品をクリックすると縦にスライドしその作品を表示します。

  • 汎用性の高い、jQueryの定番系プラグインのまとめ

    単体で使ってもいいし、それを使って更に面白いものを作りだすのにも役立つjQueryの定番系プラグインを紹介します。 いつもリリースされたばかりのプラグインを紹介しているので、たまには定番系で汎用的なものを。

  • Appleから学ぶウェブデザインに役立つ10のチップス

    10 Lessons on Design We Can Learn From Apple [ad#ad-2] 下記は各ポイントを意訳したものです。 #1: Simple Is Better #2: 商品写真の使い方 #3: コントラストを効果的に #4: 簡単に妥協しない #5: Flashから離れる #6: フレンドリーに #7: グリッドの活用 #8: Learn moreコンテンツ #9: 一貫性 #10: ただのコマースサイトにしない #1: Simple Is Better 派手なデザインの「購入する」ボタンやグラフィックが満載のウェブページほど嫌なものはありません。それは取り散らかされただけの下品なページです。 Apple Store Appleのページは「less is more」の好例で、派手な広告やプロダクトであなたを攻めたてることはなく、むしろあなたが見るべき一つのもの

  • パターンの背景をウェブデザインで効果的に使うための13のテクニック

    Tips in Using Background Pattern for Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ビジターを知る コンテンツは明確に コンテンツの強調に暗い背景を 限られたエリアのみにパターン パターンを全体に サイトのテーマに則したパターン シンプルなデザインには軽いパターンで パターンの多用に注意 パターンで視線を誘導する パターンをテクスチャと組み合わせる 異なるパターンを組み合わせる デザインにはフレッシュさを 洗練されたデザインに はじめに パターンは今日、ウェブデザインだけでなく、ビジネスカード、壁紙、包み紙など数多くその使用を見ることができます。 パターンとは一定の形状をもったセルが繰り返しと定期性によって配置されたもので、その種類はタイル、ライン、スワールなど何千何百とあります。 そのパターンをウェブデザイン

  • HTML5で誤用されがちな各要素の正しい使い方 | コリス

    HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ

  • CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト

    CSS3、HTML5、jQuery、ウェブデザインなど、ウェブ制作のテクニックが動画で学べるサイトを紹介します。 Learn Web Design! HTML 5 & CSS3 Video Tutorials & Training Resource [ad#ad-2] 動画は有料会員向けのコンテンツですが、無料でも数多くの動画を見ることができます。無料で見るときに、登録などは必要ありません。 動画はすべて英語で、英語が苦手な人でもコードや成果物を見るだけでも勉強になると思います。下記にいくつか紹介します。

  • 1