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

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

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

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

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

JavaScriptでループ処理

JavaScriptでループ処理をしたい場合はSetTimeoutを利用してループ処理をさせることが可能です。

※尚下記は3秒ごとにループさせる記述になります。

function loop(){
 <!--  ループさせたい処理をここに書く -->
  setTimeout(loop,3000);
}

JavaScriptで時刻に応じて処理を変える方法

JavaScriptで時刻に応じて処理を変えてみましょう。

今回は00時~11時台と、12時~23時台で分けて処理をしてみましょう。

$(function(){
	var dayDate = new Date();//日付情報を取得します。
	var hour    = dayDate.getHours();//時間の数値を取得します。

	if( hour <= 11 ) {
		//00時~11時台の処理を入れます
	} else if( hour <= 23) {
		//12時~23時台の処理を入れます
	}
});

ページの高さが足りない時にフッタを画面の下部に固定する方法

下記のようなHTMLの構造であったとして説明していきます。

<html>
<body>
   <!-- ▼ページ全体を覆うdiv -->
   <div id="wrapper">

      <div id="header">
         ↑↓ヘッダ箇所
      </div>

      <div id="main">
         ↑↓本文箇所
      </div>

      <div id="footer">
         ↑↓フッタ箇所
      </div>

   </div>
   <!-- ▲ページ全体を覆うdiv -->
</body>
</html>

あとは下記のCSSを追加するだけになります。

#wrapper {
   position: relative;
   min-height: 100%;
}

#main {
   padding-bottom: 100px; /* フッタの高さ分余白を追加 */
}

#footer {
   position: absolute;
   bottom: 0px;
}

※ヘッダやフッタ箇所にmarginのある要素を入れる場合は、marginを0にしておかないと表示がおかしくなる可能性もありますのでご注意ください。

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の対応化も進んでいるようですので、合わせてこちらの形式を利用しておくとさらに安全かと思います。

CSSのletter-spacingで文字間隔を調整

文字間隔をスペース(空白文字)等で調節すると音声ブラウザ等で読み上げ内容がおかしくなってしまったりします。そこで文字間を調整したい場合はCSSのletter-spacingを利用して文字間隔を調整しましょう。

使用例としては三種類あります。

デフォルト

p{
	letter-spacing : normal;
}

ピクセル数で指定(文字間隔が5ピクセル)

p{
	letter-spacing : 5px;
}

文字数で指定(文字間隔が1.5文字分)

p{
	letter-spacing : 1.5em;
}

HTMLソース内で特殊文字を使ってスペース(空白文字)を表示しよう

ページ上に単体または複数のスペースを表示したい時があります。

そういったときは下記の記述を利用しましょう。

  • 「&thinsp;」は、狭い(細い)空白。
  • 「&nbsp;」は通常の半角スペースと同じサイズの空白。
  • 「&ensp;」は若干広めの空白。
  • 「&emsp;」はさらに広めの空白。

ただし注意が必要なことがあります。

まず文字間隔を調整する目的では利用しないということ。これを利用して、文字間隔の調整をすると、単語が検索にヒットしなくなったり、読み上げがおかしくなったりします。

文字間隔の場合はスタイルシートのletter-spacingを利用するようにしましょう。

またこの空白文字の「nbsp」とは「nob-breaking space」の略で自動改行させないスペースということです。

英文の文章は一行の終わりに達したときに、空白文字のある箇所で自動改行されるのですが、この特殊文字を利用すると自動改行されなくなってしまうので注意しましょう。

JavaScriptでページを表示する度に画像をランダムで表示させる方法

複数の種類の画像をページ表示毎にランダムに表示させたいことってありますよね。そういった場合にJavaScriptを使用してこの処理を行ってみましょう。

<div id="randomImg"></div>

上のrandomImg内にjpg画像をランダムで挿入するJavaScriptの処理になります。

$(function() {
	img = new Array();
	img[0] = "img01";
	img[1] = "img02";
	img[2] = "img03";
	img[3] = "img04";
	img[4] = "img05";
	n = Math.floor(Math.random()*img.length);

	$('#randomImg').append(
							'<img src="' + img[n] + '.jpg" width="100" height="100" alt="">'
						);
});

JavaScriptでチェックボックスをクリックしたときの動作の切り替え

特定のチェックボックスをクリックしたときの動作の切り替えをしたい時があります。

まずチェックボックスにクラスを付与します。

<input type="checkbox" class="cb" name="" value="">

それから、JavaScriptの記述は下記です。

$(function() {
  $('.cb:checkbox').on({
    'click': function(){
      if($('.cb:checked').length > 0){
        //チェックされた時の動作
      } else {
        //チェックがはずれた時の動作
      }
    }
  });
});

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

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

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

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

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

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

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