クロビス ブログ

写真や画像があるととても見やすいとは思いますが、
テキストのみでブログを書いております。ご了承ください。
(更新は不定期です)  RSSはこちら

カテゴリ:Web制作 > HTML

HTML5などで制作したサイトの場合、IEで意図しない表示のされ方になることがあります。

これはIEのドキュメント・モードと言う描画エンジンで、互換性を優先するためにHTMLソースにある<!DOCTYPE>を判断し、切り替えると言う便利なものです。また、ユーザ側で切り替えることも可能になります。

ユーザ側でドキュメント・モードを設定できる為に、サイトの表示が意図しない表示になってしまったりします。
そこでmetaタグでドキュメント・モードを指定するとちゃんと表示できるようになります。 

●edgeのレンダリングモードで表示させる(これを入れておけばほぼ大丈夫)
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

●IE8のレンダリングモードで表示させる
<meta http-equiv="X-UA-Compatible" content="IE=8" />

●IE8とIE10の複数指定のレンダリングモードで表示させる
<meta http-equiv="X-UA-Compatible" content="IE=8;IE=10" /> 


他にもエミュレートで表示させることもできます。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

Media QueriesはCSS3から導入された機能です。
Media Queriesを使うとデバイスの表示幅に合わせてCSSを切り替えることが可能になります。

例:
<link href="smart.css" type="text/css" rel="stylesheet" media="only screen and (max-device-width:768px)" />
<link href="style.css" type="text/css" rel="stylesheet" media="screen and (min-device-width:769px)" />

上記の例だと、デバイスの最大表示サイズが768px 以内だとsmart.cssを読み込み、769px以上はstyle.cssを読み込みなさいとなっています。


また、METAタグのviewportと一緒に使用します。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes">

IE9以下に配慮する
<!--[if IE]>
<link href="style.css" type="text/css" rel="stylesheet" />
<![endif]-->  

スマホ用のサイトを別に制作すると手間がかかる為、レスポンシブにCSSを切り替えたい場合に使用します。

例: 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes"> 

width
width=device-width(Media Queries*で分岐する場合の記入方法)
width=device-768px

initial-scale
initial-scale=1
初期ズームの倍率の指定。上記の場合は1倍。

maximum-scale
maximum-scale=2
スマホの画面をピンチした時の最大拡大倍率。上記は最大2倍。

user-scalable
user-scalable=yes
ユーザー側でピンチで拡大できるかできないかの設定。yesかnoで指定。 

*Media Queriesとはブラウザの表示領域やデバイスの画面サイズなどによって、反映させるスタイルシートを切り替えられるCSS3から導入された機能のことです。 

METAタグによるキャッシュのコントロール

<meta http-equiv="Pragma" content="no-cache">
ページキャッシュを無効にすることができます。
 
<meta http-equiv="Cache-Control" content="no-cache">
ページキャッシュを無効にすることができます。
 
 <meta http-equiv="Expires" content="0"> 
ページの有効期限を指定することができます。0は キャッシュ無効

↑このページのトップヘ