まるwebデザイン

wordpressカスタマイズとかwebデザインとかSNSのメモとかのブログ

IE6にも対応した、レスポンシブデザインの雛形を作りました

      2015/07/24

最近はやりのレスポンシブデザイン雛形を作成しました。
レスポンシブデザインってなんぞや?という人はとりあえず下記サンプルを見てください。
そしてブラウザの幅を小さくしたり大きくしたりしてください。

レスポンシブデザインサンプル

レスポンシブWebデザイン(Responsive Web Design)は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法 だそうです。

解説

下記のように横幅によって反映させるCSSを変えています。
横幅769px以上の場合は「style.css」(PC用)を
横幅768px以下の場合は「tablet.css」(タブレット用)を
横幅640px以下の場合は「smart.css」(スマホ用)を反映するようになっています。


	<link href="css/style.css" rel="stylesheet" media="screen and (min-width: 769px)" /> 	<link href="css/tablet.css" rel="stylesheet" media="screen and (max-width: 768px)" /> 	<link href="css/smart.css" rel="stylesheet" media="screen and (max-width: 640px)" /> 

IE対応

これだけだとブラウザ界のヒネクレ者IE8以下では反映されないのでrespond.min.jsを適用します。

<!--&#91;if lt IE 9&#93;>
<script src="js/respond.min.js"></script>
<!&#91;endif&#93;-->

以上でIE6~9 chrome safari firefox 対応のレスポンシブデザイン雛形が完成です。
あとは好きなように装飾をしてください。

雛形のZIP

 - HTML・CSS