ようこそいらっしゃいました！新人森田です。
なんで書き出しからテンション高めなのかというと、見ての通りです。
とうとうついに！ハレノヒブログリニューアルが実現しましたー！！
私もコーディングはしたものの、実装作業は師匠がマッハで仕上げてくださいました。
ありがとうございますおつかれさまです！

脳内迷宮をぐるぐるしながらようやく出来たデザインが実際に稼働していると、必要以上にスクロール上下したり１分おきくらいにスマホで見たりとか。リュックに眠ってたタブレットも久しぶりに起動させてみたり。

ニヤニヤしちゃいます。

ん？手持ちのデバイスフル稼働させて動作確認ということは？
イエス、レスポンシブデザインです。
ワイヤーフレームで書いた通り、どのデバイスで見ても崩れないように作ってあります。

と、いい感じの流れになってきたので今回はレスポンシブデザインについてまとめてみます。

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

レスポンシブデザイン。最近本屋さんのITコーナーなどでよく見かけるワードです。
「responsive：反応の良い、敏感な」の通り、様々なデバイスに対応したデザインという意味です。
みんなスマホを持ってて、iPadとか持ってるとちょっとイケてたりして（？）、最近MicrosoftがSurfaceごり推しだったりして、インターネットはもうPCのものじゃないってことですね。

で、何がレスポンシブなのかというと、一番は画面の横幅です。
今このページをPCから見てくださっている方、よろしければウインドウの横幅を変えてみてください。ウインドウが最大だったら、縮めていくとあるサイズから一度タブレットサイズにガクッと変わって、更に縮めるとまたガクッとスマホサイズになると思います。
ざっくり言うとこれがレスポンシブな感じです。

パソコン、タブレット、スマホそれぞれの横幅を設定して、各サイズになるとデザインがどう変更されるかをcssに書き込むことでこういった動きが可能になります。

たとえばこのブログだとこういう記述です。

レスポンシブにするところ

大体の感じはつかめたと思うので、じゃあ具体的にどの辺をレスポンシブにするか？という話に。

ハレノヒブログの場合、PC、タブレットでは右にあったサイドカラムがスマホでは記事の下に回り込んでいます（広告は仮でお借りしてまいりました）。その代わりに横幅いっぱいに記事を表示して見やすくしてあります。ブログなので形式的といえばそうなんですが、分かりやすい例ということで。
他によく見かけるのは、アイコンにメニューが収納されてタップするとメニューリストが出てくる、とかですね。

一般的なサイトの場合だと、例外的かもですが横幅に応じて画面が変化する面白いデザインもあったりします。レスポンシブで遊んでるっていうか。ただコンテンツを整然と表示するだけじゃなくて、そういう遊びがあるとちょっとそのサイト気になっちゃいますよね。

と、ここまでは横幅の変化にどう対応するかを書いてきましたが、もっと突っ込んでいくとレスポンシブデザインってデバイスの操作性と結びついていくと思います。

PCはマウスで画面のポインタを操作するから細かいクリックポイントにも対応しやすいし、キーボードがあるから文字入力も楽々です。
それに対して特にスマホはタップがメイン。お手軽ではありますが、細かいボタンのクリックミスでいらっとした人ってかなりいるんじゃないでしょうか。文字入力も、予測変換機能が充実してきたとはいえ結構めんどくさいですよね。スクロールが多いのも大変。

そういう各デバイスの特徴を考慮した上で、かっこよくて且つ操作もしやすい（さらに楽しいとなおよし！）っていうのが理想的です。あ、あとコーディングの時もあまり手を加えずにレスポンシブに出来るようになってると超ステキですね。いつかそんなサイトを作りたいです、いや、作ります！

なんかアツくなってまいりました。このパッションを忘れずに次のミッションにも取り組もうと思います。
というわけで今回はこの辺にしてハレノヒブログにニヤニヤしにいってきます！押忍！