カテゴリー: html5 css3

ウェブフォントの使い方などを説明した 『 ウェブフォントとは 』 を作りました。

HTML5・CSS3で全編できています。
webkitアニメーションを終わりを下記のように取得し、CSSを切り替えています。

------------
Scene_01.addEventListener( 'webkitAnimationEnd', function() {
document.getElementById("Scene_01").className="Scene_mute";
	document.getElementById("Scene_02").className="Scene_02_play";
	obj_koe02.play();
}, false );
------------

ウェブフォントの現状の問題点なども解説していますので、よろしければご覧くださいませ。

「絶対に起きるWEB目覚まし」 を作りました。

HTML5のaudioを使用しています。
canPlayTypeを使用し、wavなどを再生できるかどうかでブラウザを判別しています。

----------------
if (objAlarm1.canPlayType) {
	var bWav = ('' !== objAlarm1.canPlayType('audio/wav'));
----------------

漫画で使い方の簡単な説明ページも用意してみました。
http://tatsuaki.net/web_timer/manga1.html

設定した時間の5分前、3分前、1分前になると目覚まし声が鳴るのですが、特徴的な音声にしてみたので、よろしければ一度使って聞いていただけたらと思います。

1DIV サラリーマン（全身） forked: 1DIV リラックマ – jsdo.it – share JavaScript, HTML5 and CSS

（「PLAY」押すとサラリーマンが表示されます。jsdo.itのサイトに遷移しFullscreen表示すると全身が表示されます）

css3を使い、divタグ一つでサラリーマンを書いてみました。
cssの擬似要素のbeforeとafterを使い、基本box-shadowで表現しています。
メガネフレームや髪は、影をいくつも重ねて作りました。

以前作った レコメガール のように、ページ下部にくっつき、ウィンドウサイズに合わせて可変するフッターのサンプルです。

可変フッターサンプル

position: absolute と bottom だけだと、ウィンドウの縦幅が狭いときは上のコンテンツにフッターがかぶってしまうことがあります。
HTML5用に !doctype html と宣言するとdivをheight 100% としてもウィンドウの縦幅いっぱいにdivが拡がらないので、htmlとbodyにheight 100% を指定し、min-heightで最小幅を指定することで、ある程度の縦幅があるときはウィンドウの大きさに合わせて可変し、縦幅が狭いときは可変しないフッターを実装することができます。

----------------
html,body {
	height:100%;
}
#wrap {
	height:100%;
	min-height:300px;
	position: relative;
}
#footer {
	position: absolute;
	width:100%;
	height:40px;
	bottom:30px;
	background-color: #999;
}
----------------

※IE6など、古いブラウザではmin-heightは実装されておらず、下記のような方法で対応する必要があります。
【参考】IE で min-width を指定する方法 – lucky bag