レスポンシブウェブデザインにするためにSusy – Responsive Grids for Compass

レスポンシブウェブデザインについて

あらゆるデバイスにwebの表示を合わせます。webを見てくれる方へ見やすく表示することが出来ます。
よっぽど大事な情報では無い限り、表示が見にくく拡大などしないとみれないwebページの場合は、僕はそっと閉じています。
大事な情報ではないと思っても表示が見やすいと読んでしまう時がある。

スマホなどへの対応としていくつか方法があります。

更新記事などのURLは同一にしたい。
プラグインで対応したり、スマホ用に別サイトを作り表示デバイスにより振り分けたり、しかしgooglebotごとにクロールする必要があったりとシンプルじゃないなぁと思ったりもすることがあるので、レスポンシブデザインで制作しようと。
でも、いずれの手法でもスマホなどに対応してないより対応するほうが大事だと思います。

レスポンシブウェブデザインってむずかしいの?

難しいっす。うはw って考えてるほうが出来た時、楽だったと思えるからそのほうがいいのかも^^ css3の@media メディアクエリの記述で行います。

フレームワーク

SMASHING HUB フレームワークについて海外のサイトで紹介されています。cssのwidthを%で記述しますのでフレームワークと呼ばれるものを1つは覚えないと時間かかるんじゃないかなぁと思っていろいろ探していたら

Susy – Responsive Grids for Compass

僕は、Compassを使っているので使いやすいのかなぁと思ってインストールして使っています。Compass使っている人はいっぱいいると思うんですけど検索かけて見たら日本語の記事があんまりないです。

考え方

<meta name="viewport" content="width=device-width" />

<!--[if IE 8]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

WordPress デフォルトテーマTwenty Twelveでは1行目はheaderに書かれていますのでなにか記述しなければいけないことはないのですが、IE8以下ではcss3に対応していないので青マークは記述しています。
IE8以下のためだけに、こんなの読み込ませなきゃいけない。早く記述しなくてもいい日がくるといいですね。よくわからないのがどうもIE9の方が早くお亡くなりになりそうな予感がする。

media query

WordPress デフォルトテーマTwenty Twelveのcssの記述方法と順序

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* classなど記述 */
}
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
/* classなど記述 */
}

min-width: 600pxは最小が600pxということで表示デバイスが599px以下の表示の時は中に書いた記述の対象から外れると言う事で
min-width: 960pxは最小が960pxということで表示デバイスが959px以下の表示の時は記述の対象から外れる。
この時点で自分の中の頭の中が混乱し始める。PCの表示はどこに記述すれば?
慣れてないもので、、思うのは作り手の頭が混乱するのは多分まずい。
混乱したまま、やっぱりcssの記述位置を間違えてあれぇ?ってなるのです。
効率ワリィ!

WordPress twentythirteenのcssの記述方法と順序
ここでcss見れます。

@media (max-width: 1599px) {
/* .classなどを記述 */
}
@media (max-width: 1069px) {
/* .classなどを記述 */
}
@media (max-width: 999px) {
/* .classなどを記述 */
}
@media (max-width: 767px) {
/* .classなどを記述 */
}
@media (max-width: 643px) {
/* .classなどを記述 */
}
@media (max-width: 359px) {
/* .classなどを記述 */
}

max-width: 1599pxは最大が1599pxということで表示デバイスが1600px以上の表示の時は中に書いた記述の対象から外れると言う事で
max-width: 1069pxは最大が1069pxということで表示デバイスが1070px以上の表示の時は中に書いた記述の対象から外れると言う事です。
僕はこちらの方が何となくイメージがつかめる。通常PC表示のデザインから表示を小さくしていき対象のpxの範囲に入ったらmedia queryが適応される方が最後にmedia queryの部分を考えられるし、速いので僕にあっているのはこちらの方法かなぁと思います。今後media query部分をごっそり消しちゃえばレスポンシブが適応にならないのもいいですよね。

フレームワークからmedia queryの記述など実はそんなに難しくないと思いますが、画像の処理が難しいと思ってます。小さな見出しの画像など何個つくりますか?、、、本当に大事なのでしょうか?さぁ? ワカリマテン
そしてフラットデザインと呼ばれるデザインは写真がイキイキしますね^^

余談)通常rgbカラーを指定することが多いかと思われますがrgbaにIE8以下が対応してないのであまり使わないかなぁと、Compass pluginでこんなのありますね。compass-rgbapng 1px×1pxの画像を自動で作ってくれてrgba未対応のブラウザでは画像でそれ以外はrgbaでなんてことも出来るとか出来ないとか。いや出来ますよw