2010年01月07日
HTML5+CSS3でサイト制作 企業サイトその2
（別ウィンドウで開きます）
Webサイト制作においてこれからの主流になると思われるHTML5+CSS3を積極的に用いてサンプルサイトを制作しました。
サンプルサイトはトップページのみで、サイト内リンクをクリックしてもリンク先に移動しません。
今回はh1～2のマークアップに悩みました。取り敢えずヘッダーやサイド、メインのそれぞれの最初はh1と言う事にしました。
フッターの運営者プロフィールでfigureを使いました。HTML5が普及すればこの要素は多用しそうな予感。
あと、以前学習したjQueryでロールオーバーなどを行っています。PNGを多用しているため、IE6では見れたもんじゃありません（笑）
最新技術を学ぶために制作したサイトなので、一部の古いバージョンのブラウザでは正しく表示出来ない場合があります。
その場合は是非以下の最新ブラウザをご利用ください。
Google Chrome（BETA）
Safari 4
また、一応HTML5のMarkup Validation Serviceはパスしたものの、正しくない文法や改善点があるかもしれません。その時はご指摘いただけると大変ありがたいです。 続きを読む
2009年12月22日
HTML5+CSS3でサイト制作 企業サイトその1
（別ウィンドウで開きます）
Webサイト制作においてこれからの主流になると思われるHTML5+CSS3を積極的に用いてサンプルサイトを制作しました。
サンプルサイトはトップページのみで、サイト内リンクをクリックしてもリンク先に移動しません。
最新技術を学ぶために制作したサイトなので、一部の古いバージョンのブラウザでは正しく表示出来ない場合があります。
その場合は是非以下の最新ブラウザをご利用ください。
Google Chrome（BETA）
Safari 4
また、一応HTML5のMarkup Validation Serviceはパスしたものの、正しくない文法や改善点があるかもしれません。その時はご指摘いただけると大変ありがたいです。 続きを読む
2009年11月03日
Canvasでシェルピンスキーのカーペットを描画
Canvasの使い方 - Canvas - HTML5.JP
上記リンクを参考に実際に書いてみた。
HTML5の要素CanvasとJavascriptを使ってシェルピンスキーのカーペットを描画してみました。
IE（インターネットエクスプローラー）は残念ながらcanvasに対応していません（表示させる方法はありますが、ブログだとちょっとめんどいので）。
最新型ブラウザのFirefox、Google Chome、Safariをお使いください。
プログラムは不慣れなので汚いコードですがご容赦を。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
HTML5の要素CanvasとJavascriptを使ってシェルピンスキーのカーペットを描画してみました。
IE（インターネットエクスプローラー）は残念ながらcanvasに対応していません（表示させる方法はありますが、ブログだとちょっとめんどいので）。
最新型ブラウザのFirefox、Google Chome、Safariをお使いください。
プログラムは不慣れなので汚いコードですがご容赦を。
コードは以下の通り。
<script type="text/javascript">
function draw(d1,d2,dl) {
/* canvas要素のノードオブジェクト */
var canvas = document.getElementById('sierpinski');
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* 線を描く */
ctx.beginPath();
ctx.fillRect(d1,d2,dl,dl);
}
function clear(d1,d2,dl) {
/* canvas要素のノードオブジェクト */
var canvas = document.getElementById('sierpinski');
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* 線を描く */
ctx.beginPath();
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fillRect(d1,d2,dl,dl);
}
function sierpinski(x,y,a,n){
clear(x+a/3,y+a/3,a/3);
if (n > 0) {
sierpinski(x,y,a/3,n-1);
sierpinski(x+a/3,y,a/3,n-1);
sierpinski(x+a*2/3,y,a/3,n-1);
sierpinski(x,y+a/3,a/3,n-1);
sierpinski(x+a*2/3,y+a/3,a/3,n-1);
sierpinski(x,y+a*2/3,a/3,n-1);
sierpinski(x+a/3,y+a*2/3,a/3,n-1);
sierpinski(x+a*2/3,y+a*2/3,a/3,n-1);
}
}
</script>
<form>
<p>分割回数5(n=4)</p>
<canvas id="sierpinski" width="440" height="440" style="background-color:#ffffff;">
<script type="text/javascript">
draw(20,20,400);
sierpinski(20,20,400,4);
</script>
</canvas>
</form>2009年10月31日
canvasとJavaScriptでコッホ曲線を描画
Canvasの使い方 - Canvas - HTML5.JP
再帰プログラムによるフラクタル図形の描画：CodeZine
上記リンクを参考に実際に書いてみた。
HTML5の要素canvasを使ってコッホ曲線を描画してみました。
IE（インターネットエクスプローラー）は残念ながらcanvasに対応していません（表示させる方法はありますが、ブログだとちょっとめんどいので）。
最新型ブラウザのFirefox、Google Chome、Safariをお使いください。
プログラムは不慣れなので汚いコードですがご容赦を。
コードは以下の通り。
再帰プログラムによるフラクタル図形の描画：CodeZine
上記リンクを参考に実際に書いてみた。
HTML5の要素canvasを使ってコッホ曲線を描画してみました。
IE（インターネットエクスプローラー）は残念ながらcanvasに対応していません（表示させる方法はありますが、ブログだとちょっとめんどいので）。
最新型ブラウザのFirefox、Google Chome、Safariをお使いください。
プログラムは不慣れなので汚いコードですがご容赦を。
分割回数4(n=3)
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function draw(f1,f2,g1,g2) {
/* canvas要素のノードオブジェクト */
var canvas = document.getElementById('koch');
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if ( ! canvas || ! canvas.getContext ) {
return false;
}
/* 2Dコンテキスト */
var ctx = canvas.getContext('2d');
/* 線を描く */
ctx.beginPath();
ctx.moveTo(f1, f2);
ctx.lineTo(g1, g2);
ctx.stroke();
}
function Koch(a1,a2,b1,b2,n){
var o1 = a1;
var o2 = a2;
var p1 = (b1 - a1)/3 + a1;
var p2 = (b2 - a2)/3 + a2;
var q1 = (b1 - a1)*2/3 + a1;
var q2 = (b2 - a2)*2/3 + a2;
var r1 = b1;
var r2 = b2;
var distance = Math.sqrt((b1 - a1)*(b1 - a1) + (b2 - a2)*(b2 - a2))/Math.sqrt(3);
if ((b1 - a1) >= 0) {
var angle1 = Math.atan(-(b2 - a2)/(b1 - a1)) + Math.PI/6;
var s1 = a1 + (distance*Math.cos(angle1));
var s2 = a2 - (distance*Math.sin(angle1));
} else {
var angle2 = Math.atan(-(b2 - a2)/(b1 - a1)) - Math.PI/6;
var s1 = b1 + (distance*Math.cos(angle2));
var s2 = b2 - (distance*Math.sin(angle2));
}
if (n <= 0) {
draw(o1,o2,p1,p2);
draw(p1,p2,s1,s2);
draw(s1,s2,q1,q2);
draw(q1,q2,r1,r2);
} else {
Koch(o1,o2,p1,p2,n-1);
Koch(p1,p2,s1,s2,n-1);
Koch(s1,s2,q1,q2,n-1);
Koch(q1,q2,r1,r2,n-1);
}
}
</script>
<p>分割回数4(n=3)</p>
<canvas id="koch" width="340" height="400">
<script type="text/javascript">
Koch(20,280,170,20.2,3);
Koch(170,20.2,320,280,3);
Koch(320,280,20,280,3);
</script>
</canvas>
