ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

実践!スマホサイトのviewport設定

全7回

スマートフォンは小さく狭い画面にページを表示します。この表示方法を決めるのが、meta要素のviewport。このシリーズでは基礎知識から、制作に使う定番パターンまでを解説します。

第1回を読む

番外 iPhoneの謎

iPhoneのviewport指定は、なかなかすんなりと予想通りにいかないことが多い鬼門です。iPhoneで、こう指定すれば、こう表示されるだろうという予想をするための考え方を紹介します。

最終回 スマホサイトを作る前に

スマートフォン対応サイトといっても、必ずしも「新規」に作るケースばかりではありません。スマートフォン対応サイト制作をいくつかのケースに分けた上で、どのようなviewport指定を採用すべきか考えます。

第5回 定番パターン:リキッド(ズーム固定)

よく使われるパターンの最後は、リキッド+ズーム率を等倍に固定してしまうものです。デバイスがどのような方向であっても意図通りの見栄えをキープできるメリットがあります。

第4回 定番パターン:リキッド

既存のPCサイトとは別に、スマートフォンに最適化されたサイトを作る際に検討したいパターンのひとつ「リキッド」パターンを紹介します。サイトをリキッドでデザインする際、おすすめのパターンです。

第3回 定番パターン:固定

viewport指定の定番パターンのひとつ「固定」パターンを紹介します。このパターンはPCサイトに少々のコードを追加するだけで、スマートフォン端末に対応させることができます。メリットやデメリットも合わせておさえておきましょう。

第2回 viewportの必須知識

viewportを使うための必要知識として、スマートフォン端末の特性や、viewport指定のプロパティを紹介します。

第1回 viewportとはなにか?

viewportとは普段聞き慣れない言葉です。スマートフォン端末独特のページの表示方法に深くかかわっていて、デスクトップ環境では、意識する必要のなかった概念なのです。まずは、viewportの概念を理解するところからはじめましょう。