引っ越し完了＆レスポンシブウェブデザイン化

さーて。
ホームページの引っ越しが完了しました。

せっかくの引っ越しだから、
今までほとんど手付かずだった
スマホ・タブレット対策をしよう！ということで

手作業でレスポンシブウェブデザイン化しました。

※レスポンシブウェブデザインとは
１つのホームページデータだけで
横幅が異なる端末ごとに
ページのデザインを変えるテクニックのことです。

例えば下がパソコン用。

パソコンで見ると快適な反面、
スマホで見ると文字が一番小さく見えるはず。

で、次がタブレット用。
先ほど2列だったのが1列にまとまるようにしました。

次がスマホ用。
スマホさんはこの画像の文字が
一番大きく見えるはず。

…というように、
１枚のホームページデータで
パソコン・タブレット・スマホを
それぞれ別々の画面構成にすることが出来ます。

これがやりたかったんだよー。

…とまあ、
今の時代に沿った仕様に変更したのはいいのですが、
複数のタブレットやスマホで動作確認できません。

まだまだトップページのデザインも改造中ですし、
どうしても画面構成がおかしくなるページや
打ち込みミスなどあると思いますが、
見切り発車ながら始めてみたいと思います。

追記@160618

レスポンシブウェブデザインの修正などを重ねているけど、やっぱりIE対策が一番面倒。

IE8で見たらトップページ以外の文字が真っ黒で全く読めません。

まあ、IE8なんてもう既にサポートが切れてますが、
対応出来るならそれに越したことはないですし。

いちいちIEのバージョンによってスタイルシートを変えるのが面倒だなあと思っていましたが、
この際メディアクエリ（レスポンシブウェブデザインの根幹にあたるフィルタ）対策は諦めて

単純に文字が表示されるようにしたので、IE8でも閲覧可能のはずです。

拡大した時に画像の縦横比が崩れますが、それは…。いいよね…。
気になるならchromeとかfirefoxを使ってね…。