[B! レスポンシブ] kutekenのブックマーク

Demonstrating Responsive Design

kuteken 2014/01/17

リンク

レスポンシブ時代の10のキーワード | grip on minds

1. Responsive Web Design（レスポンシブウェブデザイン）スクリーンサイズに応じて、コンテンツの並び替えや表示／非表示、レイアウトの変更、画像やテキストをリサイズする手法の総称で、Ethan Marcotte 氏が 2010年に A List Apart に寄稿した「Responsive Web Design」で紹介されました。スクリーンサイズの判定は、おもに CSS3 の「Media Queries（メディアクエリ）」を用いるので、HTML がワンソースで済むのが最大の特長です。レスポンシブ Web デザインのメリット／デメリットを以下に記述します。メリットデバイスごとに HTML ファイルを用意しなくて済むので、開発コストが抑えられる将来のデバイス（家電など）にも対応できる URL がひとつなので、SEO の観点からも望ましいデメリットファイルサイズ

kuteken 2013/11/29

レスポンシブ

リンク

スマートフォン対応のためのレスポンシブWebデザイン実用TIPS – LIQUID BLOG

スマートフォン対応サイト制作の手法として注目されている、レスポンシブWebデザイン（Responsive Web Design）の実用TIPSを紹介します。 PC用表示・スマートフォン用表示の切り替え方法、お役立ちアプリなども紹介します。関連記事レスポンシブWebデザインで、PCとスマホ表示を切り替える方法レスポンシブWebデザインのメリット、デメリットとその解消方法レスポンシブWebデザインのメディアクエリサイズサンプルレスポンシブWebデザインとはレスポンシブWebデザインでは、CSSを利用し、ウインドウサイズに応じてデザインを変更します。そのため、PC用とスマートフォン用に複数のHTMLを作成する必要がないなど様々なメリットがあります。レスポンシブWebデザインについては下記サイトが非常に詳しく、参考にさせていただいています。 ASCII.jp：スマホ対応の新潮流「

kuteken 2013/11/29

レスポンシブ

リンク

最近また増えてきた可変グリッドレイアウトのjQueryプラグインまとめ 2012年9月 | webrecuration:IT/Webデザイン系ブログ

可変グリッドレイアウトとは、ボックスをタイル状に並べるプラグイン…っておなじみですね。Pinterestやfacebookのタイムラインにも採用されています。基本的にこのレイアウトの実装はmasonry.js一強な感じだったのですが最近またあたらしく登場してきたのでご紹介。 Masonry.js まずは一番流行しているMasonryから。日本語の解説もいっぱいあるのでだいぶ安心です。無限スクロールを実装するInfiniteScrollと組み合わせた例。ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル – かちびと.net WordPressのデフォルトテンプレートであるTwentyElevenに導入した例。WordPressではそのままだとうまくいかないようです。 WordP