tencount-top
サイトのトップページを、夏にリニューアル。
季節は冬になるも、差し替える意欲がどうにもわかない。
あそこもここも直したい、けれどもさわるのがめんどくさい。

めんどくさいのは、手間がかかる記述だからでは。
それでは、新規で作り直そう(,,゚Д゚) !!
思いついた勢いで、レスポンシブWebデザインを試してみました。

試す前、パソコンで見るとこんな感じ。
スマホでは縮小表示されるので、ごちゃっとしてみづらかった。
131130-2

試した後、スマホで見るとこんな感じ。
デザインはほぼサンプル通りなので、スカスカしてますが。
はじめの一歩として、今後は充実させていくつもり。
131130

試すにあたり、下記ページのサンプルを転用しました。
DECONCEPTERさん、ありがとうございます。
たった1行で完成?凄まじくレスポンシブデザインなサイトの作り方  DECONCEPTER

作り方は簡単。
サンプルをダウンロードし、必要な箇所を書き換えるだけ。
jsもcssも、サンプルに含まれています。

注意点があるとすれば、index.htmlの文字コード
ローカルでは正しく表示されるのが、サーバーにアップロードすると、文字化けする場合。
<meta charset="UTF-8">の書き換えや、shift-jisとして保存する必要があります。

試してみた感想。
可変グリッド、楽しい~♪ヽ(´▽`)/
トップページ以外も、なんとかせねば・・・。

【関連リンク】
レスポンシブWebデザインのメリット、デメリット比較まとめ(PhotoshopVIP)

5分でわかる流行のレスポンシブWebデザインまとめ(株式会社LIG)

レスポンシブデザインの見た目を確認できるサイト「Responsive Checker」(ライフハッカー日本版)