プチ自給自足コンテンツへスキッププチ自給自足バジル農家をしながらプチ自給自足な生活をしています。バジル農家TweetCheckこだわりのバジルソースのHPは元々800pxの幅で運営していましたが、モニターが大型化して1000pxのデザインに変更しても表示に問題がなそうなのでサーバーを引っ越しするついでにデザインも3カラムに変更しました。アクセスの半分以上がスマホやタブレットになってきているのでスマホでもHPが見やすくなるように色々と調べたら、レスポンシブwebデザインに行き着いた。1つのhtmlファイルを見る端末の大きさでcssを切り替えて対応するので、URLや遷移を気にしなくていいのでMTで構築しているbasil.scには対応しやすそうなのでチャレンジしてみました。表示を切り替えるサイズ1000px〜pcや1000px以上のタブレットは3カラムの表示のまま。761px〜999pxタブレットの幅の狭い方401px〜760pxスマホの幅の広い方〜400pxスマホの幅の狭い方で切り分けてcssを書きました。cssの記入方法cssファイルを複数枚用意してデバイスで切り替える方法もありますが、メンテナンスを重視して1枚のcssで各クラス毎に記入しました。;}イメージタグにmax-widthを100%で指定してはみ出しを解消して、heightにautoを指定して縦横比を自動で調整。サイト引越し3日後にスマホでこだわりのバジルソースを検索すると検索結果の横にスマホ対応をいただきました。二段ベッドをDIYyoutubeに自宅でピザパーティーの動画あっぷしました。