最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス

2016/10/20 547 users ハンバーガーメニュー レスポンシブ対応 階層構造 去年 コリス

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む

レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス

2016/03/04 662 users DESIGN スクロール フォント トリミング スワイプ

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet... 続きを読む

Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ | コリス

2014/09/12 511 users Bootstrap コリス Foundation ライセンス

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I ... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス ｜ Developers.IO

2013/03/17 518 users ベストプラクティス MdN Developers.IO 勉強

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - ... 続きを読む

ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？

2011/06/17 739 users レスポンシブWebデザイン 新潮流 ASCII.jp 実例

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 スマートフォンやタブレットの登場で多様化するスクリーンサイズ。中央の濃い青はモバイル、外側の薄い水色はテレビのサイズで、これだけのスクリーンサイズに対応するには従来の方法では難... 続きを読む