急に思い立って簡単なWebページを作りました。ついでにレスポンシブ（ウィンドウのサイズに合わせてデザインが変わる）にしてみました。

こちらの記事
レスポンシブWebデザインにする為に行った事のまとめ | memocarilog
がとても参考になりました。

実際にどんな風にレスポンシブにしたのか、忘れないうちにメモしておきます。

メディアクエリを使ってCSSを切り替え

今回はhtmlファイルに直接CSSを書いて、@mediaでディスプレイ幅ごとにスタイルを切り替える方法にしました。
（でもこのやり方のせいか、iPhoneやiPadを回転させたときの表示切替がなんだか微妙です……。本当はファイルを分けたほうがいいのかも？）

具体的には以下のような感じです（これをheadタグ内に入れる）。

	<style>
		/* 共通のスタイル */

		@media screen and (max-width: 768px) {
                  /* 幅768ピクセル以下で適用するスタイル */
		}

		@media screen and (min-width: 769px) {
                  /* 幅769ピクセル以上で適用するスタイル */
		}

	</style>

Viewportの設定

このままだとスマートフォンなどの端末で意図した通りにスタイルが切り替わらないので、Viewportというものの設定が必要です。

具体的には、今回は

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

というタグをheadタグ内に入れました。

デバイスのサイズに合わせて表示し、拡大／縮小を許可しないという設定になっています。

感想：めんどくさかった

これだけシンプルなページで、しかもCSSの切り替えを769pxでしか行っていないにも関わらず、「めんどくさいな」と感じてしまいました……。

（作業量は大したことなかったのですが、性格的にあまり好きな作業ではありませんでした）

なので、このブログのレスポンシブ化はまだまだ先になりそうです。