サイトのトップページを、夏にリニューアル。
季節は冬になるも、差し替える意欲がどうにもわかない。
あそこもここも直したい、けれどもさわるのがめんどくさい。
めんどくさいのは、手間がかかる記述だからでは。
それでは、新規で作り直そう(,,゚Д゚) !!
思いついた勢いで、レスポンシブWebデザインを試してみました。
試す前、パソコンで見るとこんな感じ。
スマホでは縮小表示されるので、ごちゃっとしてみづらかった。
試した後、スマホで見るとこんな感じ。
デザインはほぼサンプル通りなので、スカスカしてますが。
はじめの一歩として、今後は充実させていくつもり。
試すにあたり、下記ページのサンプルを転用しました。
DECONCEPTERさん、ありがとうございます。
たった1行で完成?凄まじくレスポンシブデザインなサイトの作り方 DECONCEPTER
作り方は簡単。
サンプルをダウンロードし、必要な箇所を書き換えるだけ。
jsもcssも、サンプルに含まれています。
注意点があるとすれば、index.htmlの文字コード。
ローカルでは正しく表示されるのが、サーバーにアップロードすると、文字化けする場合。
<meta charset="UTF-8">の書き換えや、shift-jisとして保存する必要があります。
試してみた感想。
可変グリッド、楽しい~♪ヽ(´▽`)/
トップページ以外も、なんとかせねば・・・。
【関連リンク】
レスポンシブWebデザインのメリット、デメリット比較まとめ(PhotoshopVIP)
5分でわかる流行のレスポンシブWebデザインまとめ(株式会社LIG)
レスポンシブデザインの見た目を確認できるサイト「Responsive Checker」(ライフハッカー日本版)