レスポンシブルデザインに挑戦!?

スポンサードリンク

ついにgoogleのウェブマスターツールで「モバイル ユーザビリティ上の問題が検出されました。」と出ました。

その原因は、

1、タッ要素同士が近すぎる
2、コンテンツがビューポートに対応していない
3、ビューポートが設定されていない
4、フォントサイズが小

というものです。

これらの原因を全て解決するためには思い切ってレスポンシブルデザインを導入するしかないと思われます。またiphone4でretinaディスプレイが採用されたことで、今まで横幅が群雄割拠状態であったものが、ほぼスマホ画面は640で落ち着きそうな状況です。
そのためこれを機に640をブレイクポイントとするレスポンシブルデザインを作ってみたいと思います。

色々と調べた結果、

1、headにCSSをリンク
<link href=”パソコン.css” rel=”stylesheet” media=”(min-width: 641px)” >
<link href=”スマホ.css” rel=”stylesheet” media=”(max-width: 640px)” >

2、画像をCSSでフルードイメージに(パソコン・スマホ両方のCSS)
img { width : auto} /
img { maxwidth : 100%}

*maxwidth : 100%とするとgoogleマップのアイコンなどがうまく表示されませんでしたのでmaxwidth をパソコン.cssは960px、スマホ.cssは640pxに設定しました。

3、いらないDIVを消す
消すDIV {display:none;}

4、フォントを15ptに
スマホCSSのみ15pt

以上のことをすればなんとかできそうです。
まぁ一度挑戦してみます(^^)

PS,2016年9月にDWccを導入しました。DWccでサポートされているブーツストラップを使えば簡単にレスポンシブに対応することができました。

スポンサードリンク

カテゴリー: ホームページ作成 パーマリンク