個別記事のページです

2014年9月25日(木)
このエントリーをはてなブックマークに追加

リキッドデザインのスタート地点

最近活用している企業も多い、スマホサイトでも使えるリキッドデザインの
初歩的な考え方についてご紹介します。

リキットデザインとは、パソコンやスマホ、iPadなど画面の幅が異なる
どの端末から見ても常に同じレイアウト・デザインで表示させる方法です。

まず、リキッドデザインを適用したいページを準備します。
使用するサイト例

当然、リキッドデザインを適用する前に画面の幅を小さくしたら
このように画像などが切れてしまいます。
リキッドデザイン適用前のサイト例

ここで、リキッドデザインの中枢となるCSSの登場です。

CSSファイルを用意し、"@media only screen and"を使って
画面幅が小さくなった時どうなるかということをどんどん指定していきます。

今回はこのようにCSSを作成してみました。
リキッドデザインのCSS例

上記の場合、画面の幅が760pxより小さくなると指定したid名やclass名が
有効になるようになります。

この中に、例えば img {width:100%;}、table {width:100%;} のように指定しますと、画面の幅が760px未満になった時は画像とテーブルが画面の横幅いっぱいに表示されるようになります。

更に画面の横幅を細かく指定した場合は

@media only screen and (max-width: ●●px) {}
(画面の幅が●●pxより小さい時にCSSが適用される)
@media (min-width: ☓☓px) and (max-width: ●●px) {}
(画面の幅が☓☓pxから●●pxの間の時にCSSが適用される)

のように"@media only screen and"の記述を追加していきます。

そしてリキッドデザインの指定が上手くいきますと、下のように
画面の幅を小さくした時も画面の幅が大きい時とほぼ同じレイアウトで
ページを見ることができます。
リキッドデザインが成功したサイト例

私も理解にだいぶ時間がかかってしまいましたが、
"@media only screen and"の考え方が分かれば
スマホサイトにも使えるのでとても便利です。

スマートフォン向けのホームページの制作をお考え中の方は、
この方法を駆使していくことになると思いますので是非ご活用ください。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ