ちょっと書きなぐりすぎたので修正。。

レシポンシブデザインとは

レシポンシブデザインはCSS3のMedia Queriesを使う技術で、急増したスマホやタブレットのユーザーでもWebサイトを端末に合わせた形で表示するもの。
具体的には、以前からCSS設定時に設定していたmedia属性の延長上の技術。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

たとえば、印刷用のレイアウトを表示させたい場合、上記のようにmedia属性でprintを記述し、印刷用のCSSファイルを呼び出す。
CSS内の記述内容は印刷レイアウトを意識したものとなる。

この延長線上にスマホ用、タブレット用を設定できるものがCSS3のMedia Queriesであり、このMedia Queriesを使ってレイアウトを考えたWebサイトのデザインをレシポンシブデザインと呼ぶ。

レシポンシブルデザインの必要性

元来、Webサイトの世界では、PCのほかに携帯電話でのアクセスも意識して設計されていた。
ただ、携帯電話でのWebはドコモであればiモード、AUならEZWEBなどキャリアにより技術的な違いがあることと、携帯電話を使って閲覧するWeb情報にもある程度の制限があった。

分かりやすく言うと、iモードを利用して地図情報を取得したり、様々なブログサイトを閲覧したりという行動は非常に限られた状況だった。
つまり、Webサイトを設計する側も自分（自社）サイトで携帯端末での閲覧を必要としているかを考え、場合によっては携帯端末のアクセスを考慮する必要のないサイトも多数あった。

しかし、スマホ（とくにiPhone）の出現により、PCと同等の情報取得が可能になった。
しかし、PCとの決定的な差はディスプレイサイズの違いだった。
そこで、画面がPCより小さいスマホやタブレットでも情報取得がしやすいWebサイトの表示が半ば必須となりつつある。

端末の違いはユーザーエージェントという技術で振り分け、表示させていたが、エージェント技術で振り分けるのはHTMLであったため、この技術を使いスマホサイトを作るということは、もう1つ新しいサイトを作るのと同等の工数が必要になる。そこでCSSの追加だけで表示を変更できるレシポンシブデザインという手法が着目されるようになった。

ブレイクポイントの設定

レシポンシブデザインで必須の作業としてはブレイクポイントの設定がある。
ブレイクポイントとは、元来プログラム開発でデバックをするときにどこに不具合があるかを特定するために無理矢理にプログラムを停止させるポイントのことを言うが、レシポンシブデザインにおいてはわかりやすい表現を使うと「表示の分岐点」になる。

レシンポンシブデザインの考え方はユーザーエージェントとはまったく違い、端末情報を取得するのではなく画面のサイズを取得し表示を変える技術になる。
つまりブレイクポイントは画面サイズに起因する。

しかし、スマホもタブレットも、もちろんPCもそれぞれ画面のサイズは端末やディスプレイによりバラバラなのが現状だ。
ブレイクポイントはある程度のサイズを設定して、そのサイズを分岐点としてレイアウトを変更することになる。

スマートフォンのブレイクポイント

もっとも難しいのがスマホのブレイクポイントの設定になる。
iPhone、Android端末、（非常に稀有だけど）Windows端末とOS種は少ないが、画面のサイズはiPhoneだけでも年々変更されており、Androidにいたっては多数のメーカーが端末を開発しているため画面サイズはバラバラなのが現状。
今、スマホのブレイクポイントを設定する手段としては、より利用頻度の多い画面サイズに考慮することだろうとしか言い様がない。
もちろん、全端末に対応する！というのであれば、すべての端末の画面サイズを調べ、すべてにブレイクポイントを設定しレイアウトを作ることもできるが非常に非効率的といえる。

2015年の各機種別画面サイズ、解像度は以下にまとめられているので引用させていただく。

sounansa.net
2015年最新版　iPhone・Androidスマホ　機種別画面サイズ、解像度、縦横比のまとめ

これを見ると、パソコンと同等の大きさというイメージがあるが、実際にスマホはパソコンの画面より小さいことは確かだ。
画面解像度＝画面サイズはまったく違うもので、分かりやすく言えば「高精彩」になっただけで、画面解像度を元にブレイクポイントを設定するとレシポンシブなサイトはできない。

実際のサイズ（単位：ピクセル）は代表的な端末で以下のようになる

• iPhone4: 320 × 480
• iPhone5: 320 × 568
• iPhone6: 375 × 627
• iPhone6s: 414 × 736
• Nexus6: 414 × 659

cosian.comでのレシポンシブデザイン

レシポンシブデザインの説明の続きはまた次回として、実際にこのサイトではどういうデザインにするか。
現状でPC用とタブレット用のデザインができた段階。
しかも、トップページのみで下層ページはこれから。
まだまだ先は長い・・・。

■タブレット用デザイン

■ＰＣ用デザイン