西Hide Design & Art Work Collection

西Hide Design & Art Work Collection




備忘録:レスポンシブデザイン対応

Category : blog · by 4月 8th, 2015

前回の投稿でHTMLファイルをスマホで見る方法についてチャレンジしました。しかし見ることができただけで、スマホ向けに最適化したわけではありません。なので今度はスマホで丁度良く見えるように調整してみます。いわゆるレスポンシブデザインの練習みたいなものです。

本気でレスポンシブデザインを取り組むには、「独学!未経験からWebデザイナーになる!!」さんで紹介されているようにテストサーバーを立てて云々まで掘り下げる必要がありますので、別の機会にチャレンジレポしたいと思います。

まずは前回作ったHTMLのHEAD内に次のmeta要素を追記します。

<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”>

これを追記して、デバイスでの見え方、ピンチイン/アウトの可否を設定します。設定項目は以下の通りです。

  • initial-scale=画面のデフォルトのズーム率
  • minimum-scale=ピンチイン時の最小縮小率
  • maximum-scale=ピンチアウト時の最大拡大率
  • user-scalable=yesまたはno

ざっくり設定を試してみましたけれども「initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”」が一番分かり易く思いました。

それとAndroidの場合、機種によっては次のような記述を入れないと塩梅が悪いようです。

<meta name=”viewport” content=”width=device-width;target-densitydpi=device-dpi”>

to-Rさんの記事で詳しく解説されてますので、そちらをご覧ください。

次にPCで見た時の縮小版のように表示されるので、それを解消するためにCSSの中身を変更します(※もちろん修正前のCSSは別データとして残します)。今回のデータでは以下の部分を変更しました。

  • 全体の横幅:width:1200px; → max-width:100%;
  • サイドメニューグループ:float:light → 削除
  • サイドメニューグループ:width:300px; → max-width:100%;
  • サイドメニューの各リンク:width:250px; → width:auto;
  • 本文グループ:width:880px; → max-width:100%;
  • 画像:img{max-width:100%; height: auto;} 追加
  • フッタグループ:clear:both; → 削除
  • h1,h2,pセレクタの文字サイズ調整
  • レイアウト全体のpadding,marginなどバランス調整

▼そうして出来上がったのがこんな感じです。

page_image013

スマホを横にすると、それに合わせてフィットしてくれます。viewportの設定はピンチイン/アウトが効かないようにしました。左右に微妙に動いたりしないのでワタクシ的には好みですね。

こうしてページの構成要素は無事スマホにフィットするようになりました。しかしメニューの表示が気に食わないです。PCで見るとこうですが・・・

page_image001

▼スマホではこうなっています(T_T)

page_image014

こりゃあ酷い。テストデータとはいえ無駄に長いメニューがダラ~と続くのは見るに耐えません。ビジュアル、ユーザビリティ、どちらのデザイン観点からも好ましくないどころか、評価すらできませんね。ボツです。Wordpressで作ったようなメニューにしたくなります。CO-JINさんの記事で「レスポンシブWEBデザイン用ナビゲーション&メニューの紹介」がされているので試したいところですが、新たな知識が必要となるため一旦ここで留めておきます。チャレンジレポはまたの機会に。ではではごきげんよう。

SHARE :