HTML5 で追加された属性の中からマイナーっぽいのを紹介してみる
HTML5 から追加された属性の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 この記事は、HTML5 Advent Calendar 2013、11日目の記事です。 去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 （要素じゃなく属性の方） の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。 placeholder 属性 最初なのであまりマイナーっぽくないやつから。その名の通り
引用元の表記
blockquote要素における引用元の表記をどうマークアップするかでWHATWGとW3Cの仕様で違いが出たので、俄然盛り上がってきた。昨日公開されたHTML5 Doctorの記事を始め、様々な人が見解を書いている。概ねシンプルなW3C版が優勢な気がする。どう決着するかには関心があるものの、現状どうするべきかについてはよくわからなくなってしまったので、それぞれどういうコードになるのかとその思想の違いをメモだけしておく。 WHATWG版では以下のようにfigure要素を使い、figcaption要素で引用元の表記をマークアップする。このウェブサイトではこっちを採用中。 <figure> <blockquote> <p>引用(いんよう、英語：citation, quotation)とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。
History API - Dive Into HTML5 (日本語訳)
Manipulating History for Fun & Profit ❧ Diving In ブラウザのロケーションバーは世にある UI のなかで最もギークなもののひとつだろう。URL はビルボードや電車の車体、はたまたグラフィティにまで現れる。戻るボタン (ブラウザでもっとも重要なものだ) と組み合わせれば、Web と呼ばれる複雑に絡みあったリソースの集合を行き来するとても強力な手段となる。 HTML5 の History API はブラウザのヒストリ情報をスクリプトから操作する機能だ。この API の一部にはヒストリを行き来する機能があるが、これは以前の HTML の頃より存在していた。HTML5 では、ブラウザのヒストリにエントリを追加する機能、ページの更新なしにロケーションバーの URL を書きかえる機能、ユーザーが戻るボタンを押しそのエントリがスタックから削除される際に発火
HTML5で情報最適化／視覚化＆WebRTCで変わる未来～QCon Tokyo 2013レポート
ストラクチャファーストとしてのHTML5、ビジュアライゼーションに有効なHTML5と関連技術／ライブラリ8選、WebRTCの概要や3つのライブラリなど。 2013年4月23日、InfoQJapan主催のカンファレンス「QCon Tokyo 2013」が開催された。本稿では、その中からモバイル／HTMLカテゴリの3つのセッションの模様をダイジェストで紹介する。 HTML5と情報表現の最適化 WebRTCで変わるWebの未来 HTML5でできる多彩なビジュアライゼーション モバイル／HTMLカテゴリ以外のセッションについては、以下を参照してほしい。 fluentd、Hubot、DDD、Fab、JSLintに見る最先端の開発手法～QCon Tokyo 2013まとめレポート HTML5と情報表現の最適化 QCon Tokyo 2013の「HTML／モバイル」カテゴリ最初のセッションは、Webディ
Web Components普及の夜明け！？Polymerを試してみた。 | OpenWeb
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
HTML5 History APIについて
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 History APIとは History APIはHTML5の機能のひとつとなります。Historyとは履歴のことで、historyという名前のオブジェクトで存在します。 ブラウザの戻る進むボタンのイベントを取得してページの内容を動的に変えることができるものです。 まず、historyについてなんですが、history自体は昔からあり、いくつかメソッドを持つオブジェクトでした。よく使われているメソッドの一つにhistory.backが存在します。 history.back(); では実際に用意しましたので押してみましょう。以下のボタンを押すと一つ前に見たページと戻るかと思います。 <input onclick="history.back()" type="button"
The Basics of Web Workers | Articles | web.dev
The Basics of Web Workers Stay organized with collections Save and categorize content based on your preferences. The problem: JavaScript concurrency There are a number of bottlenecks preventing interesting applications from being ported (say, from server-heavy implementations) to client-side JavaScript. Some of these include browser compatibility, static typing, accessibility, and performance. For
こてさきAjax:Chromeから綺麗に消えた Web Intents。その理由を追ってみる - livedoor Blog（ブログ）
2012年も残すところあと1週間あまり、明日はクリスマスです。今年1年はWebとデバイスとの連携を中心に色んな活動をしてきました。「最新のWeb技術（Chrome の Socket API）を用いるとブラウザから直接TVを操作できる」ことを紹介し、それと Web Intents を組み合わせると「YouTubeで検索したビデオを、テレビで視聴することができるよ」といったデモ(内容は、下のYouTubeをチェックしてみてください)を紹介してきました。 しかし、残念ながら（たぶん）2012年12月18日以降のChrome canaryで、Web Intents が使えなくなりました(Chromiumの対応Issueはこれ)。10月末ぐらいから、chorme://flags で「有効」にしないとWebページからは使えなくなっていた（Chrome の Web Apps では使えていました）のですが
Shumpei Shiraishi's Weblog: Web開発を革命する（かも知れない）Web Componentsという仕様について
2012年12月25日火曜日 Web開発を革命する（かも知れない）Web Componentsという仕様について Web Componentsは、現在のところ余りまとまった日本語の情報がないようですが、Web開発を大きく、本当に大きく変える可能性を持つテクノロジーです。 Web Componentsは、現在のWebが抱える大きな問題点を解決する手段としてW3Cで仕様が策定中です。仕様策定を主導しているのはGoogleで、現時点ではGoogle Chrome（WebKit）がWeb Components（の一部）を実装している唯一のブラウザです。 Google Japanのエンジニアも、Web Componentsの実装には深く関わっているとのことなので、そのうち日本語の情報も充実してくると思われますが、本エントリはそれまでのつなぎ、ということで書いてみたいと思います。 しかし、Web Co
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #2 WebStorage | DevelopersIO
そんな訳で、HTML5のWebStorageに触れてみることにします。 ※WebStorageと一言で言っても、セッションストレージとローカルストレージがある訳ですが、今回はローカルストレージに焦点を当てていきます。 前置きのようなもの ネイティブアプリケーションの持つアドバンテージのひとつに、アプリ特有のデータや状態を永続的に保存できるというのがあります。 その方法は、iniファイルやXMLファイルなど、いくつかの種類があります。 対するWebアプリケーションは、Cookieをローカルストレージとして使うのが長らく一般的とされてきました。 しかしこれには以下のような欠点があります。 CookieはすべてのHTTPリクエストに含まれる そのため不要なデータを毎回送信してしまうので、Webアプリケーションのパフォーマンス低下を招く SSL状況下でない限りデータが暗号化されないので、何かと危な
スマホアプリ開発にも役立つHTML5の8つの技術
前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンなWebの技術でスマートフォン向けアプリを開発」という動きが強くなってきています。そして、オープンなWebの技術を語るときに欠かせない存在のひとつとしてHTML5が挙げられます。 今回はスマートフォン向けアプリケーション開発の観点からHTML5をおさらいしてみましょう。 1. HTML5の8つの特徴的な技術 HTML5には「セマンティックス」「オフライン＆ストレージ」「デバイスアクセス」「コネクティビティ」「マルチメディア」「3D、グラフィックス、エフェクト」「パフォーマンス＆インテグレーション」「CSS3」という8つの特徴的な技術があり、各技術を表すロゴも決められています。 以下では特に、これら8つの技術を使うとスマートフォン向けWebブラウザで何ができるのかについて、簡単に振り返ってみたいと思います。 1）セマンティ
meter要素のスタイリングについてのメモ 2012年10月
2011年1月27日に「meter要素のスタイリングについてのメモ for Webkit & Opera」という記事を書きましたが、先日リリースされたFirefox 16もmeter要素に対応し、またWebkitの指定方法も変更されていましたので改めてメモしておきます。 なお、前回同様にOperaについてはスタイリングの方法が分かりませんので（まだないっぽい）、WebkitとFirefox向けの指定方法となります。 時間のある方は前の記事も読んでおくと理解しやすいかと思います。 Webkit向け::-webkit-meter-inner-elementこれはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。 meter要素の中の部分を指定します。::-webkit-meter-barメーター自体を指す擬似要素です。バーの背景などはここで指定します。 以
使って欲しい 3 つの HTML 5 — ruby, details, scoped style
HTML 5 には面白い新機能が沢山ある。その中で、特にブロガーが使うのに便利そうな 3 つの新機能について紹介したい。 ルビ ruby 要素はテキストにルビを振る。古い HTML 時代から存在しているので、見かけることは多いけれど、HTML5 のルビはシンプルなフォーマットで書く様になっている。 <ruby>文字 <rt>ルビ</rt></ruby> たったこれだけ。ただし、これだとルビ非対応のブラウザーでルビ文字が連続して現れる。例えば、次の様に入力すると <ruby>都 <rt>みやこ</rt></ruby> 非対応ブラウザーでは 都みやこ と表示されてしまう。これは見苦しいので、次のテンプレートをぼくは使っている。 <ruby>文字<rp> (</rp><rt>ルビ</rt><rp>) </rp></ruby> こうしておくと、ルビ対応なブラウザーでは rp 要素内が消え、非対応な
サンプルで学ぶHTML5の仕様変更要素・中編 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5には、新たに加わった要素だけでなく、従来とは意味や使い方が変わった要素があります。引き続き、意味や、使い方に変更があったり、注意点が加わった要素を解説します。 各要素の解説冒頭に登場する「カテゴリー」と「コンテンツモデル」については、第5回を参照して復習してください。 HTML5のグローバル属性 以降の解説で
Microformats、RDFa、Microdataとschema.orgとリッチスニペット
リッチスニペットや構造化データについて調べてたら、横断的に知る必要があると思ったのでそれらをまとめました。 Microformats、RDFa、Microdataからschema.org、リッチスニペットまで。 リッチスニペットや構造化データについて調べてたら、 横断的に知る必要があると思ったのでそれらをまとめました。 Microformats、RDFa、Microdataからschema.org、リッチスニペットまで。 タイトルうまくまとめられなかった… ※理解8割程度なので間違いありましたら指摘して頂けると助かります セマンティックWeb 通常のHTMLやXHTMLでは文書構造を表すことができますが、 個々の意味までは伝えることができません。 例えば以下のようなHTMLがあります。 &lt;div&gt; 私の名前は吉良吉影です。 &lt;/div&gt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://css-tricks.com/modular-future-web-components/
いま使われているHTML5と、これからのHTML5
WAI-ARIAの誕生と現状 | コラム | ミツエーリンクス
Loading...