タグ別アーカイブ: html5

Modernizr/モダナイザーとは？

コメントをどうぞ

2014-03-14 Fridayの勉強会の議事録です。

自分のサイトの備忘録ページに「Modernizr/モダナイザーとは？」というのをアップしたので、興味があれば見て下さい。
manaka design

府中でホームページ制作

コメントをどうぞ

自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない（上を見ている以上）なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。

http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html

パンくずリスト mark up

コメントをどうぞ

みなさん、パンくずリストは何でマークアップしますか？

html5ならこんな方法もあるということで、現在製作中のサイトはこれにしてみました。

<nav>
 <p>
  <a href="/" rel="index up up up">第一階層</a> >
  <a href="/products/" rel="up up">第二階層</a> >
  <a href="/products/dishwashers/" rel="up">第三階層</a> >
  <a>現在位置</a>
 </p>
</nav>

<nav>

<p>

</p>

</nav>

参考にさせて頂いたサイト
coliss.com

HTML5 canvas

コメントをどうぞ

2013-12-14に盛大に開催された勉強会の議事録です。
今回は、かおりんごさんのリクエストでHTML5 canvasをやってみました。
とりあえずこんな感じです。
↓
sample

HTML5の新要素canvasというものとjavascriptで実装します。要素というのはh1とかpとかの事です。HTML要素です。

” 簡単に言うと、絵を描く為の画用紙がHTML5 canvasです。
絵を描く為の筆がjavascriptです。”

今回こちらのサイトを参考にさせて頂きました。
nezz＊script

window.onload = function(){
    //コンテキストの取得
    var canvas = document.getElementById("can");
    if(!canvas || !canvas.getContext) return false;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(255,0,0,0.1";//描画色を指定
    
    //options
    var point = {x:0,y:0};//座標
    var par = {x:4,y:1};//変化量
    var timer;//タイマー
    var delay = 1;//タイマーを実行する間隔/0.05秒
    
    //描画処理を行う関数。loop()関数の中で呼び出す。
    function draw(x,y){
       // ctx.clearRect(0,0,600,500);//一度canvasをクリア
        ctx.fillRect(x,y,50,50);//pointの座標に描画
    }
    
    //繰り返し描画を行う関数。
    var loop = function(){
    	 if(point.x > canvas.width-50 || point.x < 0){
            par.x = -par.x;
        }
        if(point.y > canvas.height-50 || point.y < 0){
            par.y = -par.y;
        }
        //pointの数値をparの分だけ増やす
        point.x = point.x + par.x;
        point.y = point.y + par.y;
        //描画処理を呼び出す
        draw(point.x,point.y);
        //タイマー(一度クリアしてから再設定。)
        clearTimeout(timer);
        timer = setTimeout(loop,delay);
    }
    loop();
}

window.onload = function(){

//コンテキストの取得

var canvas = document.getElementById("can");

if(!canvas || !canvas.getContext) return false;

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(255,0,0,0.1";//描画色を指定

//options

var point = {x:0,y:0};//座標

var par = {x:4,y:1};//変化量

var timer;//タイマー

var delay = 1;//タイマーを実行する間隔/0.05秒

//描画処理を行う関数。loop()関数の中で呼び出す。

function draw(x,y){

// ctx.clearRect(0,0,600,500);//一度canvasをクリア

ctx.fillRect(x,y,50,50);//pointの座標に描画

}

//繰り返し描画を行う関数。

var loop = function(){

if(point.x > canvas.width-50 || point.x < 0){

par.x = -par.x;

}

if(point.y > canvas.height-50 || point.y < 0){

par.y = -par.y;

}

//pointの数値をparの分だけ増やす

point.x = point.x + par.x;

point.y = point.y + par.y;

//描画処理を呼び出す

draw(point.x,point.y);

//タイマー(一度クリアしてから再設定。)

clearTimeout(timer);

timer = setTimeout(loop,delay);

}

loop();

}

div#stage{
    width:600px;
    height:500px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-300px;
    margin-top:-250px;
    background:#000;

}

div#stage{

width:600px;

height:500px;

position:absolute;

top:50%;

left:50%;

margin-left:-300px;

margin-top:-250px;

background:#000;

}

<div id="stage">
<canvas id="can" width="600" height="500"></canvas>
</div>

</div>

こんな感じです。javascriptのいろいろな数値を変えてみると、何がどう変化するのか分かると思います。僕もまだ詳しい事は分かりません。とりあえず、たくさんいじったりして理解を深めるしかないですね！

＊勉強会当日参加メンバーへ
この記事について勉強会でやったのに不足している部分がありましたら補足しておいて下さい。

html5 time

1件のフィードバック

timeタグを使ってみようと思います。（初めて）

<section>
<h1>新着情報</h1>
<article>
<h1>タイトル</h1>
<p>本文</p>
<time datetime="2013-06-21">2013-06-21</time>
</article>

<article>
<h1>タイトル</h1>
<p>本文</p>
<time datetime="2013-06-20">2013-06-20</time>
</article>

</section>

</article>

</article>

</section>

更新日を記事に入れたいのですが、これでよいのでしょうか？

2013-4-5勉強会

コメントをどうぞ

今日もお菓子が充実してます!

勉強会の概要は、

css3のアニメーションセレクタの復習

cssで画像をクロスフェード&レスポンシブデザインでの高さの問題について

html5の新しい要素や意味の変わった要素いろいろ

5月の会費とお部屋代のお支払い

“パソコン倶楽部りんご”にSNSボタンを設置する

です。続きを読む →

月	火	水	木	金	土	日
« 8月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31