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

iPhone向けサイトのリセットCSS(暫定版)

iPhone向けのサイトでは、ターゲットとなるブラウザはMobile Safariのみなので、本来は要素のデフォルトスタイルをリセットする必要はありませんが、marginやpaddingなどレイアウトに関するスタイルは最初にリセットしておいた方が調整しやすくなります。

以下、暫定版として自分用にメモしておきます。
html5でのコーディングを前提に、基本的にはPC向けサイトの要素のリセットと同様ですが、Mobile Safariならではのプロパティもあります。

+more read

divをウィンドウの上下左右中央に配置する

divをウィンドウの上下左右中央に配置する

ずいぶん前から知られている技術ですが、まれに必要に迫られた時に必ず忘れているのでメモ。

+more read

ブログにTwitterの公式HTML版ウィジェットを設置する方法

ブログにTwitterの公式HTML版ウィジェットを設置する方法

最近、Twitterが流行ってますねー。相性が抜群なiPhoneが登場した頃位からユーザー数が一気に増えたように感じます。
そして私もその一人だったりします。笑
また、ブログ等に直近のつぶやきをリアルタイムに表示したいという方も多いのではないでしょうか。

様々なブログバーツが配布されていますが、デザインが好みじゃなかったりFlashが重かったり…。
そんな方には公式に配布されているHTML版ウィジェットがオススメです。
デザインもブログに合わせ変更できて読み込みも非常に軽いです。

コードを生成してくれるので導入は非常に簡単なのですが、メモとして以下にログを残しておきます。

+more read

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

Page top