Asial Blog

Recruit! Asialで一緒に働きませんか?

タグ「レスポンシブデザイン」の一覧

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました

カテゴリ :
デザイン・UI
タグ :
レスポンシブデザイン
スマートフォン
タブレット
デバイスの横幅リスト
こんにちは。和田です。

今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特にウインドウサイズの切替えについて書こうと思います。

CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
CSS3
HTML5
レスポンシブデザイン
icon
こんにちは、鴨田です。

最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。

なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。

作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。