クラス関係のみで、スロットや装備に関してはあまり言及せず。また個人的主観たっぷりなので人によっては共感できない部分もあるかと。

サイトバージョンなんて付けていませんが……

とりあえず更新しました。

ところでちゃんとサイトバージョンとか付けてたほうがいいのかな。……管理的な意味で

更新箇所

• webフォント対応
• 上記に伴いページ遷移時の挙動を変更
• スマートフォンへのレスポンシブ化
• 一部jsを削除
• 複数のfreoの共通（基部）部分を少し修正

まだ手が回っていない更新予定箇所

• 404ページ
• RSSリーダーの新調
• CSSのバグフィックス
• 管理画面のスマートフォン対応
• 記事投稿時のspan抑制が機能していない
• 日本語webフォントのサブセット化

 本日はレスポンシブデザインのお話でもしようかなと思います。

べ、別に記事のネタがなかったわけじゃないんだからね！

※この記事には若干の間違いもあるかもしれませんがご了承ください。

レスポンシブwebデザインとは？

まずwebデザインをある程度やっている人なら聞いたことはあると思いますが、自分のHPを少しいじっているだけという方には聞き慣れない単語かもしれません。

このレスポンシブWebデザインとは単一の（X）HTMLソースからデバイスなどによって表現を変更するウェブデザインのことを指します。ちなみにレスポンシブルではありませんのでご注意を。

方法としては横幅を検知して適用するCSSを変更するという感じです。

具体的にどういうの？　という方は当サイトをPCやスマートフォンなどで見比べてみてください。PCしかないよ！　というかたはブラウザの横幅を下げていけばわかります。

※例でデバイス別に表示を変更と言いましたがPCの解像度によって表示を変更したい（低解像度のPCではより最適化したい）といった理由で使用するのでもいいと思います。

類似用途

デバイス毎に表示を切り替えたいのならデバイスごとにサブドメインや階層を変えてリクエストしたり、CMSなどでなどでデバイスごとにテンプレートを作ればいいというものもあります。

たしかにこちらのほうが単一ソースという制限がなくなるので表現の幅は広がりますが、その代わりに少しの更新でも複数のソースを修正しないといけなくなるというメンテナンス性が下がります。しかし、特に理由がない限りデバイス毎のデザインががらっと変わると同じサイトと認識するのが難しくなるので表現の幅が広がってもあまりメリットは無いと思います。

ならば単一ソースでCSSのみの切り替え・一部適用にしたほうがメンテナンス性はいいです。

幸い近年のブラウザはレスポンスwebデザインに必要なCSS3に対応していますし古いブラウザも対応させる……などということをしなければ問題ないと思います（スマートフォンであれば意図的にしない限り古いブラウザを使う人は少ないでしょうし）

具体的にどうするの？

CSS3側の設定方法

まず方法としてCSS3のMedia Queries（メディアクエリ）というものを使用します。

これはウィンドウ幅の数値によって適用させるCSSを変更するというものです。

例えばウィンドウの横幅が481px以上ならばPC用、480px以下ならばスマートフォン用としたいのであれば下記のようにするとそれぞれ適用されます。

/*PC用*/
@media screen and (min-width: 481px){
適用するCSSの中身
}

/*スマートフォン用*/
@media screen and (max-width: 480px){
適用するCSSの中身
}

このウィンドウ幅というのはPCではブラウザの幅、スマートフォンではデバイスの横幅となります。スマホの場合は縦向き（ポートレイト）と横向き（ランドスケープ）によってこの数値が変わります。またAndroidとiPhoneではもちろん変わりますが、Android機種同士でも機種が違えば当然横幅等も変わります。

さらに言えば機種のスペック表に書いてある解像度はあくまで標準解像度であり、ブラウザでの標準サイズは標準解像度÷1～3付近（機種によって異なる）となるため実際はポートレイト時で横幅が320pxなんてこともざらじゃありません。

なかにはブラウザが違うだけで横幅が違っていたり、表示倍率の設定によってもまた変わります。

とりあえず面倒なので各デバイスの標準ブラウザの標準倍率で調整するといいと思います。
ちなみに記述するCSSファイルは読み込まれているファイルであればどれでも平気です。一つのCSSにPC用とスマホ用を記述してもいいですし、PC用とスマホ用で別けても構いません。

追記（13/05/06）

ちなみにスマートフォンなどのみに適用させたくPCでブラウザの横幅をいじっても適用させたくない場合は、max-device-widthを使用すればPCではデスクトップの解像度がそれ以下の場合を除いてブラウザをいじっても変更されません。

ただ、このmax-device-widthにはAndroid4以上でバグが有るらしく、高解像度機種（XperiaZ）などでは上記の標準解像度で計算されるそうですので使う際にはご注意を。

HTML側の設定方法

基本は上記のCSS内で設定を調整・変更しますが、それとは別にHTMLのheader内にも必ず記述しないといけないものがあります。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

この記述がないとスマートフォンで正しく機能しません。

ちなみに各項目は以下のようになっています。

width=device-width	デバイスの幅
initial-scale	初期の拡大値
minimum-scale	最小の拡大値
maximum-scale	最大の拡大値
user-scalable	拡大の可否

切り替える横幅の境目は？

さて、ここまでやって一つ疑問に思ったことがあると思います。そう、一体何pxでCSSを切り替えればいいのかということです。

この切替ポイントのことをブレイクポイントと言いますが、これは正確な数値は存在しません。それもそうですよね。上述していますがスマートフォンの機種によってサイズも違いますし、最近ではiPadなどのタブレットも出て来ましたから。

ただ、大体の指針程度にはなるものはあります。

スマートフォンだと320pxもしくは480px。大型の機種も対応させると640pxあたりでもいいかもしれません。面倒でなければこれら全てで切り替えてもいいです。

iPadなどのタブレットでは768pxあたりでしょうか。

それ以上はPC用サイトと言った具合に。

画像がはみ出るんだけど……

単純に横幅が320pxのレイアウトでPC用の横幅800pxの画像を表示しようとしてももちろんはみだしますよね。

対処法は単純でCSSに以下を追記して大きさを自動調整してやればいいんです。

img {
	max-width: （適用横幅以下）px !important;
	height: auto !important;
}

ここで!important扱いにしている理由は横幅関係なく適用させているCSSでimgに同様の属性を設定していた場合強制的に上記の数値を上書きするためにこのようにしています。

これはレスポンシブwebデザインではなくCMSなどでテンプレートとしてデバイス変更している際にも有効な対処法ですね。

 

余談

ここまでざっと適当に書いてみましたがやはり説明下手で必要な情報が抜けている可能性が高いです。

なにかわからない点などありましたらコメントにでもいただけると応答すると思います。

にしてもやっぱりテンプレート型とくらべてメンテナンス性が高いのはいいですねぇ。

スマートフォンでもPCと同一のソースを使用しているから読み込む容量も同じというデメリットはありますが。

ちなみに当サイトでもfreoが1.18.0を機にテンプレート方式からレスポンスwebデザインに変更したようなので前々から実装しようと思っていたのでレスポンシブ化しました。