ヘッダに組み込むライブラリや記述のメモ

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー html

自分がよく使うヘッダの要素についてのメモ。

viewport指定

<meta name="viewport" content="width=device-width initial-scale=1">

上記例では閲覧環境の画面サイズに応じたコンテンツ幅と表示時の拡大率を1に指定。
パラメータは以下の通り()内はデフォルト値

width:viewportの横幅(980px)
height:viewportの縦幅(縦幅)
initial-scale:ページ読み込み時の拡大率(1.0)
user-scale:ユーザによる拡大縮小の許可(yes)
minimum-scale:最小の拡大率(0.25)
maximum-scale:最大の拡大率(1.6)

IE用条件付コメント

バージョン指定
<!--[if IE 6.0]>内容<![endif]-->
そのバージョン以上
<!--[if gte IE 6.0]>内容<![endif]-->
そのバージョン未満
<!--[if lt IE 6.0]>内容<![endif]-->

gte、ltなどによりIEのバージョンを指定して実行できる。
特定のバージョンに向けたCSSを設定する場合などに利用。
例えば

<!--[if IE 6 ]>
<link type="text/css" rel="stylesheet" href="/css/ie6.css">
<![endif]-->
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="/css/ie7-8.css">
<![endif]-->
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="/css/ie7-8.css">
<![endif]-->

IEのドキュメントモードを指定

IE8以降、metaとして記述することで、IEのドキュメントモードを指定できるようになった。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=の部分にバージョンを記述。上記例のedgeは、使用できる最高の描画モードを使うという指定。chrome=1は、IEでchromeのレンダリングエンジンを使うプラグインを入れている場合にそれを有効にする指定。

OpenGraph

ソーシャルメディアで情報を共有する際の規格。facebookのいいねなどにデータが送られる際、これを書いておくとここから使われる。

<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="article">
<meta property="og:image" content="引用される際に表示させたい画像">
<meta property="og:url" content="URL">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="説明">

IEの旧バージョン対策などに使うjs

html5.js
古いIEでhtml5の新しい要素を有効にする
IE9.js
古いIEでCSS3などの一部セレクタを有効にする
css3-mediaqueries.js
古いIEでメディアクエリーを有効にする
respond.js
古いIEでメディアクエリーを有効にする

ほとんどはgoogleにホストされているので、以下のようにおまじない程度に書いておけばOK。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src=/js/respond.min.js"></script>
<![endif]-->

レスポンシブ系については完璧に動作するわけではない。ちょっとした書き方次第で動かなかったりも。
既知の問題や、検証などをまとめてくれてる記事。参考になります。ありがとうございます。

IE8以前でcss3-mediaqueries.jsが効かない
css3-mediaqueries.jsが効かなくて困った時のまとめ

PHPでのUA判定によるスマフォ切り分け

例はiPhoneではない場合

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ( !ereg("iPhone",$ua)&& !ereg("iPod",$ua)) :?>
必要な記述
<?php endif;?>

大手のUAは以下のような感じ

'iPhone',    // Apple iPhone
'iPod',    // Apple iPod touch
'Android',    // Android

まとめてみると殆どが「古いIEでは・・・」なことに驚きます。問題はIE6だけではなく、新しいバージョンが出てもそれぞれに問題はあってなかなかめんどくさいようです。

iPhoneとAndoroidでもjsの挙動は違いますし、iOS次第でCSSの対応なども違いますし、ほんと大変です。

html html5