HTML

IEで互換表示をさせないX-UA-Compatibleの指定方法

IEはバージョンごとに表示方法がかなり変わってしまうとてもやっかいなブラウザです。また互換表示という機能があり、これによって表示が崩れてしまったりもします。

そこで互換表示をさせない方法のご紹介です。

IEで股間表示をさせない為のX-UA-Compatibleの指定方法は下記になります。
記述する場所によって適用されなかったりもしますので、こちらはなるべく文字コードの直後に実装をしましょう。

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

HTML5でvideoタグを使って動画を埋め込む

HTML5を利用すると、videoタグを利用することによって、動画の埋め込みが可能となりjます。

基本的な記述は以下になります。

<video src="movie.mp4"></video>

また、以下のように記述することでvideoタグがサポートされていない環境でのメッセージ表示を指定ができます。

<video src="movie.mp4">
<p>videoタグがサポートされていないブラウザです。</p>
</video>

そして、HTML5から新たに追加されたsourseタグを使用することによって、ブラウザに動画の再生候補を提示することもできます。

これによりブラウザは、記述順に再生可能なデータを利用する為、より多くの環境で動画を視聴できる可能性が高まります。

<video>
<source src='movie.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
<p>videoタグがサポートされていないブラウザです。</p>
</video>

また、ユーザー環境で利用可能な動画がない場合は、poster属性を利用して指定の画像を表示させることも可能です。例えば動画の開始箇所のフレーム等を画像にして利用します。

<video src="movie.ogv" poster="movie.jpg"></video>

controls属性を指定することで、再生・一時停止・ボリューム等のインターフェースを表示させることも可能です。

<video src="movie.ogv" controls></video>

autoplay属性を利用すると、ページを読み込んだ時点で動画の自動再生が可能になります。

<video src="movie.ogv" autoplay></video>

preload属性
はウェブページを読み込んだ時に裏側で動画を読み込ませるための記述です。

しかし初期値はあらかじめ読み込まれる設定になっていますので、もし、ユーザーが逆に動画をあまり必要としていなかったりする場合等にサーバーにかかる負担を減らすとき等に、下記の記述をして、裏側で読み込ませないように設定します。

また、preload=”metadata”と指定すれば、動画全体ではなく、動画サイズ・最初のフレーム・再生時間等の動画のメタデータのみ取得できます。

<video src="movie.ogv" preload="none"></video>

また、各ブラウザでサポートしている動画が異なります。

動画形式としては主なものが3つあります。

  • MP4形式動画
  • WebM形式動画
  • OGV形式動画

この3種類があるものの、実質的にはMP4とWebMがあれば現在はすべてのブラウザで再生可能となっております。

※今後OGVの対応化も進んでいるようですので、合わせてこちらの形式を利用しておくとさらに安全かと思います。

SSI(Server Side Include)を使って共通ファイルを読み込む

SSI(Server Side Include)を利用すればページに共通する箇所を1つのファイルにし、
共通するファイルとして読み込む事が可能となり、その箇所に修正が入った時に非常に楽になります。

ただし、セキュリティーの問題等もありますので、実際の案件での使用の場合にはその辺のリスクをクライアントに伝えて確認を取ることが必用になります。

また、サーバーでSSIが使用できないものもありますので、その確認もしておきましょう。

記述方法は複数ありますが、下記の方法を覚えておけば問題ないかと思います。

<!--#include virtual="/include/Include.html" -->

vrtual=””の中は絶対パスでも相対パスでも問題ありません。

スマホサイト必須のviewport設定

スマホで見るサイトを実装する場合にviewportを設定することは必須となってきます。

そこで通常よく利用される記述をご紹介します。

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

これでほとんどのスマホサイトは画面サイズに合わせて適切に表示されます。また、拡大縮小されない設定にするには以下の記述をしましょう。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

スマホで数字を電話番号と認識させない方法

スマホは数字を電話番号と勘違いしてしまうことが多いです。自動的にリンクになってタップすると発信してしまいます。

この機能を無効にするために、以下の記述を追加しましょう。

<meta name="format-detection" content="telephone=no">

本当に番号の箇所は以下のように記述すればいいです。

<address>電話番号:<a href="tel:090xxxxxxx">090-xxx-xxxx</a></address>

IEに互換表示させないX-UA-Compatibleの指定

下記を記述しておけば、IE10ではIE10のレンダリングモード、IE9ではIE9のレンダリングモードで表示されます。

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

上記コードはcssやjsなどの外部のファイルへのリンクを記述している箇所よりも上に記述しましょう。
なぜなら、外部ファイルの読み込みがあると、そこで表示モードが決まってしまうからです。

特定のページへリダイレクトする

metaタグを利用することで、指定した数秒後に特定のページへ遷移させることが可能になります。
古いサイト上で新しいサイトのurlを知らせるときに使用するケースが多い。

下記サンプルの秒数の場所に半角で秒数、ページのURLのいところに遷移先のURLを記述することが重要である。
また念のため、自動的にジャンプしない環境を考慮して、JavaScriptでさらにページ遷移の処理を記述しておくとよい。

 
<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="refresh" content="秒数;URL=ページのURL">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
(function (){
    location.pathname.replace('ページのURL');
}());
</script>
<title></title>

</head>
<body></body>
</html>