HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい ハブろぐ - havelog.ayumusato.com
Tweetボタンのdata-urlとかdata-text属性はアリなのか？ 結論は、本エントリーのタイトルの通りHTML5の仕様の中では定義済みということでアリでした。エントリーの下の方で情報の出所を紹介してます。以下は、後半まで逐次的な調べ物メモです。 以前、公式Tweet Buttonを早速試した！で、Tweetボタンを紹介しましたが、そのときから気になっていた素朴なギモン。 HTMLの属性って、勝手に拡張していいの？ Tweetボタンの場合、data-url, data-via, data-text, data-related, data-count のようにHTMLでは未定義（と言っていいのか分かりませんが）の、属性をベタベタ貼って動作させています。 確かに、こうやってJS等で利用する情報を好きに定義して良いなら、かなりラクチンな訳ですが、これはHTML的にはやっても良いの？？とい
HTML5に踏み出せない人に捧げる、HTML5を使う10の理由
HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 Top 10 Reasons to Use HTML5 Right Now [ad#ad-2] 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これからはHTML5 10. アクセシビリティ HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にrole
[HTML5]基本 | CoolWebWindow開発日誌
HTML5では、HTMLの書き方でもXHTMLの書き方でもできます。例えば、<br />というように書けます。 もっと言えば、MathMLやSVGといったXMLベースのものも記述できます。ただ、IEでは、Content-Typeが「application/xhtml+xml」であると認識してくれないのですが、｢text/html｣にしちゃうと、MathMLやSVGを認識してくれないという悩みものです。 ■DOCTYPE宣言 HTML5からは、HTMLのバージョンという概念がありません。つまり、DOCTYPE宣言の書き方によって、ブラウザのレンダリングに違いが出てくるとかがなくなります。 <! DOCTYPE html> ■XML宣言 HTML5をXMLベースで記述する際は、XML宣言を記述します。 DOCTYPE宣言より前に記述します。（ファイルの1行目に記述する。） <?xml vers
![[HTML5]基本 | CoolWebWindow開発日誌](https://cdn-ak-scissors.b.st-hatena.com/image/square/24133cdb3e75486beae9b818d03fadade830c0fa/height=288;version=1;width=512/http%3A%2F%2Fimaging.jugem.jp%2Ftemplate%2Fimg%2Fjugem_og-image.png)
Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ！というデザイナーさんは覚えておくとよさそう
Tim Bray: 「URLに#!入れるな」 - karasuyamatenguの日記
Tim Bray(GoogleのAndroid応援団長)が「#!」の入ったajax用URLを使用を批判している。 http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch new: さらならる「#!」URL批判 例にtwitterのtwitter.com/#!/timbrayを挙げている。 #!の働き サーバ側は#!の前までしか見えない。上の例だとサーバはtwitter.com/のリクエストを受ける #!以降はブラウザの中のジャバスクリプトが解釈する 何故#!を使うのか ajaxのアプリは古いブラウザでは基本的にURLを変更することができない… ただし#(フラグメント)以降はブラウザ内のJavaScriptからでも変更可能 なので、ajaxアプリケーションが自分の状態をURLバーに表示するために使われるようになった。 つまり
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
iPad上でHTML5 Widgetを走らせて遊ぼう
昨日の「HTML5: W3C Widget とその応用を考える会」は参加者も多く、私自身とても良い勉強になったが、そこでも予告した通り、iPad発売を記念してWidgetのサンプルをいくつか用意したので、ぜひともお試しいただきたい。 手順は以下の通り。 ステップ１. iPadにCloudReadersをインストールする（iTunes ストアへのリンク） ステップ２. 以下のWidgetをダウンロードする Download 3dClock.wgt (2.5K) ー CSS3を使った３D時計 Download TimeTrial25.wgt (7.8K) ー タイムトライアルゲーム Download JSCalc.wgt (3.4K) ー 電卓 Download QuadraBench.wgt (2.5K) ー Canvas のベンチマークプログラム ステップ３. iPadをPC/Macに繋げ
http://people.mozilla.com/~prouget/demos/tracker/tracker.xhtml
Args: Threshold (0 -> 255) Work factor Zoom factor Sensibility Display video Display diff Matrix: Sobel Kirsch Harris fps
HTML5 Video 3D
3D manipulation of HTML5 video, best viewed in webkit based browsers. Return to Craftymind Article Due to popular request, the ogg video is now 640 x 360, don't hold me responsible for crashing your browser ;) You may need to reload the page if video isn't streaming properly. Video courtesy of Big Buck Bunny
CanvasMol
X Check example molecules. Import PDB/SDF/MOL files. Export to PNG image. Drag widgets around. Drag molecule to rotate. Mouse wheel to zoom. Toggle automatic rotation around X,Y,Z axis. Try different rendering options. Warning: complex molecules are very slow, your browser may freeze occasionally if you enable autorotation. Like this? Check other demos on my site Follow me on Twitter Feedback
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building the Perfect Logo StripCreate a visually balanced logo strip by adjusting logo heights based on aspect ratios using CSS. By scaling logos dynamically, you can display a harmonious row of diverse logos without manual tweaking.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ambilight
Sketchpad