HTML5のアウトラインを極めるための6つのルール - Tech Design
こんにちは。@shibe97です。 みなさん、HTMLのアウトラインをちゃんと理解していますか？？ 実はかなり奥が深くて、間違って理解している方も実は多いのではないかと思います。 アウトラインとは文書の階層構造のことを指します。 暗黙的なアウトラインと明示的なアウトラインの二種類が存在します。 暗黙的なアウトラインルール１：暗黙的なアウトラインは、見出しタグを使用すると自動的に生成される以下のように、見出しタグを用いるとアウトラインが生成されます。 この際、h1はh1のレベルを持ったアウトラインを生成し、h2はh2のレベルを持ったアウトラインを生成します。 ルール２：自分自身と同レベル以上の見出しが出現した場合、暗黙的に閉じられる以下のようにh2が生成したアウトラインは別のh2が現れることによって暗黙的に閉じられます。 明示的なアウトラインルール３：明示的なアウトラインは、HTML5のセク
HTML5の子要素・親要素の入れ子のルールがすぐわかるツール
HTMLが、HTML5になってから、ありそうでなかったツール。作りました。 HTML5 入れ子チートシート。 どういうツールか たとえば、「a要素ってsection要素を子要素にすることってできるんだっけ？」とか「h1要素ってdtのタグで囲んでいいんだっけ？」とか思ったときに調べるツールです。 使い方 以下にアクセス。 調べたい要素にマウスポインタを合わす 「親」と「子」が出てくるので、どちらかを押下 色が変わった要素が、その要素が取り得ることのできる要素 ガラケー以外の、だいたいの端末やブラウザで動くはずです。 制作経緯 こういったことが簡単にわかるサイトが見つからず（探しきれていないだけかもですが）、仕様書を見てもわかりづらい。 HTML 4.01 は、ブロック要素とインライン要素さえ覚えていれば、なんとかなりましたが、HTML5からは複雑になってしまいました。 そこで、「なければ作れ
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Flash Professional CC：今すぐ試してほしい！ 新しいHTML5書き出し | ADC Plus
Flash Professional CCをダウンロードする サンプルをダウンロードする 新しくなったHTML5書き出し 12月4日、Flash Professional CCのアップデータが公開されました。Flash Professional CC 13.1では、HTML5コンテンツ開発に関する機能がさらに強化されています。［Toolkit for CreateJS］パネルがなくなり、その代わり、 新しいドキュメント形式「HTML5 Canvas」を追加 従来より多くの描画／アニメーション機能をHTML5コンテンツ制作で利用可能に ［アクション］パネルにJavaScriptを記述してコンテンツを制御することが可能に（CreateJSのコードヒントを表示可能） 作成したコンテンツをHTML5コンテンツ（HTML＋JavaScript／CreateJS）として書き出し などの機能追加や強化が
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して
HTML5でサイトをつくろう
若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか？どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。
Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
Adobe Animate ユーザーガイド Animate の概要 Animate の新機能 ビジュアル用語集 Animate の必要システム構成 Animate キーボードショートカット Animate での複数のファイルタイプの取り扱い アニメーション Animate のアニメーションの基本 Animate でフレームとキーフレームを使用する方法 Animate でのフレームアニメーション Animate でのクラシックトゥイーンアニメーションの操作方法 ブラシツール モーションガイド モーショントゥイーンと ActionScript 3.0 モーショントゥイーンアニメーションについて モーショントゥイーンアニメーション モーショントゥイーンアニメーションの作成 プロパティキーフレームの使用 トゥイーンを使用した位置のアニメーション化 モーションエディターを使用したモーショントゥイーン
はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』 | HTML5でサイトをつくろう
リセットCSSとは 各ブラウザ(IE・FireFox・safariなど)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートのことを『リセットCSS』と呼んでいます。 ブラウザ毎のデフォルトスタイルをリセットする理由 例えばデフォルトのまま文字を表示すると、ブラウザ毎に文字サイズが変わってしまいます。そこで、デフォルトのスタイルをすべてリセットするCSSを読み込み解決します。 ※ただし、リセットCSSは必ず必要というわけではありません。今回、詳しい説明などはいたしませんが、ブラウザのデフォルトスタイルを有効に使っていこうという考え方もあります。 HTML5のリセットCSS XHTML1.0でのリセットCSS いままでのXHTML1.0で主に使用しされていた代表的なリセットCSSは、 YUI LibraryのCSS Reset Eric Meyer’s
MdN Design｜総合情報サイト
「PCはFlashを使用してリッチな動画コンテンツに。ただ、スマートフォンでも簡単な動画は見せたい。」 最近は制作の際、このようなオーダーが増えている。ただ、PCと共通したソースで動画を実装するには、いろいろなブラウザ状況を考慮しなければならない。ユーザーによってはJavaScriptやFlashをオフにしている場合があるからだ。 そのようなユーザーに対しても、代替 要素を表示させ、コンテンツ欠如を避ける対策も行う必要がある。 大きく分けると【1】のようなパターンのときに対応が必要だ。 今回、Flash の表示にはswfobject.jsを使用する。swfobject.jsを使用すれ ば、Flashを表示させたいidを指定すると、そのid内にFlashが埋め込まれる。 JavaScriptやFlashがオフのときは、そのままid内のHTMLが表示されるので、ソースを汚さずに実装が可能、とい
Dreamweaver CS6 の新機能 - Adobe HTML5 特設サイト
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。 本文へ Adobe Dreamweaver CS6 が発表されました。Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。Dreamweaver CS6 には、デスクトップからモバイルデバイスまで様々な画面に適応するコンテンツをデザインするための機能が加わりました。 この記事では、Dreamweaver CS6 の主な新機能や強化された機能の概要を紹介します
Canvasの使い方 - Canvas - HTML5.JP
このコーナーでは、Canvasを使うにあたっての事前準備と、簡単な使い方をまとめました。 ExplorerCanvasのダウンロード Internet ExplorerはCanvasに対応していません。そのため、Googleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードしましょう。0002 ExplorerCanvasダウンロード 2009/03/24現在、ExplorerCanvasの最新版は Release 3 です。excanvas_r3.zip をダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。 HTMLの準備 Canvasを使うHTMLでは、excanvas.jsをロードするようscri
Google Chrome Frame: サイト管理者向けガイド
2013-06-30更新: 2013 年 6 月、Googe Chrome Frame の開発終了 が発表されたのを受け、新しい記事 を書きました。 IE で Google Chrome と同等のレンダリングを実現するプラグイン、Google Chrome Frame が 正式版になりました。ユーザはよりリッチで快適な Web 体験ができるし、サイト管理者としても事実上古い IE のシェアが減ることになって嬉しい、しかもインストールに管理者権限が不要という、ちょっといいプラグインなんですよね Chrome Frame。 とは言えユーザがインストールして使ってくれないことにははじまらないので、この Chrome Frame の利用を促進するためにサイト管理者にできることを紹介します。 ページを Chrome Frame でレンダリングさせる まず、すでに Chrome Frame がインスト
もうこれで迷わないHTML5新要素の使い方 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5では、セクションに関連する要素以外にも、新しい要素が追加されたり、意味が変更されたりしています。今回から数回にわたって、HTML5で新たに登場する要素や、変更された要素について解説します。第6回は、一般的なWeb制作で使用頻度の高い要素と、ルビ関連の要素を取り上げます。 各要素の解説では、冒頭に「カテゴリー」
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
Normalize.css: Make browsers render all elements more consistently.
Mobile HTML5
ドメイン販売中
サポートページ：HTML5 CANVAS ＆ CSS3デザインガイド
Loading...
