普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開
Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- body content --> </div> <dialog> <h1>Add to Wallet</h1> <label for="num">How many gold coins do you want to add to your wallet?</label> <div><input name=amt id="num" type=number min=0 step=0.01 value=10
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
続・目指すのはぶっちぎりの速さ! HTML5版 Cacoo で刷新されたデータアーキテクチャを紐解く | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Cacooの平山です。現在、僕たち Cacoo チームは脱Flash・ HTML5 化に向けて最終の追い込みの真っ最中です。そんな中ではありますが、前回の「ぶっちぎり」記事では、HTML5化に向けた描画技術としてSVGを選択したことをお伝えしました。今回は、HTML5版のもうひとつの改善ポイント「データ面での刷新」を紹介したいと思います。 Cacoo のデータ形式や構造の刷新・JSONフォーマットへの移行 HTML5版では、描画にSVGを採用するという変更だけではなく、抜本的なデータ形式や構造の刷新も行いました。これには以下3点の理由があります。 Flash版ではAMFというFlashに特化したデータフォーマットを採用している 図に含まれるデータ量に応じて、パフォーマンスが低下しやすい構造である サーバー内でデータを処理しにくい 1点目はFlashから脱却するにあたり対応必須な
Flashが教えてくれたこと、HTML5で失ったもの。（仮
イントロ 上のはただの画像です。もしクリックした人がいたらすいません。 私、この業界に入った時は20歳くらいでした。 その時はソシャゲの始まりで、まだガラケーだったのでFlashLiteでゲームを量産してました。（知る人ぞ知るコ◯チとか） ３年前くらいにアプリとかHTML5に移行してきっちりしたものとかFlashっぽいものを作ってます。 さて、今回のネタですが、 FlashLiteネタとかAdobeAirネタとかありそうなんですが、思い出すの面倒なんで、 Flasherってなんだったんだろうっていう感想文を残したいと思います。 Flasherが担ってた仕事 わかりやすいように、極端めに書いてますのでご容赦ください。 Flasherが現れる前のデザイナーさんとプログラマーさん デザイナーさん ヴィジュアル担当。 カッコいいWebサイト探しが大好き。 稀にプログラムが出来る人がいるものの、小難
Random Text Shuffle
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
HTML 5.1: Changes
Changes This section summarises substantial substantive changes between this specification and [HTML5]. Features added The picture and srcset attributes allow responsive image selection. The details andsummary elements enable authors to provide extended information that users can choose whether to read. The menuitem and type="context" attribute value enable authors to add functionality to the brow
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
Finishing HTML5.1 … and starting HTML 5.2
Author(s) and publish date By: Charles McCathie Nevile Published: 2 June 2016 Skip to 13 comments Since we published the Working on HTML5.1 post, we've made progress. We've closed more issues than we have open, we now have a working rhythm for the specification that is getting up to the speed we want, and we have a spec we think is a big improvement on HTML5. Now it's time to publish something ser
HTML5 CanvasとiPadで実現する3Dホログラム - ICS MEDIA
みなさんは「3Dホログラム」をご存知でしょうか？ 空間に映像を投影するというもので、スター・ウォーズなどSFのイメージがあるかもしれませんが、近年ではTIFFANYのプロモーションやマイケル・ジャクソンのライブなどでも使用されている技術です。 近未来感のある技術ですが、スマートフォンとCDケースで簡易的なものが自作できると2015年夏に話題になりました。これはCDケースの透明なプラスチック板を使って投影機を作成し、スマートフォンの画面の上に設置し、専用の動画を再生して投影するものです。 週末に子供と遊ぶネタにちょうどいいなと私も作ってみようと思ったので、投影する映像をHTML5 Canvasで実現してみました。 投影機の作成 投影機は、台形型（上辺1：下辺6：高さ3.5の比率）の透明な板を4枚組み合わせて作成します。今回はiPadのサイズに合わせて、「2.5cm × 14.8cm × 8.
PuzzleScript - an open-source HTML5 puzzle game engine
PuzzleScript! PuzzleScript is an open-source HTML5 puzzle game engine. Make A Game First Steps Gallery
HTML5製アプリParticle Developの開発の裏側〜ElectronとAngular 2で開発効率が劇的に向上―CreateJS勉強会発表資料（後編） - ICS MEDIA
HTML5製アプリParticle Developの開発の裏側〜ElectronとAngular 2で開発効率が劇的に向上―CreateJS勉強会発表資料（後編） 本記事は2016年1月26日（金）に開催されたCreateJS勉強会 （第7回） の発表資料「CreateJSで開発するクロスプラットフォームなアプリ開発〜ElectronとPhoneGapで広がる可能性〜」の後編となります。前編記事「高まるHTML5製アプリの需要」に続けて本記事ではHTML5製デザインツール「Particle Develop」の開発事例を紹介します。 HTML5製デザインツール「Particle Develop」とは 今回、Particle Developという美しいパーティクルを作れるHTML5製のデザインツールを作成しました。雪や炎、キラキラなどのパーティクル表現を作成でき、ベクターグラフィックスとなって
高まるHTML5製アプリの需要 ―CreateJS勉強会（前編） - ICS MEDIA
2016年1月、CreateJS勉強会(第7回）がICTCOで80人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「CreateJSで開発するクロスプラットフォームなアプリ開発〜ElectronとPhoneGapで広がる可能性〜」のスライドを一部抜粋して記事という形で公開します。 なお、前編記事「高まるHTML5製アプリの需要」と後編記事「HTML5製アプリParticle Developの開発の裏側〜ElectronとAngular 2で開発効率が劇的に向上」の二部構成にしています。前編となる本記事では、Web技術を取り巻く最近の事情について分析し、HTML5製アプリの需要の高まりについてまとめています。 Web技術を取り巻く事情が好転している 近年、Web技術を取り巻く環境は好転しています。4つの観点から見てみましょう。 1. HTML5の需要が高まっている 簡単に
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
HTML Cheat Sheet
Interested in HTML? Awesome. Having a proper cheat sheet will make your life a ton of easier. When I started out with web development (back in 2004), I used to have a cheat sheet, too. Now it’s all in my head, though. Whether you’re a savvy web developer or just a trying to experiment a little, feel free to use this HTML cheat sheet below. I originally made it for my self, but since the launch of
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... -
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パーティクル編集ツール Particle Develop - ICS
[PDF] Electronの倒し方
Ionic Framework - The Cross-Platform App Development Leader
