ogrenaviのブックマーク - はてなブックマーク

無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選

photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。個人のブクマを整理してる段階でまとめたものですが、共有します。 photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。個人のブクマを整理してる段階でまとめたものですが、共有します。はじめに photoshopの素材を紹介しているサイトは多いので、主にphotoshopの素材の提供を主としてるサイト、またはそのようなカテゴリを持つサイトのみを集めました。紹介文の後のリストはそのサイトで扱ってる素材の種類となります。また、ライセンスについては分かる範囲で記載しましたが間違いがありましたら指摘頂けると助かります。サイト一覧 dev

ogrenavi 2013/09/02

リンク

レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム

レスポンシブWebデザイン使えるCSSフレームワークとグリッドシステムをまとめました。※随時更新中です Bootstrap 様々なコンポーネントも揃った高機能フレームワーク。Customizeから必要なファイルのみ選択してダウンロードもできますが、gitからはless形式で提供されてるのでこちらを使用したほうがよりカスタマイズがしやすいです。 Foundation 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gemでSass形式のものをダウンロードしたほうがカスタマイズしやすいです。 Gumby 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gitでcloneするとSass形式が入手できるので、そちらのほうがカスタマイズしやすいです。 GroundworkCSS 様々なコン

ogrenavi 2013/09/02

リンク

Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。レスポンシブwebデザインエラスティックレイアウトリキッドレイアウトフレキシブルレイアウト固定幅レイアウトグリッドレイアウト可変グリッドレイアウトレスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。メリット一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。また今後デバイスの種類が増えてもそれに対応できます。それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。デメリッ

ogrenavi 2013/09/02

リンク

Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice

アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。（※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？情報が見つからなかったので知ってる方は教えてください）また、viewportの数値はサイト側で指定できます。スマホ