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

レスポンシブWebデザインでハマりがちな%指定 │ Design Spice

レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。要素の幅と高さの%指定レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。同様に高さを%で指定する場合は、求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定左右のmargin、paddingを%で指

Caihua 2014/03/25

レスポンシブウェブデ

リンク

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

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

Caihua 2012/09/05

リンク

https://design-spice.com/2012/06/13/responsive-web-design-image/

Caihua 2012/06/13

レスポンシブウェブデ

リンク

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

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

Caihua 2012/05/24

リンク

知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト

このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。敢えて紹介するまでもないのですが一応。現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンスバージョン1までの内容ですがjQuery

Caihua 2011/11/08

リンク

レスポンシブwebデザインで制作する時のポイント

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。（一部の図はセミナーの資料を元に作成してます。）始めに：スマートフォンサイト制作の選択肢スマートフォンサイトを制作するには幾つかの方法があります。アプリ独自系スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用流用系現在のデザインをほぼ流用、調整のみレスポンシブ・デザインどの方法にもメリットデメリットはあり、どれが最適かはサイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。今回のエントリーではレスポンシブ・デザインのみにふれます。レスポンシブwebデザ