Twitter

html5のひな形

2012/11/26 | html5 | コメント (0)

今更ながら毎回書くことになるので、自分用メモ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="" />
<link rel="stylesheet" href="" media="" />
<script src=""></script>
<title></title>
</head>
<body>
</body>
</html>

canvasを全画面に表示する

2012/06/27 | html5 | コメント (4)

canvasをウィンドウサイズいっぱいの背景に固定したい場合や、フルcanvasのコンテンツを作成したい場合用のメモ。
canvasはjavascriptを利用してサイズ指定、リサイズ処理を行います。
※下記コードはjQueryの利用を前提に書いています。

【html】

<body>
<div id="wrapper">
<canvas id="main"></canvas>
</div>
</body>

【css】

body{
	margin: 0px;
	padding: 0px;
	position: relative;
}

body #wrapper{
	width: 100%;
	height: 100%;
	position: fixed;
}

【js】

$(function () {
	sizing();
	$(window).resize(function() {
		sizing();
	});
});

function sizing(){
	$("#main").attr({height:$("#wrapper").height()});
	$("#main").attr({width:$("#wrapper").width()});
}

どれもシンプルな記述で実装できます。
canvasを全画面にするにはhtmlとcssだけではうまくいかないので、このように#wrapperのサイズを取得してcanvasの幅と高さに指定するという方法をとります。

html5のリセットCSS(+α)

2012/02/06 | html5 | コメント (0)

前回のエントリー「iPhone向けサイトのリセットCSS(暫定版)」に引き続き、html5コーディング用のリセットCSSとよく使う項目をフォーマット化した自分用メモ。

基本的な要素は入っているので僕の場合はほとんどこれで十分なのですが、必要な要素・プロパティのみをリセットする方法なので、足りないものは追加が必要です。

commonコメント以下にはfont-familyなどベースとなるbodyの指定と、よく使うのでclearfixを追加してます。ここら辺は自分がよく使うものを指定してコーディングの際の雛形にするとよいと思います。

+more read

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top