Web Design and Web Development : うやむやだったHTML5の文書論理構造をきちんと考えてみる | mnemoniqs’log.
iPhoneやandroidの案件ばっかりの今日この頃。 HTML5を使用することが多くなってきましたが、文書論理構造となると少しうやむやなところがありました。 <header>や<footer>などは特に違和感なく使えますが、<section>や<article>になると少し自信がなかったりするので、改めて見直してみます。 HTML5 Element Flowchart 『HTML5 文書論理構造』で探してみると、「HTML5 Element Flowchart 」なる画像が公開されていました。これがすごくわかりやすい。 HTML5で使用するタグを、消去法でマークアップしてます。 ではさっそくスタート。 1. それは、主要なナビゲーションブロックですか？ Yes <nav> で囲む グローバルナビゲーションやフッターナビゲーションなどに使用。 No 2へ 2. それは、自分自身だ
[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
2130703450443574201?keyword=HTML5
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
メイキング「NERV極秘資料 - 電力使用状況」こと技術解説 - 甘味志向＠はてな
NERV極秘資料 - 電力使用状況 先日、東京電力の電力使用状況をエヴァンゲリオン風デザインで表示するWebサイトを作ったものが、あちこちで反響を頂きました。 ねとらぼ：「NERV専用監視装置」で東電の電力状況をチェック エヴァ風サイト登場 - ITmedia NEWS NERVの一員になったつもりで節電！ エヴァ風電力使用状況メーター | ギズモード・ジャパン Twitterでは16000以上ツイート頂けたようです。 http://topsy.com/kanmisikou.net/lab/power/ こちらの、はてなブックマーク週間ランキングでもIT・コンピュータカテゴリ2位を頂きました。ありがとうございます。 http://b.hatena.ne.jp/ranking/weekly/20110321/it これだけの反響を頂きましたし、せっかくなのでWebアプリを作る工程を解説します
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
iOS向けゲームが15分で開発できる、高速HTML5ゲームエンジン「IMPACT」登場 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] 先日、リリース間近とお伝えしたHTML5ゲームエンジン「IMPACT」が12月21日未明、正式に公開となった。同エンジンで開発されたゲームは、iOS上では60フレーム/秒を実現するとされており、HTML5対応のウェブブラウザであればプラグインなどをインストールする必要なく実行できるという特徴を持つ。サイトには、効率の良い開発スタイルを説明するビデオやサンプルソースコードなどが公開されている。ライセンスは価格は99ドル。 エンジンを開発した独Dominic Szablewski氏は、HTML5に対応したモダンブラウザ上で高速に動作するゲーム「Biolab Disaster」を公開、その開発のために使用したエンジンを一般に提供すると告知していた。今回の正式リリースで、このゲームもアップグレード。公言通り、iOS上でも快適に動作するようになっている。 lMPACTは、HTML
GoogleがHTML5の実験場を公開、学習からコードの実行まで 【増田(maskin)真樹】 | TechWave（テックウェーブ）
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 米Googleは現地時間の6月22日、HTML5開発を支援するサイト「HTML5 Rocks」を公開した。 サイトではHTML5開発の各種情報のほか、チュートリアル、そしてサイト上でHTML5関連コードを編集して実行できるプレイグラウンドを提供し、学びなが
| ＾＾ |秒刊SUNDAY｜HTML５のポテンシャルを存分に感じるFLASH越えのサンプル集48個
Appleをはじめ、最近脱FLASHの動きを見せており、FLASHクリエータとしても、今後どこに向かえばよいのかと、頭を悩ませる今日この頃ですが、そんな中、FLASHの代替方法として注目されているのがHTML５という技術なのです。もちろん、まだ普及するには時間がかかりますが、FLASHを超えるべくポテンシャルは存分に秘めており、WEB業界ではいつかFLASHがHTML５に抜かれてもおかしくは無いという空気になってきております。 ＜注意＞ これらサンプルはHTML5で作られております。HTML５が表示できないブラウザでは 閲覧ができませんので、ご注意ください。 HTML5についてはこちらを参考ください。 http://www.html5.jp/ ということで早速サンプルの紹介をします。 音が出るものもありますのでご注意ください。 Audioburst Animation音と、ドットが同調して
ASCII.jp：HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)
HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS
HTML 5では「article」タグでページの「本文」が取れる - モジログ
次世代HTMLの「HTML 5」について、そのウワサは以前から耳にしながらも、中身については知らなかった。 仕様や解説記事（末尾にまとめた）をいくつか流し読みしてみて、驚いた。これこそ、私の求めていたものだ。 私は以前より、Webページの「本文」がどこからどこまでなのか、ソフトウェアで判定できる標準的な方法があればいいとずっと思っていた（「フィードをアイテム単位に区切れば、セマンティック・ウェブが一気に現実化する」）。HTML 5では、いくつか導入される新しい要素（タグ）の中に「article」というものがあり、これがまさに「記事」の範囲を示すものなのだ。 これさえあれば、プログラム的にWebページを取得して、その「article」タグの部分だけ抽出すれば「本文」になる。あらゆるWebページにこの「article」タグが入ってくれば、もうフィードに頼る必要もなく、どんなページの「本文」でも
buzzword update: [雑談] HTML5に関する書籍がいくつか出ました
2010年2月24日水曜日 [雑談] HTML5に関する書籍がいくつか出ました Author: bon | at:1:44 | Category : 雑談 | 色々なところで話題になっているHTML5ですが、解説本がいくつか出版されました。 徹底解説HTML5マークアップガイドブック 羽田野太巳 HTML5&API入門 白石 俊平 白石さんと羽田野さんはどちらもHTML5に関するGoogle API Expertの方ですので内容も期待できそうです。 API Expert http://sites.google.com/site/devreljp/Home/api-expert いい書籍などが出て、利用できる環境が整えば一気に普及しそうですね。 なお洋書ですけどオライリーからも近く出版されるようです。 Html 5: Up and Running (ペーパーバック) Mark Pilgri
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
HTML5に関するW3Cのスライドをリデザイン
先日、Twitter経由で「Web標準化 (W3C) とHTML5の状況 (PDF形式)」というスライドが総務省のWebサイトで公開されているのを知りました。早い時期から国に働きかけているのだなと関心しましたし、どのような内容を紹介しているのだろうと興味があったので早速ダウンロードしてみました。HTML5 の概要をコンパクトにまとめている点は良かったのですが、プレゼンのスライドとしての質はあまり高いものではない内容でした（一番最後のページに「ありがとうございました」と書いてあるのでスライドの可能性大）。 W3Cに携わる教授という視点だと考えられなくはない内容なのですが、国の方（もしくは IT プロフェッショナルではない方）に向ける内容ではない気がしました。せっかくHTML5を多くの方に知ってもらうという素晴らしい機会があってもこれではどうかなと私は思いました。以下が私が気付いた課題点です。
kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
Opera News
Desktop, web3 Opera adds Crypto Browser features to its flagship desktop and mobile browsers and delists the... February 29th, 2024 On March 14th we will no longer be supporting updates for the dedicated Crypto Browser, as its core features have... Gaming, Opera GX Pimp your smartphone with GX Mods, now available in Opera GX on Android and iOS February 8th, 2024 Transform the look and feel of your
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
IDEA * IDEA
http://www.designwalker.com/2009/11/html5.html
