スマホとPC両対応のホームページ作成、ご予約フォームの作成、
メルマガ配信、顧客管理機能までがまるっと一つになったリウムスマイル!

電話番号:06-6484-5445

営業時間:平日 9:00〜17:30

  1. スマホもパソコンもOK!レスポンシブwebデザインって何?
 

スマホもパソコンもOK!レスポンシブwebデザインって何?

2014/02/14 スマホもパソコンもOK!レスポンシブwebデザインって何?

最近はパソコンだけではなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレット端末、様々なデバイスで見られているwebサイト。

その様々なデバイスのそれぞれで、良い感じに表示させる新しい構築手法として、注目を集めはじめているのが「レスポンシブwebデザイン」です。

 

具体的にどのような手法かというと、ブラウザの横幅サイズをwebサイトの表示の判断基準とし、ページのレイアウトデザインを調整します。

 

もっと簡単に言うと・・・

パソコンの画面の幅と、スマホの画面の幅って全然違いますよね?

幅の全然違う画面で、同じように表示させてたら、見難くってしかたないです。

なので、

  • この幅の時はこんな2段組みのこんなレイアウトで
  • この小さい幅のときは縦に並べたレイアウトで

というふうに、幅によって見やすいようにレイアウトを変えてしまうんです。

 

「レスポンシブwebデザイン」という手法が広まる前は、このようにブラウザの幅によってレイアウトを変える、ということができなかったため、同じようなことをするには、デバイス毎にレイアウトの違う別々のHTMLファイルを用意しなければなりませんでした。

内容的には同じものを、複数用意しておくんです。

webサイトの修正があったりすると、複数分すべてに対して同じ修正をかけないといけないし、ページ数が多かったりすると本当に大変でした。

 

「レスポンシブwebデザイン」では、ひとつのHTMLファイルをスタイルシートで制御します。

同じHTMLファイルを使用しているので、修正があっても1回でいいし、すごーーーく助かってます。

 

「レスポンシブwebデザイン」の具体的な手法は、ここでご説明しても何のこっちゃ?という感じになっちゃいますので省略させていただきます。

でも、ご心配なく!

リウムスマイル!で作成したwebサイトは、「レスポンシブwebデザイン」を取り入れた仕組みとなっています。

 

パソコンで見た時、スマホで見た時、どんな見栄えになっているか、ご確認ください!

良い感じになるように、させていただいておりますー!

 

レスポンシブwebデザインって何?という記事のわりに、

「だからいったいどんなんやねん!」

となりそうなので、webサイトで事例をご紹介します!

 

事例

1.リウムスマイル!

パソコン表示 スマホ表示

 

2.有限会社リウム

パソコン表示 スマホ表示



お店のウリをつくるドリル無料ダウンロード&メール講座

ファンづくりドリル・下ごしらえ編

ブログ・Facebook・Twitter・ホームページ・メルマガ・・・

テクニックもエエけど、

活用のカギは「お店のウリ」の明確化!

 お店のウリを自分でまとめられるドリル作りました!

ファンづくりに取り組む前にやっておくべき下ごしらえが、やさしいドリル形式のシートに書き込むだけでできちゃう!書き方の説明はメール講座で解説します。お店のオーナーさんは一度やってみて!

 

無料ダウンロードする

Facebookで最新情報を


 

裏情報はメルマガで・・・


リウムスマイル!フェイスブックページ

いいね!をすると、最新情報をあなたのタイムラインにお送りします。

メルマガオミセラブ

メルマガオミセラブの登録をする

本ブログのまとめや、ブログでは書けない裏情報などをメールでお届け!