jsdo.it を使って Step by Step で学ぶ HTML5 and CSS3 入門

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

またまた昔書いたエントリーのサンプルを jsdo.it に移植しました.

元々のエントリーは『HTML5 と CSS3 で Web 制作』. 画像を使わずに, HTML5 と CSS3 のみでっぽいサイトを作成しています.

Step by Step 形式でまとめたので, 徐々に Web ページが出来ていく感じを 楽しんでもらえたらなとおもいます.

jsdo.it を使って作っています. fork してイジったり前回の step との差分を見たりと色々やれるので ぜひ活用して遊んで下さい!!

※サンプルの実行結果は jsdo.it の fullscreen モードで見てください!!

Read More

HTML5 マークアップ入門

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

昔書いた HTML5 に関するエントリー 『HTML5 でコーディングしてみよう!』 のサンプルを jsdo.it に移植したので改めて解説します.

fullscreen 用に作ってあります. fork して色々イジって遊んでください.

Step by Step で HTML5 や CSS3 を学びたい方は過去に書いた『HTML5 と CSS3 で Web 制作』をどうぞ.

Read More

『標準HTML5タグリファレンス』を読んだのでレビューってみる

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

昨日, Amazon で購入した『標準HTML5タグリファレンス (WEB PROFESSIONAL) 』が届いたのでひと通りよんでみました. 色々と良い点, 悪い点あったので少しだけ私なりにレビューってみようと思います.

標準HTML5タグリファレンス (WEB PROFESSIONAL)』は, ascii の紹介ページによると

HTML5で規定されているHTML要素・属性の意味、使い方を紹介したリファレンスです。2011年5月にW3Cが発表した「最終草案」に基づき、すべての要素についてサンプルコードと実行画面付きで解説。「プロの道具」をコンセプトに、見やすいデザイン・レイアウト、軽量な用紙や開きやすい特殊製本などの造本にもこだわり、制作現場で使える辞書を目指しました。

てな感じの本になっています.

目次はこちら.

  • 第 1章 HTML5の概要
  • 第 2章 ルート要素とドキュメントメタデータ
  • 第 3章 セクション
  • 第 4章 コンテンツのグループ
  • 第 5章 テキスト
  • 第 6章 編集
  • 第 7章 埋め込みコンテンツ
  • 第 8章 テーブル
  • 第 9章 フォーム
  • 第10章 インタラクティブ
  • 第11章 スクリプティング

あくまでリファレンス本なので, 内容についてどうこうっていうよりは見た目や作りについてレビューしています.

標準HTML5タグリファレンス

Read More

あけおめ企画 – 画像を一切使用せず HTML5 Canvas で鏡餅年賀状を描いてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.』の個別解説です.

今回解説するのは HTML5 Canvas Version についてです.

nengazyou

Read More

JavaScript で HTML5 Audio を使ってサウンド再生. 連続再生対策してるからゲームの SE にも使えるよん♪

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

以前, 『HTML5 Audio を JavaScript で使う方法』というエントリーを書かせていただきました.

が, ゲームに使うにはまだまだ不十分だったので少し改良したやつを作ってみました. 連続再生してもある程度耐えうる作りになっています. Canvas でゲームを作るときなんかに使ってみてください.

※Chrome version 16 は Audio 関係がウンコちゃんになっているので何度も再生すると音が鳴らなくなるバグがあります. version 17 で解消されることを期待しましょう!!

Read More

HTML5 Canvas で Polygon(多角形)描画

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

今, JavaScript のゲームライブラリを制作しています.

まだ公開前ではありますが, 整理がてら その中からチョコチョコと機能を晒していこうと思います.

では早速, 今回は Polygon(多角形) を描画するサンプルを作りました. この多角形描画処理を使えば簡単に下図のようなキレイな三角形や色々な多角形を描画することができます.

Read More