レスポンシブWebデザインって何？？ 阿波銘木 公式ブログ

今週末に東京から北海道に帰省しますwebシステム担当です。

今回はレスポンシブWebデザインについて。

今年の7月〜8月に当サイトはスマートフォンに完全対応する予定でいます。

このサイトはスマートフォンには優しくないよと天下のGoogle様に怒られたので実際にWi-Fiを使わずに見てみたら、マジでクソ重い(っていうか知ってたけど)www

とは言え、限られた時間の中での改修になるのでなかなかスムーズには進みません。

阿波銘木のサイトのPC版がリニューアルされた当時、cssのサイズはpxで指定をしていました(古い^^;)。

今はrem(root em)という考え方があります。

これはrootという文字通り、一番上の親タグのサイズを元に足し引きするというものです。

例えば、

html{ font-size: 15px; }

p{ font-size: 1.2rem; }

だとしたら、pタグは15px x 1.2rem = 18pxになります。
この例では親クラスの文字サイズ(font-size)を変更するだけで全ての文字サイズが変更します。

これは文字サイズ以外にも親タグで指定した要素に対して適応することが可能です。
メジャーなところでいうとwidth・height・margin・paddingとかでしょうか。

これをうまく使ってブラウザの横サイズが480pxを切ったとき上の要素をコントロールして
スマートフォン専用のページの全体バランスを整えようと思っています。

レスポンシブWebデザインとは上記のようなことを指します。

PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを動的に調整することを

レスポンシブWebデザインと言います。

今、流行りの作り方ですね。Googleも推奨してますし^^

もうPC用、スマートフォン用でuaを見てレイアウトを切り替える時代は終わったと言えますね(物にもよりますが)。

ただ、それ以外のレイアウトはしっかりと考えないといけません。
スマートフォンには横の概念がないので画像とかは新しく作ってもらわないといけません。

この辺はデザイナーに他のスマートフォンのサイトを見ながら勉強してもらいます。

僕自身、スマートフォンのサイトを作ること自体は簡単にできますが、内容が伴わないと意味がありませんからね。
それに暫定的に作ったとしても結局は改修に追われるワケです。


阿波銘木の話は終わり！
昨日は前々から注文していたKensington社のSlimBladeというマウスが届きました！！


マウスに10,000円は高いと思いますが、商売道具ならいくら使ってもいいと思っています。

今日、帰省するためのスーツケースを出しました。
今週の金曜日に登別に帰省します^^