第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS※ 非公式な転職スカウトにご注意ください！ 協賛社以外の勧誘行為は禁止されております。見かけた場合はjsdo.it運営事務局まで通報をお願いいたします。
HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。 先日、HTML 5.1が公式にリリースされました。 興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。 削除 アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。 変更 hea
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
HTML5のpicture要素を使ってブラウザの幅と関係なく眠いのを我慢している全然効率的でない男性を出す - hitode909の日記
ブラウザの幅を変えるとさまざまな眠いのを我慢している全然効率的でない男性が出てきてたのしい!! 解説 HTML5のpicture要素を使っています． developer.mozilla.org こんなかんじ． スマホで見るときは，画面を横にすると何か変わるかもしれない． <picture> <source media="(min-width: 1450px)" srcset="//lh3.googleusercontent.com/-S_m9OixeJuI/V1_D1PsLAWI/AAAAAAABL-g/r4rj0cNH_gATzO1wFXGNzsmnEPAPcRXLQCKgB/s1024/IMG_0192.JPG"> <source media="(min-width: 1400px)" srcset="//lh3.googleusercontent.com/-ILHgX6OxywE/V
HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
HTML5+Canvasで学ぶ物理アニメーションの基礎
Posted: 2015.07.28 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して物体が落下するという簡単な物理アニメーションを作成してみます。 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる 基本となるオブジェクトを作成する 前回作成したParticleオブジェクトを少し編集します。 var Particle = function(scale, color, vx, vy) { this.scale = scale; //大きさ this.color = color; //色 this.vx = vx; //X速度 this.vy = vy
HTML5+Canvasで学ぶインタラクティブアニメーションの基礎
Posted: 2015.08.27 / Category: javascript / Tag: HTML5, アニメーション すごく簡単なものですが、HTML5+Canvasを使用してマウスの操作に反応するインタラクティブアニメーションを作成してみたいと思います。 Canvasアニメーションの基礎については下記を参考にしてください。 この記事は下記をベースとして進めます。 HTML5で作るCanvasアニメーションの基礎 HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasで学ぶ物理アニメーションの基礎 マウスのイベントの取得方法 JavaScriptでクリックイベントを取得するには「addEventListener」を使用します。 例えばcanvas内でクリックした情報を取得したい場合は下記のようにします。 canvas.addEventListener
WebGL 総本山
あらゆる技術をトリッキーかつポップに使いこなす ikeryou さんの devdev Inc. がウェブサイトをリニューアル WebGL GLSL demo 楽しいギミックが満載 今回ご紹介するのは、devdev Inc. のコーポレートサイトです。 こちらは @ikeryou さんが代表を務めてらっしゃる法人のウェブサイトで、今回はリニューアルされたということだったので、ご紹介しようと思います。 WebGL を始めとした様々な技術を組み合わせた、ギミ... もはやこれは恒例行事！？ unshift の年賀コンテンツは音も楽しいインタラクティブコンテンツ WebGL GLSL demo ぜひともサウンド有効で楽しみたい 今回ご紹介するのは、WebGL 事例でもよく知られている unshift さんが公開されている年賀コンテンツです。 当サイトでは年始に世界各国の年賀コンテンツを紹介すること
forked: 四角の描画テスト：徐々に埋めるやつ - jsdo.it - Share JavaScript, HTML5 and CSS
forked: 四角の描画テスト：徐々に埋めるやつ ＜対応した点＞ ・四角形がドット絵になるよう調整。 ＜参考＞ ■ forked: 単振動（マウスに追従）Canvas版 http://jsdo.it/cx20/xL0N // forked from abebetaro's "四角の描画テスト：徐々に埋めるやつ" http://jsdo.it/abebetaro/testing02 var dx, dy; //縦横のブロックの数 var bsize = 5; //ブロックの大きさ var wsize = 100; //描画するブロックの数 var initRate = 0.05; var FPS = 30; var world = new Array(); var DOT_SIZE = 5; var X_START_POS = 13; var Y_START_POS = 13; // ‥‥
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
Three.js で作る 3D 年賀状 - コードレシピ
準備するもの 今回必要なものは以下のようになります。 three.js r69 立体ドット絵 つくっていくもの 今回のレシピで作っていくファイルは以下のようになります。 index.html index.js index.html を作る index.html を以下のように記述してください。 <!DOCTYPE html> <meta charset="utf-8"> <title>Happy New Year 2015</title> <!-- three.min.js --> <script src="http://threejs.org/build/three.min.js"></script> <script src="index.js"></script> index.js を書いていく 雛形コピーした後、dataSet ～ の箇所に、ドット絵を描いていきます。 "×" は色無
HTML5やJavaScriptでゲームが作れる！ ゲーム制作のためのアプリケーション、フレームワーク、ゲームまとめ
HTML5で誰でもゲームが作れる！？ 最近webで何かを作るためのフレームワークというものがどんどん出てきており、ゲームにしろwebサイトにしろ、さわりを学べばそれを作る組み合わせだけなら抑えることが可能になってきています。 それを実際に使いこなし、またそれで作るものの内容がしっかりしていなければ何人もの人が使ったり遊んでくれるものにはならないわけですが…。優れた構想を持ったクリエイターが自力でゲームを作る、ということは実際に出来るようになっていると言えます。 今回は、それを実現するフレームワークやゲームエンジンと言われているものをまとめて紹介します。プログラミングやCanvasについてはちょっと知識が浅いので、調べたことをまとめるに留めています。今後の勉強課題ということで…。 ゲームエンジンまとめ よくHTML5でゲームが作れる、JavaScriptゲームエンジンというように紹介されるも
HTML5 Canvas Mouse Coordinates Tutorial
HTML5 Canvas Canvas Element Lines Line Line Width Line Color Line Cap Curves Arc Quadratic Curve Bezier Curve Paths Path Line Join Rounded Corners Shapes Custom Shape Rectangle Circle Semicircle Fill Styles Color Fill Linear Gradient Radial Gradient Pattern Images Draw Image Image Size Image Crop Image Loader Text Font, Size & Style Text Color Text Stroke Text Align Text Baseline Text Metrics Text
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cocos2d-html5 Hello World test
Open Source HTML5 and Javascript game engine
IDEA * IDEA
四角の描画テスト：徐々に埋めるやつ - jsdo.it - Share JavaScript, HTML5 and CSS
四角の描画テスト - jsdo.it - Share JavaScript, HTML5 and CSS
ライフゲーム Game of Life - jsdo.it - Share JavaScript, HTML5 and CSS
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
