レスポンシブwebデザイン

こだわりのバジルソースのHPは元々800pxの幅で運営していましたが、モニターが大型化して1000pxのデザインに変更しても表示に問題がなそうなのでサーバーを引っ越しするついでにデザインも3カラムに変更しました。

アクセスの半分以上がスマホやタブレットになってきているのでスマホでもHPが見やすくなるように色々と調べたら、レスポンシブwebデザインに行き着いた。

1つのhtmlファイルを見る端末の大きさでcssを切り替えて対応するので、URLや遷移を気にしなくていいのでMTで構築しているbasil.scには対応しやすそうなのでチャレンジしてみました。

レスポンシブwebデザイン対応するのに気を付けた事

1000px〜
pcや1000px以上のタブレットは3カラムの表示のまま。

761px〜999px
タブレットの幅の狭い方

401px〜760px
スマホの幅の広い方

〜400px
スマホの幅の狭い方

で切り分けてcssを書きました。

cssファイルを複数枚用意してデバイスで切り替える方法もありますが、

メンテナンスを重視して1枚のcssで各クラス毎に記入しました。

img {
max-width : 100% ;
height : auto ;
}

イメージタグにmax-widthを100%で指定してはみ出しを解消して、

heightにautoを指定して縦横比を自動で調整。

サイト引越し3日後にスマホでこだわりのバジルソースを検索すると検索結果の横にスマホ対応をいただきました。