HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
<figure>－HTML5タグリファレンス
<figure>タグは、図表であることを示す際に使用します。 ここで言う図表とは、文書の本文（メインフロー）から参照されるようなイラスト・図・写真・ソースコードなどのことです。 図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。 必要ならば、図表にキャプションや注釈を付けても良いでしょう。 図表にキャプションを付ける場合には、<figcaption>タグを使用します。 ■HTML4.01からHTML5へのバージョンアップによる変更点 figure要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <p>カエルの生態に関しては、<a href="#kaeru">こちらの画像</a>でご確認いただけます。</p> <figure id="kaeru"> <img src="../images/kae
Sencha、HTML5の利用状況を発表
Senchaは2月12日(米国時間)、「The State of HTML5 Development in the Enterprise」においてHTML5開発コミュニティのビジネスアプリケーション開発者向けに実施した開発調査の結果を伝えた。2,128人のビジネスアプリケーション開発者に調査したとしており、HTML5やこれに付随する技術の利用状況や今後の展望などが説明されている。 調査結果からはHTML5およびこの関連技術の活用が進んでおり、今後さらに採用の幅が広がる傾向にあることがわかる。また、開発対象となるデバイスがPCのみやスマートフォン、タブレットデバイスのみといったパターンから、PC、スマートフォン、タブレットデバイスのすべてのデバイスに対して同時に開発を実施していることも見えてくる。この傾向は今後も続くものとみられ、HTML5の重要性はますます増加するものと考えられる。 一方、
Web標準化の関係者たちが語る、標準化の現実と前進のための処方箋（前編）。HTML5 Conference 2013
Web標準化の関係者たちが語る、標準化の現実と前進のための処方箋（前編）。HTML5 Conference 2013 ふだん私たちが接しているWeb技術は、W3CやIETFといった国際的な標準化団体でさまざまな議論が行われた上で決定された仕様に基づいている。 その標準化団体とはどういうもので、標準化作業に伴う苦労はどのようなものなのか。実際に標準化を行っている、もしくはそれに関連した人たちが議論をするセッション「Spec EditorとContributorが語るWeb標準化と開発者への期待」が、11月30日に都内で開催された「HTML5 Conference 2013」で行われました。 ディスカッションの内容を、前編と後編の2本で紹介します。 Spec EditorとContributorが語るWeb標準化と開発者への期待 Googleの及川です。こんな地味なセッションで立ち見が出るのは
sectionとarticleの決定的な違い
具体的にHTML5のマークアップ例に入る前にsectionとarticleの違いについてキチンと説明しておかねばなるまい。 文章構造を示す上では非常に便利でSEOへの期待も高まるこの２つの要素ですが 違いについて悩むケースが多く、また某参考書では明らかに説明が間違っているものもありました。 そこで、今回はITかあさんのブログを例に、sectionとarticleの違いを説明しておきたいと思います。 ITかあさんトップページ まずはITかあさんトップページの画像のキャプチャをご覧下さい。 (説明しやすくするために一部はしょってあります。) 特にnavや、asideはそれほど悩みませんね。 どれがarticleなのか どれがarticleなのかが理解できれば、残りはsectionになりますから、先にarticleから考えましょう。 articleとは『それ単体で完結出来る、独立したもの』なので
HTML5のarticleとsectionの違いを書いてみた - kojika17
article要素とsection要素の違いについては、様々なブログなどで書かれている内容だとは思います。 ただ「もう少し内容があったら、他の人もわかりやすいのにな」とよく思っていたので、策定中止になったXHTML2.0にも触れつつ、HTML5のarticleとsectionの違いについて書いてみます。 HTML5とXHTML2.0 2009年までHTML5とXHTML2.0と策定が行われていましたが、XHTML2.0は策定中止となり、HTML5に統合されるという形になりました。 しかしsection要素を説明する上で、XHTML2.0の方が分かりやすいので、現在は策定は中止されていますが、XHTML2.0のsection要素の使い方を見て頂きます。 XHTML2.0のsection要素とh要素(策定は中止されています) XHTML2.0ではh1～h6(以下、hxとします)までの見出しレベ
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文
![[HTML5]アウトラインで迷わない！ sectionと見出しについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
HTML5 Conference 2013 講演資料まとめ #html5j
※本サイトではアフィリエイト広告を利用しています。記事内および商品リンクにはプロモーションが含まれる場合があります。 こんにちは、星影（@unsoluble_sugar）です。 11月30日に開催された「HTML5 Conference 2013」の発表スライドや動画などの講演資料をまとめました。 ※リンクミスや追加情報などありましたら、コメントまたは@unsoluble_sugarあてにお知らせいただけるとありがたいです 基調講演 次世代Web、深まる。広がる。 関連記事 村井純教授。IT戦略は前倒しで実現される。7年先の夢を語ろう！ HTML5 Conference 2013招待講演Webのモバイル対応には、Webが社会に定着する上での真の問題や課題が隠されている。HTML5 Conference 2013基調講演2000人のイベント開催に成長した、HTML5コミュニティの深まりと広が
はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
さよなら手作業・人海戦術！ HTML5時代のツール「Selenium2」でWebシステムのテストを自動化
本シリーズは、WebブラウザをUIとして利用した業務システムやアプリケーション（以下、Webシステム、Webアプリケーション）のテストをテーマとして、Webブラウザを使ったテストを自動化するOSSのツール「Selenium2」を紹介します。業務システム開発の現場で適用してきたノウハウを元に、これまでSelenium2について知らなかった人から以前使った経験がある人まで、より実践的な「使える」内容を盛り込んでいきたいと思います。 本シリーズのスコープと対象読者 本シリーズはWebシステム・Webアプリケーションのテストの中でも「Webブラウザを操作して実施するテスト」をスコープにしています。開発工程としては、1モジュールとして単体テストに位置付けられる場合もあれば、複数のモジュールやシステムと連携して結合テストや総合テストに位置付けられる場合もあるでしょう。これらのテストのことを、本シリーズ
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
HTML5/JavaScriptによる電子書籍風フリップアニメーション·Turn.js MOONGIFT
Turn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（BSD License）です。 電子書籍というとePubファイルが有名ですが、HTML5でも実現は可能です。特に紙をめくった時のようなフリップアニメーションが欲しい時にはTurn.jsを使ってみましょう。 デモです。幾つかのサンプル書籍が掲載されています。 開きました。 フリップしています。 別な書籍。マウスをもっていくと端が折れ曲がります。 こんな感じで斬新な表示も。 マガジン風の使い方もできます。 デモ動画です。 Turn.jsではめくる操作はもちろんのこと、拡大表示もサポートされています。デスクトップブラウザはもちろん、iPhone/iPadによる操作も可能です。コンテンツはAjaxによる動的取得にも対応しています。一部HTML5非対応ブラウザでも使えるようになっており、対応ブラウザはIE8からとなって
Another HTML Lint 5
Another HTML-lint 5 is a free checker tool for HTML syntax. You may freely reuse and repost this as long as it is for non-profits. Please make sure to link to this website and specify explicitly your (website manager's) location and contact details. Advertising or any service associated with advertising is forbidden. Note: This is currently Beta version. Please contact us at the following e-mail i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Boilerplate: The web’s most popular front-end template
hp-stylelink.com
HTML5/CSS3のテンプレートのまとめ | コリス
http://www.hp-stylelink.com/news/2013/10/20131001.php
http://events.html5j.org/conference/2013/11/
これが全部無料！？フリーで使えるレスポンシブ対応のHTML5テンプレート
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
