Some have embraced it, some have discarded it as too far in the future, and some have abandoned a misused friend in favor of an old flame in preparation. Whatever side of the debate you’re on, you’ve most likely heard all the blogging chatter surrounding the “new hotness” that is HTML5. It’s everywhere, it’s coming, and you want to know everything you can before it’s old news. Things like jQuery p
HTML5で正規表現がサポートされる、といったことをきっかけに、正規表現はプログラマだけでなくWebクリエイター全体のスキルとして求められていくものになっていくのではないでしょうか(参考:あまり知られていないけれど、HTML5では正規表現が使えるようになる )。 ここではそうした正規表現の初学者や、一度挫折したけど再入門したい人、そしてより高度な内容をマスターしたいすべての人のためのリソース集を作りました。 初学者向けには「はじめての正規表現」 「はじめての正規表現」は、文字通り正規表現という言葉は知っていても中味はよく分からない、という初学者の方にぴったりのコンテンツ。紙芝居形式のプレゼンテーションで楽しく正規表現について把握できます。 はじめての正規表現 初学者の方には、次の2つの記事も手っ取り早く読めて概要を把握できますので紹介しておきます。 使うほどに良さが分かる正規表現(1/2)
この記事では、11月24日付けのHTML5ドラフト仕様書から、第5章 Microdataの一部を訳したものです。 この仕様はまだ策定中のもので、原文中にもいたるところに「This section is non-normative」(これは規定ではない)と表記されており、今後変更される可能性があります。 この仕様書を基にMicrodataを分かりやすく解説した記事として1つ前の記事「HTML5のMicrodataとは何か?」を書きましたので、併せてご参照ください。 以下から始まる抄訳は、自由に引用、転載していただいてかまいません。その際にできれば出典としてこの記事へのリンクを貼っていただけると幸いです。 5 Microdata 5.1.1 Overview コンテンツの中にマシンリーダブルなラベルをつけたい、といった要求が時折ある。例えば、汎用のスクリプトがそのページに特化したサービスを提供
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります(というのはあくまで例です)。 Microdataとは、文書の内容に対して機械に
World Wide Web Consortium(W3C)は、ブラウザでファイルの操作性を高めるために使用できるインターフェースの草案を発表した。これは、ウェブサイトのインターフェースを徐々に高度化させ、磨きをかけることを目指す、一連のステップの1つだ。 このFile API草案では、ブラウザやウェブサイトでファイルをうまく処理できるようにするための、数多くの方法が規定されている。その中で特に重要な点は、写真共有サイトやウェブベースの電子メールなどで、複数のファイルを選択してアップロードできることだ。そうした作業は現在、Adobe Systemsの「Adobe Flash」に頼ることが多い。 しかし、別の面もある。例えば、Fileインターフェースでは、動画ファイルなどバイナリデータの生のパッケージである「Blob」の使用を制御できる。Googleは、ブラウザプラグイン「Google Ge
14ヶ月ぶりに uupaa.js をリリースします。 内容は、 HTML5 タグのサポート HTML5::Canvas CSS3 プロパティのサポート Gradients, Rounded corners, Drop shadows, Multiple backgrounds, Reflection Auto Viewbox IE boost 透過png, max-width, position: fixed, position: absolute バグの修正, opacity -uu-display: table, -uu-text-shadow, -uu-box-effect, CSS3 Selector Ajax, DOM, Event, Tween, Drag&Drop, UI, コンディショナルセレクタ 秘密の機能 です。 以下の spinoff プロジェクトの成果を取り込んでい
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」(Webkit系)「-moz-」(Mozilla系)「-ms-」(IE系)などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
ウェブで見かけた文字が、やたら気になることがあるので 作ってみました javascript:location.href = 'http://www.fileformat.info/info/unicode/char/' + (function(r){ var n = r.startContainer; var p = r.startOffset; return (n.nodeType == 3) ? n.nodeValue.charAt(p) : n.childNodes[p].textContent.charAt(0); })(getSelection().getRangeAt(0)).charCodeAt(0).toString(16) + '/index.htm'; void(0); 使い方は簡単 気になる文字を選択してブックマークレットを実行するだけ! 対応ブラウザ HTML5 t
久しぶりに uuAltCSS.js の話を。 内容的には HTML5 + CSS3 + レイアウトデモ - latest log の続き。 uuAltCSS を導入すると古いブラウザでも box-shadow などの CSS3 の機能が利用可能になります。 ただ、uuAltCSS 上で box-shadow を利用する時は、影を描画するスペースを確保する目的で、本来は不要な見栄え用のdiv要素(viewbox)を文書構造に入れ込む必要がありました。 本来の HTML <div> コンテンツ </div>viewbox を追加した HTML <div class="viewbox"> <div> コンテンツ </div> </div>例: http://d.hatena.ne.jp/uupaa/20090820/1250742374 難点が2つ HTML5 + CSS3 をバリバリ利用したデ
HTML 5の最初の大きな目的の1つは、主要なHTMLフォーム要素を現状の潮流に合うように変更することでした。この記事では、HTML 5の草案に導入されている主要な新しいフォーム要素と既存要素の変更点を説明し、HTML 5の仕様が現在までにどれくらいこの目的を達成しているかを解説します。 はじめに ほぼすべてのWebアプリケーションにとって、フォームはなくてはならないものになりましたが、HTMLフォームの主要な要素は13年近くも前のものです。HTML 5の最初の大きな目的の1つが、現状の潮流に合わせてこれらの要素を変更することであったのも不思議ではありません。 W3Cが最初にXHTML仕様を策定したとき根底にあった目標の1つは、XMLコンテンツの処理に適したフォームアーキテクチャを作ることでした。そこで2002年にXFormsが開発されました。ところが、HTMLコミュニティの多くの人からは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く