レスポンシブデザインをこのサイトにもちょっとだけ取り入れてみました。
レスポンシブデザインの具体的な書き方・導入方法を記載しておきます。
レスポンシブデザインを制作する際には、デバイスのウインドウサイズの横幅に合わせてCSSを切り替える必要があるため、このViewportをデバイスの横幅であるdevice-widthに指定します。
Viewportを指定するにはhead内に以下のメタタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
CSS2では@media screenや@media printと記述してブラウザ上と印刷用のCSSを切り替えることができましたが、CSS3からは更にそれと同様の記述方法でデバイスのウインドウサイズなどによってCSSの切り替えが可能になりました。
media(max-width:○○○px)、media(min-width:○○○px)というような記述をして画面サイズの範囲で条件分岐をさせてCSSを適用できます。
下記は当サイトでのレスポンシブデザイン部分のCSS記述です。
@media (max-width:1000px){ h1{ font-size:16pt; } h2{ font-size:14pt; } #left{ width:100%; float:none; } #right{ margin-left:0; float:none; } #contents{ margin-left:0; } th{ width:auto !important; } } @media (max-width:600px){ h1{ overflow:hidden; white-space:nowrap; } h2,h3,#left h3{ font-size:11pt; height:auto; line-height:18pt; text-indent:0; } #contents div{ float:none !important; width:100% !important; } }
<link rel="stylesheet" href="/css/desktop.css" media="(min-width:769px)" /> <link rel="stylesheet" href="/css/tablet.css" media="(max-width:768px) and (min-width: 321px)" /> <link rel="stylesheet" href="/css/mobile.css" media="(max-width:320px)" />
IE8以下のブラウザではCSS3に対応していないためjavascriptを利用して対応させます。
下記のリンクよりrespond.jsかcss3-mediaqueries-jsを導入してください。
(このサイトではあえてIE8以下のブラウザではレスポンシブデザインに対応させていません。)
https://github.com/scottjehl/Respond
<!--[if lt IE 9]> <script src="/js/respond.js"> </script> <![endif]-->
http://code.google.com/p/css3-mediaqueries-js/
<!--[if lt IE 9]> <script src="/js/css3-mediaqueries.js"> </script> <![endif]-->
Copyright(C) systemexpress.co.jp All Rights Reserved. Author Takayuki Yukawa