ホームページ作成Fの業務での気づきをスタッフが毎日更新しています

サイトマップ
ヘッダー画像

中小企業の売上の上がるホームページ作成をしています。

ホームページ作成会社F日記
リキッドデザインのスタート地点

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

リキットデザインとは、パソコンやスマホ、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"の考え方が分かれば
スマホサイトにも使えるのでとても便利です。

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


日時:2014/09/25    09:31