Category Archives: Html5

[HTML5]JavaScriptの加速度センサーを使ってみる

JavaScriptの加速度センサーを使ってみた。(ただし、iOS Safariのみです)

サンプルで作ってみました。
枠内をタップしてみてください。
(iOS Safariのみ動作します)
→サンプル

acceleration sample – jsdo.it – share JavaScript, HTML5 and CSS

[HTML5]HTML5化をしてみる Part2 ~ headerタグとfooterタグ

今日は、headerタグとfooterタグを入れてみたいと思います。

headerタグは、イントロダクションやナビゲーショングループであることを示す際に使用します。
文書のヘッダ情報を表すheadタグとは異なりますので注意してください。

http://www.htmq.com/html5/header.shtml

<div id=”header”>を置き換えちゃえばいいわけですよね、きっと。

footerも同じ要領で変えてみました。

[HTML5]HTML5化をしてみる Part1 ~ htmlタグとmetaタグ

少しずつですが、このブログもHTML5化していきたいと思います。

とりあえず、今日はhtmlとmeta要素。

doctypeとhtmlを以下のように変更。
(以前)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja">

(HTML5)

<!DOCTYPE html>
<html lang="ja">

metaタグのcharsetもこんな感じに変更
(以前)

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

(HTML5)

<meta charset="UTF-8" />

ひとまず、今日はこれまで。

地道にやっていくとします。

[CSS3]transitionプロパティで簡単なアニメーション

CSS3のtransitionプロパティを使ってアニメーションを作ってみた。
※Chrome,SafariなどのWebkit系でしか動作しないので注意

コードは簡単で以下の3つのプロパティを設定するだけ

・-webkit-transition-property
→transition を適用するプロパティ

・-webkit-transition-duration
→transition の変化をどれくらいで表現するか
 とりあえず、1s(1秒?)で設定

・-webkit-transition-timing-function
→変化の具合を設定。
 いくつか設定できるみたい。
 今回のサンプルは選択できるようにしてみた。

以下、サンプルのCSS

#sample{
    width: 240px;
    height: 120px;
    background-color: #FF33FF;
    -webkit-transition-property: background-color, width, height;  
    -webkit-transition-duration: 1s;  
    -webkit-transition-timing-function: linear;
    
}  
#sample:hover{  
    background-color: #0000FF;
    width: 240px;
    height: 240px;
}

CSS3 transitionを使ってみる – jsdo.it – share JavaScript, HTML5 and CSS

[CSS3]radiusを使ってみた

CSS3をはじめてつかってみた。
とりあえず角丸を使ってみました。
ついでにHTML5のrangeも使ってますが。

CSS3 radiusを使ってみる – jsdo.it – share JavaScript, HTML5 and CSS