![html5-memo.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/d12de8a8dfaa8f89583d686f8d6c6e86212df81e/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2012%2F08%2FA86.jpg)
HTML5の周辺技術とは HTML5には、以下の図にあるように、Canvasなどのユーザーインタフェースに関係する仕様から、Web Storageなどのデータに関係した仕様まで、かなり広範な仕様が含まれています。そうした様々な技術により、HTML5は優れたアプリケーションプラットフォームとしても位置づけられるようになりました。 しかし、図の下方に記したように、HTML5には含まれていないものの、HTML5と同時期に多くのWebブラウザでサポートされた有用な技術もあります。本連載では、HTML5の周辺技術といっても良いそうした技術の中から、主にCSS3とSVGに注目していきます(*)。 (*)どこまでがHTML5の機能で、どこからが周辺技術か、という区切りは厳密には付けづらいところです。今回扱うCSS3やSVGもひっくるめて広義のHTML5である、という扱い方もできるかと思います。 CSS3
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
CSSのプロパティ一つに対して、値を二つ(開始と終了)変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 LeaVerou / animatable デモページ [ad#ad-2] デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。 全部同時にアニメーションすると、何がなにやら分からない状態にw [ad#ad-2] 下記に数多くあるデモから、いくつか紹介します。 デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
地味に便利かなと思ったのでシェア。 HTML5やCSS3の概要、このタグで 何が出来るのか、等の情報を1ページ に詰め込んであり、mozillaのドキュメント ページにサクッと飛べるようにしてあり ますので、大雑把ですけどチートシート 的に使えそうです。 その場でデモも確認出来るものもあるので今まで興味がなかった方も興味が出るかも。 mozillaのデモの1つでHTML5の概要を簡単に教えてくれるコンテンツです。 大まかですけど主要な情報が詰まってる印象なのでHTML5やCSS3の簡易的なチートシートになりそう。 マウスを乗せるとHTML5製のビデオが出てきたり。 CSS3もあります。 JavaScriptはHTML5では必須になりそうですね・・ githubで公開されているのでダウンロードしてローカルで確認も可能です。まだcss3やHTML5に興味がわかない、という方に見せてみると興味湧
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識~活用まで カテゴリ: CSS3 HTML HTMLとCSS タグ:CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ(@CROO1379)が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
Internet Explorer 9正式版のHTML5/CSS3/SVG対応:特集:Web制作者&開発者のためのIE9概説(後編)(1/3 ページ) 連載目次 前編に引き続き、Internet Explorer 9(以降、IE9)正式版の新機能について解説する。後編である今回は、IE9の主要なHTML5/CSS3/SVG対応機能を紹介する。 ■4. HTML5対応 最近、HTML5への注目度が高まっている。2011年6月に米国で行われた「次期Windows 8(コード名)プレビュー・イベント」で、「“HTML5”で記述できるWindowsネイティブ・アプリケーション」(まだ詳細は不明)という新しいアプリケーション種別が登場することが発表されたことからも、その勢いは増すばかりだ。特にグーグルが強力に推進している印象のあるHTML5だが、マイクロソフト技術系である.NET開発者も大きな関心と
はじめに jQuery UIは、ドラッグアンドドロップ、カレンダー、スライダーなどを始め、さまざまなユーザインターフェースを簡単に実装することができるようになるjQueryのライブラリです。ユーザインターフェースに関係する機能がたくさん含まれたjQueryのプラグインと思ってもらえばわかりやすいかと思います。 jQuery UIはたくさんの機能を提供するので、機能が全部入ったスクリプトのファイルはかなりの容量になります(現時点での最新版である1.8.14の圧縮版で約210KB)。すべての機能を使うということはほとんどないので、jQuery UIは使用する機能だけ選択してダウンロードできるカスタムダウンロードを提供しています。 http://jqueryui.com/download 今回jsdo.itで使うサンプルのコードは全部入りのjQuery UIを使いますが、実際に使う場合はカス
CSS3アニメーション(Transition)で、画面の動きが終了した後,にjQuery を実行する jQuery.bind でアニメーションの終了イベントを登録する bind で登録できちゃうんですよ $("#id_are").bind("webkitTransitionEnd",function(){ $("#id_are").text("アニメ終了") }); addEventListerでやりますが、bind / unbind が addEventLister / removeEventLister の代替だから、コレで動いちゃったりする。 CSS3のアニメーションonEnd 的な終了イベントは webkitTransitionEndです。 アニメーションの連鎖をする $("#id_are").bind("webkitTransitionEnd",function(){ $("#i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く