ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
HTML5はこれからどうなっていくのか ここが違う！サンプルで見るHTML5（6）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 第5回：HTML5で進化したフォーム機能 オープン・ウェブ 本連載では、HTML5のマークアップについてウェブページという視点で解説してきました。しかしこの視点は、HTML5やそれに関連する新たなウェブテクノロジーが扱う範囲のごく一部でしかありません。本連載の最後となる今回は、HTML5を含む次世代のウェブテクノロジーが進む方向性について見ていきましょう。 本連載の第1回では、HTM
HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker
jQueryでsectionとかarticleとかをappendしたときにstyleが反映されなかったという話しを聞いたので調べた＆検証してみたメモ。 デモつくった 調べてみたところ、定義されていない要素をinnerHTMLしてappendChildすると、以下の例の場合IE8以下では開始タグ、テキストノード、終了タグの3つの要素として追加されるとのこと。（html5shivは読み込んでます） var div = document.createElement('div'); div.innerHTML = '<section>section</section>'; document.getElementById('box').appendChild(div); 以下のようにcreateElementすればいける。 var div = document.createElement('div'
ソース付き！HTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」
TOP > WebDesign > ソース付き！HTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」 開発者の間では次世代の規格として注目を集めているHTML5。まだまだブラウザも対応していない部分もあり商業デザインではなかなか使いづらいところもありますが、従来のHTMLと比べてかなり表現できる幅が広く、確実に今後WEBデザインの世界では必要となってくるものだと思います。今日紹介するのはそんなHTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」です。 Design & Code a Cool iPhone App Website in HTML5 レイアウト的なものからJSと組合わえたものまで様々なHTML5のテクニックが学べるチュートリアルがまとめられて
グーグルがHTML5のMicrodataに早くも対応
Microdataは、HTMLにメタデータを埋め込むための記述方法です。HTML5の仕様の一部として策定が開始され、現在はW3CのHTML5仕様からは独立した仕様となっています。 そのMicrodataをグーグルが読み取って「リッチスニペット」に利用すると、ブログ「Google Webmaster Central Blog」のエントリ「Microdata support for Rich Snippets」で明らかにしました。 リッチスニペットのデータとしてMicrodataを読み込み リッチスニペットとは、検索結果に表示される情報です（ただしすべての結果に表示されるわけではありません）。 上記の例（グーグルのリッチスニペットのページから）では、ネット上のレビュー記事をグーグルが自動的に集計して、星の数を表示しています。 このリッチスニペットを構成するために、グーグルはネット上のさまざまな
HTML5のMicrodataとは何か？
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に
IllustratorのaiファイルをCanvas向けのコードに変換するプラグイン - 強火で進め
イラストレータのaiファイルをHTML5のCanvasタグ向けのコードに変換する。イラストレータのプラグインを作成した方が登場したみたいです。 MIX Online:Ai to Canvas Plug-In http://visitmix.com/labs/ai2canvas/index.html パスに沿って回転、拡大縮小、フェードなどの動きをサポートしているとの事です。これは良いプラグイン!!イラレ持って無いですけどw 関連情報 「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 : TechWave http://techwave.jp/archives/51513603.html
【レポート】script要素、asyncとdeferの効果 | エンタープライズ | マイコミジャーナル
The WebKit Open Source Project ChromeやSafariのエンジンであるWebKitの開発版にHTML5のscript要素での策定が進められているasyncとdefer属性の実装が追加された。Running scripts in WebKit - Surfin’ Safariにその旨が記載されているとともに、asyncやdeferを指定した場合にどういった動作が実施されるのかと、デモンストレーションの結果が紹介されている。asyncとdeferの効果を知るサンプルとして参考になる。 ブラウザが次のような外部のJavaScriptファイルを指定したscript要素に到達すると、そこでパース処理を一旦停止し、指定されているJavaScriptファイルのダウンロードを実行する。ダウンロードが完了したらパース処理を実施し、ふたたびHTMLのパースを再開する。ダウンロ
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
HTML5について(関連コラム集)
在来HTMLの次世代版とされている、HTML5について、私見を交えて解説します。 HTML5とは。 HTML5とは、WHATWGとW3Cが共同で策定している次世代のHTML規格です。 もともと、W3CはXHTMLの普及に力を入れ、XHTML 2.0の策定を進めてきました。 しかし、後方互換性を無視した仕様の策定にはウェブブラウザヴェンダから反発があり、その結果大手ヴェンダであるもじら財団, アップル社, オペラ・ソフトウェアの三社でWHATWGが立ち上げられ、より現実的且つ互換性と拡張性を兼ね備えた仕様としてHTML5の規格化に着手しました。 一方、XHTMLが殆ど現場では支持されていないと言う事実(CMSなどの普及でXHTML 1.0文書は確かに増えたのですが、そのどれもが在来のHTMLの代用としての使い方に留まっていて、XMLの利点を生かしたものとなっていない)を突きつけられ、W3Cは
スキンが利用可能なHTML5動画プレイヤー実装jQueryプラグイン「FryPlayer」:phpspot開発日誌
HTML5 Video Player | FryPlayer スキンが利用可能なHTML5動画プレイヤー実装jQueryプラグイン「FryPlayer」 サイトはロシア語っぽく何を書いてあるかは全く分かりませんが、サンプルコードを見れば使えるはずです。 $('video').FryPlayer( options ); で <video>タグ部分をリッチにデコレーションすることが出来るようです。 幅、高さ、スキン、ボリュームのデフォルト値なんかをoptionsに渡せます 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」
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 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
最新ブラウザのHTML5タグへの対応状況をまとめてみた - IT-Walker on hatena
ちょっとしたプログラムを書いて、各メジャーブラウザのHTML5タグへの対応状況を調べてみました。現時点でのHTML5仕様に含まれているタグが、ブラウザにUI要素として認識されるかどうかを調べただけです。これだけでは、HTML5の対応状況としては一部しか調べられませんが、一応の参考として。 間違いがありましたらご連絡ください。 具体的に行った調査方法は、記事の最後を参照してください。 IE8Chrome2Chrome3(Beta)Safari4Firefox3.5Opera10(Beta) div○○○○○○ section×××××× nav×○○○×× article×××××× aside×○○○×× h1○○○○○○ h2○○○○○○ h3○○○○○○ h4○○○○○○ h5○○○○○○ h6○○○○○○ hgroup×○○○×× header×○○○×× footer×○○○××
最近公開のHTML5関連の参考サイト色々まとめ:phpspot開発日誌
最近公開のHTML5関連の参考サイト色々をまとめてみました。 チュートリアル〜チートシートまでをご紹介。 Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine ゼロからHTML5レイアウトを行うためのチュートリアル HTML 5 Reset Stylesheet | HTML5 Doctor HTML5用のCSSリセットスタイルシート How to build a desktop WYSIWYG editor with WebKit and HTML 5 - Ars Technica WebkitとHTML5を使ってWYSIWYGエディタを作成するチュートリアル HTML5 drag and drop in Firefox 3.5 ? 0xDECAFBAD Firefox3.5でHTML5のド
img 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.7.1 img 要素 カテゴリー: フロー・コンテント フレージング・コンテント エンベッディッド・コンテント フォーム関連要素 この要素が usemap 属性を持つ場合: インタラクティブ・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: エンベッディッド・コンテントが期待される場所 コンテントモデル: 空 コンテント属性: グローバル属性 alt - 画像が利用できないときに利用する代替テキスト src - リソースのアドレス crossorigin - 要素がクロスオリジンのリクエストをどのように扱うか usemap - イメージマップに使われる名前 ismap - 画像がサーバーサイドのイメージマップかどうか width - 水平方向の寸法 height - 垂直方向の寸法 text/html におけるタグの省略: 終了タグはありません。 指定可能な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
kujira (@geiniku) | Twitter
汝の隣人のブログを愛せよ | LOVELOG
HTML5.JP - 次世代HTML標準 HTML5情報サイト