タグ

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

  • [CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法

    IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラービリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用

    hashimoya
    hashimoya 2011/11/13
    IE系はfilter使用。なのでそこにそのままスクリプトで角丸を強制適用させようとすると、不具合が起きやすい。
  • 背景画像をブラウザの枠いっぱいに表示するテクニックの考察

    最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック:その1 CSSだけで実装するテクニック:その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま

    hashimoya
    hashimoya 2010/12/21
    これけっこう増えてきた/background-size:cover;が早く使える平和な世の中になってほしい
  • これは便利!外部ファイルをリンクさせるPhotoshopのエクステンション -Links

    これはPhotoshopの標準機能として、ぜひ実装してほしいですね。 外部ファイルをリンクさせ、スマートオブジェクトとして配置できるPhotoshopのエクステンションを紹介します。 Linked Smart Objects in Photoshop [ad#ad-2] Linked Smart Objectsのインストール 下記ページの「LinksCS4.zip」をダウンロードします。 対応しているPhotoshopのバージョンはCS4, CS5です。 Smart Object links panel 解凍した「LinksCS4.mxp」をダブルクリックすると、Photoshopへのインストールがはじまります。 インストールが完了すると、メニューの[ウインドウ]-[エクステンション]に「Links」が表示されます。 Linked Smart Objectsの使い方 [ウインドウ]-[エク

    hashimoya
    hashimoya 2010/12/14
    外部ファイルのリンクがPhotoshopでも!しかしCS4からか…
  • PDFデータを軽量化する方法 | コリス

    Adobe製品を使用して、PDFデータを軽量化する方法です。 画像を多く使用しているPDFデータも、テキストのみのPDFデータでもかなりの軽量化が見込めます。 さらに、ウェブ上のみの利用であれば(高解像度の印刷用でなければ)、さらに最適化を行い、劇的に軽量化が見込めます。 ※PDF制作時に軽量化をしている場合は、それが一番です。 また、一部のフリーのPDFソフトで閲覧できない不具合を解消することもあります。 不具合の原因は分からないですが、なぜか閲覧できるようになります。 PDFデータの軽量化に使用するソフト PDFデータの軽量化の準備 PDFデータの軽量化の作業 PDFデータの軽量化の確認作業 PDFデータの軽量化の設定 PDFデータの軽量化に使用するソフト Adobe Acrobat Adobe Distiller Acrobatに付属しているソフト ここでは、Adobe Acroba

    hashimoya
    hashimoya 2010/07/12
    軽くなりすぎて吹いた。画質はそう劣化していない気がするが、印刷すると違いが出るか?WEB閲覧限定なら使えそう
  • 黄金比をサイトのデザインに取り入れる簡単な3つの方法 | コリス

    その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値

    hashimoya
    hashimoya 2009/11/15
    黄金比の実用化。
  • [CSS]コンテンツとサイドバーの高さを同じにするスタイルシート

    サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素(wrapper)を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>

    hashimoya
    hashimoya 2009/10/13
    border使い。確かに使える機会が限定されそう。
  • 顧客を逃してしまう、Eコマースサイトの15のポイント

    Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい(提供されていない)。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる(分かりにくい)。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立

    hashimoya
    hashimoya 2009/10/09
    あるある。しかしこれらを解決していくのは、けっこう困難なことも多い…orz
  • 単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル

    ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。

  • 実用的なユーザビリティの10のポイント:ガイドライン編 | コリス

    ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

    hashimoya
    hashimoya 2009/09/30
    日本語版。
  • ArialとHelveticaの違いがはっきりと分かるこの一枚

    ArialとHelveticaのタイプフェイスの違いをグラフィックにしたものをthe ragbagから紹介します。

    hashimoya
    hashimoya 2009/09/24
    僕は、Arialちゃん!◯( ´∀` )◯
  • 光源や1ピクのラインや透過を使ったウェブレイアウトのPhotoshopのチュートリアル集

    光源やライトやシャドウ、グラデーション、1pxのライン、透過などを巧みに使用したウェブレイアウトのPhotoshopのチュートリアルを紹介します。

    hashimoya
    hashimoya 2009/09/16
    さりげない効果がぐいぐい効いているサイトデザイン集。
  • Photoshopの動作を軽快にするための10のポイント

    Photoshopの設定を変更して、動作を軽快にするための10のステップをSmashing Magazineから紹介します。 10 Simple Steps to Better Photoshop Performance はじめに もし、あなたがPhotoshopの設定をデフォルトのまま使用していたり、パフォーマンスを改善するために再点検することを望むなら、ここで紹介する10のポイントをチェックしてみてください。 1. ヒストリーの数を調整 作業履歴を記録するヒストリーはRAMを肥大化させるため、できるだけ数を少なく設定します。 一つの目安として、RAMが2GB以下の場合はヒストリーを使用しない方が軽快に動作します。 [編集] - [環境設定] - [パフォーマンス]の「ヒストリー&キャッシュ」で設定を変更できます。 2. キャッシュレベルの数を調整 レイヤーの数が少なく高精細の画像の場合

    hashimoya
    hashimoya 2009/08/24
    あとでためす
  • ウェブデザインのクオリティをアップする7つのポイント | コリス

    ウェブデザインのクオリティをアップする7つのポイントをFunction Web Design & Developmentから紹介します。 How to Spot Quality within Web Design: Examples & Tips 以下、その意訳です。 1. Spacing スペースは、デザインされたエレメントの間に使用される巧妙なテクニックです。素晴らしいイメージを配置することも大切ですが、そのエレメントにどのようにスペースを与えるか充分に考慮する必要があります。 充分なスペース

    hashimoya
    hashimoya 2009/04/16
    これもデジャヴが…
  • ウェブデザインにおける効果的な背景の使い方

    Backgrounds In Web Design: Examples And Best Practices 以下、その意訳です。 ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。 背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。 背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。 ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。 1. The Basic Background Structures 良い背景を設計する際に、背景の基構造を知る必要があります。 Body Background bodyの背景は、昔から使用されている背景です。 主にイメージ、イラスト、テクスチャ、パターンなどを使用します。 Content Background コンテ

    hashimoya
    hashimoya 2009/04/14
    背景と来たかー
  • デザインを魅力的なものにする、シンプルな10個のテクニック

    デザインを魅力的なものにする、シンプルな10個のテクニックをSmashing Magazineから紹介します。 10 Simple and Impressive Design Techniques 以下、その意訳です。 手間のかかるデザインテクニックは高度な効果を与えることができますが、間違ったところに使用してしまうと、意図したフォーカスとは異なり、ユーザーの気をそらすだけになってしまうことがあります。 これらのテクニックは、効果的に見せるために必要なデザインかもしれません。しかし、よりシンプルなテクニックでも充分な効果を与えることができます。 シンプルなテクニックやエフェクトというのは、デザインの基です。 「less is more」の考えを元に、デザインの概観とパフォーマンスを劇的に改善できる非常にシンプルで印象的な10のデザインテクニックを紹介します。 1. Add Contras

    hashimoya
    hashimoya 2009/04/06
    これらのことがきちんとできれば、確かにそれなりのものになるんだけどねぇー。。難しいわ。
  • パンくず詳解 | コリス

    パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ(見つけやすさ)を改善するものとなります。 また、ランディングページ(検索などから訪れた最初のページ)にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre

    hashimoya
    hashimoya 2009/03/30
    詳解されたらブクマるしかない。パンくずの例を探したい時にも。
  • アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス

    アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...]

  • ウェブサイトの制作・検証に役立つブックマークレット集

    レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI

    hashimoya
    hashimoya 2009/02/26
    結構知ってるのもあるけど便利。ちょっとしたレイアウトの情報とか知りたい時にべんりー
  • IE6/7/8, Fx, Op, Safari, Chromeを同時に起動できる -Xenocode Browser

    Internet Explorer 6/7/8rc1, Firefox, Opera, Safari, Chromeなど主要なブラウザをWindows上で同時に起動できるXenocode Browserを紹介します。 Run IE876, Firefox, Safari, Chrome, and Opera from the web Fx, Op, Safari, Chromeはそのままで同時に起動できますが、IE 6/7/8rc1の異なるバージョンをOSに依存せずにインストール・起動できるのはブラウザ検証の大きな武器になります。 IE 6/7/8rc1でAcid 2のテストを表示してみたところ、レンダリングはそれぞれのバージョンのものになっていました。

    hashimoya
    hashimoya 2009/02/24
    いろんなブラウザをスタンドアロンで。→MacOSXのVirtualPCで試したけどダメだったー
  • ウェブサイトでやってしまいがちなユーザビリティのミス

    ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー

    hashimoya
    hashimoya 2009/02/20
    「Less Thinking」かあ…