レスポンシブウェブデザインの作り方 

こんにちは。nekonomoridesignのyoshyです。
最近、お仕事ではもっぱら、レスポンシブウェブデザインの為に、EC CUBEのデフォルトテンプレートをいじり、レスポンシブウェブデザインになるようにCSSと睨めっこして、慣れない作業に毎日うなっています。

そもそも、レスポンシブウェブデザインとは

簡単に言えば、見る端末によって最適な見た目でウェブページをデザインすることで、CSSをつかって、各端末に合わせたデザインで見せ方を変えるというものです。ちなみに、このブログも、レスポンシブウェブデザインになっています。レスポンシブウェブデザイン対応のテーマを使っています。Twenty fourteenというテーマを使っています。

レスポンシブウェブデザイン対応のwebサイトは検索結果の表示にも影響があるといううわさ

 

最近、Googleさんの検索ランキングの評価対象に、レスポンシブ対応のwebページかどうか、というのが要素として加わったそうです。おそらく、タブレット、スマートフォン等の端末も増えた影響でしょう。中途半端な大きさのタブレット端末だと、たしかにPC用サイトを表示すると、編に横スクロールしないといけないなどで見づらいところもありました。
ユーザビリティ性を重視した検索結果を求めるgoogleさんですので、納得ですが、こういった時代の流れに対応をしないといけないので、やはりweb業界はいかにスピードを早く対応していかないといけないのかがよくわかります。

レスポンシブウェブデザインの作り方

とりあえず、根本的にCSSを理解していないと無理です。(CSSでサイト作成の不慣れだったのですごーく苦労しています)
EC-CUBEとかの場合、SmartyというPHPテンプレート等の構成も調べながらじゃないと思い通りにならないです。

普通のwebサイトを作る際にレスポンシブデザインを気にしてつくる、というのであれば、レイアウト的に苦しくない範囲でデザインしていけば大丈夫かと思います。

で。

HTMLの作り方ですが、基本的に普通に作ります。
レスポンシブウェブデザインは、CSSで「見せ方」だけを変えているので、レイアウトや配置も、「見せ方」で変えています。

たとえば、PC用では見せておきたいDIV要素でも、スマホ用では不要な場合は、そのDIV要素のIDやCLASSを、 display:none にしておくだけなので、HTMLそのものは、1個です。

作るのは、CSSを、各端末用のものをデザインするのです。

一般的?というか、私の場合ですが、以下のようにしています。

スマホ用CSS、PC用CSS、タブレット用CSS

をそれぞれ用意。

それを、HTML上では3つ全部読み込ませる感じです。

CSSの設定の方法

CSSを作る時に少し細工をします。
********横幅640pxまで*************************
@media screen and (max-width: 640px) {

ここの間にCSSをかく

}
*********************************************

というような感じで、各サイズに合わせたものを作ります。

ちなみに、PC用の場合、

********横幅780px以上*************************
@media screen and (min-width: 780px) {

ここの間にCSSをかく

}
*********************************************

という感じにします。

そして、ココ大事。

width とかの設定は、必ず「%」で設定すること!!!

じゃないと、可変(端末の大きさによってサイズが変わること)にならないので。。

可変しなきゃ、レスポンシブの意味が無いです。

という事で・・・。

CSSを使いこなせないと、レスポンシブウェブデザインは出来ない・・・です。

これからも悪戦苦闘しながら頑張ります。

それにしても・・・レスポンシブウェブデザインの作り方がまさかCSSで見せ方を変えていただけとは驚きでした。
新たな発見!

目指せ、出来るwebデザイナー!