レスポンシブWEBデザインとパララックス

お久しぶりです。ヘッポコです。

2週間くらい間を空けてしまいました。。。その間、夏休みがあって実家に帰ったり、休み中にも少し仕事が入ったりと、何かとバタついてました。


さて、今回はつい最近レスポンシブWEBデザインに関わる事があったので、簡単にご紹介！
レスポンシブWEBデザインは、つまりはスマホやタブレットでWEBページを見た時にそのデバイスによって最適な表示をしてくれるデザインの事。

少し前はユーザーエージェントを判断して、携帯電話からのアクセスだったらページを分けて、CSSを分けて、なんてやってたような気がしますが、レスポンシブデザインは基本1ソースでマルチデバイスに対応するように作ります。

これによってどのデバイスからのアクセスでも同じページを見るので、URLが統一になりSEO対策にもなるという所。ではまずはソースを・・・。

まずはヘッドの部分から説明します。

metaタグにviewportというものがあります。これはiPhoneなどのスマホでWEBページを表示した時にものによっては表示が小さくなってしまったり、ページの右端、下に余白が大きく表示されてしまったりするのを防ぐものです。

そのviewportのcontentにプロパティを設定していきます。
"width=device-width"：横幅をデバイス毎に固定された値に設定する。
"initial-scale=1.0"：初期表示の拡大倍率を1.0倍にする。
"minimum-scale=1.0,maximum-scale=1.0"：拡大倍率の最大と最小を1.0倍にする。
"user-scalable=no"：ユーザー側の操作で、拡大／縮小を出来るように許可しない。

 こんな所ですね。metaタグのname="viewport"ではこのような設定が出来ます。

で、重要なのはここからで、4つのCSSをその後で読み込んでいます。
default、pc、tablet、smart。そのままですが、デフォルトで適用させたいもの、PCだったら適用させたいもの、タブレットだったら、スマホだったらという物です。

 default.cssはそのまま普通にCSSを記述してください。
ここに記述するのはPCでもタブレットでもスマホでも共通して適用させたい内容になります。


■pc.css

@charset "utf-8";

/*===============================================
●pc.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){
  /* ～PC適用CSS～ */
}

先頭に書かれているのは「@media screen and (min-width: 769px)」。
コメントに記述したように、この記述の中に書くのは横幅が769px以上の場合です。
 768px以下の場合は、この中の記述は無視されます。CSS3のメディアクエリという技術ですね。
これがレスポンシブWEBデザインのメイン処理ではないかと思います。

■tablet.css、smart.cssも基本的に同様です。

@charset "utf-8";

/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
  /* ～タブレット適用CSS～ */
}

@charset "utf-8";

/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px){
  /* ～スマホ適用CSS～ */
}

こんなところですね。
結局横幅が小さくなるほど、後に読みこんだCSSが適用され、それまでのCSSを上書きしていくという事ですね。

それと注意ですが、このCSS3のメディアクエリはIEでは動作しません。
IE10だと動くみたいですねが、それまでのバージョンのIEでは普通にCSSを順番に適用させてしまいますのでご注意ください。
どうしても対応したい人のために、それ用のプラグインもあるみたいなので、探してみてください。


さて、ついでにもう一つ。
スマホ・タブレット対応するとどうしてもサイト全体が縦長になる。
スクロールさせるのもストレスなので、画面上部にページ内リンク用のメニューを常に表示させておきたい。
というケースに対応する方法です。


■HTML

aへ
bへ
cへ

■CSS

#menu{
  height: 100px;
  position: fixed;
  width: 100%;
  top: 0;
}

menuのidをメニューとすると、HTMLとCSSは上記のような形です。
重要なのは「position: fixed;」コレないとスクロールしても固定されないで流れていってしまうので。
次はJavaScriptでスクロールした時にこのmenuが画面の上部に常に居るように記述。
■JavaScript(jQuery使います)

$(function(){
  $(window).scroll(function(){
    $('#menu').css('top',0);
  });
});

これで、menuが上部に固定されます。後は、リンク先へジャンプした時に、多分menuのdivの高さ分ずれると思うので
飛び先の要素に対して以下のCSSを適用。これでぴったりした位置にジャンプするはずです。
今回のmenuは「height: 100px;」なので100px分の調整

.link_group {
  padding-top:100px;
  margin-top:-100px; 
}

以上です。長くなりました。

それではまた！