[web関連] レスポンシブwebサイトの簡単な説明。

グダグダ説明する前に、ひとまず
サンプルページ
※PCで閲覧されている方へ。画面(=ウインドウ)の幅を
　狭めたり広げたりしてみてください。
※モバイルでは確認できません。


初心者だからこそ見えることがある。

と思うのですが、



色々習得しはじめると、
初心を忘れて感覚で動き始めるので

自分のためにも備忘録を時折ブログに書くという
ことをしています。
(内容が薄い備忘録なのでウザいことこの上ないですけれども)

というわけで今回は、

レスポンシブwebサイトについて

をご紹介したいと思います。


そもそもレスポンシブwebサイトって何のことって
感じだと思うのですが、



- 以下、e-wordsより引用 -

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

つまり・・・・

• PCから見る場合の見た目
• モバイルから見る場合の見た目
• 時にはタブレット用
• 時折、PCでもウィンドウサイズが小さい場合
• 逆に、PCでもウィンドウサイズが大きい場合など

各デバイス(PC or モバイル or タブレット)によって、
それぞれにとって見やすいように、
配置やデザインが変更されるよう設計されている
webサイトのことです。
 

大抵は、『PC用』『スマートフォン用』『タブレット』用の
3種類に分けられていると思います。


ちなみに私のサイトでは、 『PC用』と『スマートフォン用』の
2種類のデザイン/配置を設定しています。

以前軽くご紹介しましたが、

PCだと以下のような画面。

スマートフォンだと以下のような画面(になってるはず)。

見るデバイスによってデザインや配置が変わっているのが
分かると思います。

上記の例で言うと、変更された部分は

• 上部のメニュー部分
  ([MENU]だとか[ABOUT]だとかの部分)
• スマホでは生き物
  (よくわからないカンガルー的な有袋類の方)
  がいなくなってる。(写真では分からない事実)
• メニュー部分と、
  紹介の写真部分(花の背景のとこ)が入れ替わっている。

などなど、他にも数カ所入れ替わっています。


どういった定義で上の２種類にデザインを分岐させているかというと

単純に、見る画面の幅で分岐させている

だけです。


つまり、今これをPCで見て頂いてる方だったら、

 http://ravenzdesign.webcrow.jp/main.html

にアクセスした後、

これを見ているブラウザ(インターネットエクスプローラーとかSafariとかChromeとかのこと)の、
ウインドウの幅を狭めて下さい。

一定ラインまで狭めると、突然配置が変わる瞬間があるかと思います。


その一定ラインというのは幅が651pxという分岐点を指示しているのですが、
(その分岐点のことを『ブレイクポイント』と言ったりします。)

私の場合は、651pxを境に
PC用のデザインと、スマートフォン用のデザインが 切り替わる様に設定しています。
(なぜ651pxなのか・・それはネットで適当に調べたからだ)


まあ、正直レスポンシブではないwebを見ることも
個人的には苦痛でもなんでもないのですが、

単純に、スマートフォンで普通のwebサイト(スマホ向けじゃない)を
タッチするとき

ちっちゃ！！！！リンク押せね〜〜〜〜

ってなるのを回避できたりとか、ね。ボタン大きくしといたり。
(いや、他にも意味はあるはずなんだが)


そもそも、スマートフォンの普及があまりにも凄くて
大手の企業などはレスポンシブ以前に、

画面の幅の関係ではなく
『これはPCから接続されている』
『これはスマートフォンから接続されている』
『これは、ガラケーから接続されている』
で、違うサイトに誘導したりしているんですね。

さすがに、"レスポンシブwebデザイン"の手法では
スマホかガラケーかはちょっと・・・

なのですが、
見る環境によって少しでも見やすく設定を変えれたらいいよね。
といった感じなのでしょうか。
(お前が説明しろよ)


私はその分岐させるのが自己満足で楽しいだけなので
設定しております。

 次回は、更に無駄なことに

レスポンシブwebデザインの簡単なtips

をご紹介したいと思います。
(カルト小説の続きはどうなったかは分からない)