canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
そのHTML5のタグは合ってますか？間違えやすいタグ15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ <dt>,<df
HTML5のSEO－マークアップで注意すべき３つのポイント
HTML5を採用したWebサイト構築をする際に、SEOはどのようなポイントを考慮すべきなのか？ HTML5でのマークアップ、リッチ表現、SEO効果のあるh要素の使い方、HTML5で追加・削除・復活された要素などについて解説します。 HTML5化によるSEO効果の影響はあるか WebサイトをHTML5でマークアップをする際、特にHTML4などからHTML5にリニューアルする場合に、それによって検索エンジンによる評価が変化するのかどうかは非常に気になる問題です。 各検索エンジンでは、この疑問について公式に説明しています。GoogleはHTML5化することでプラスにもマイナスにもならないと度々公式に言及していますし、Bingは「List of things you really ought to know as an SEO today(今SEOとして本当に知っておきたいこと)」と題した記事の中
meta 要素に対する Microdata の指定
meta 要素に対する Microdata の指定について、過去に書いた記事に間違いがあったので修正とその解説。また、itemprop 属性もつ meta 要素や link 要素の body 要素内での使い方に関しても解説してみます。 もうちょっと早く書こうと思ったんですけどこんなに間が空くとは…… 去年の末、HTML5 Advent Calendar 2012 の記事として、「Microdata を使ってみよう。サンプルソースで学ぶ Microdata」 を書いたんですが、その中で 2箇所ほどサンプルソースに間違いがあるのをご指摘頂いて修正したんですね （ご指摘感謝です）。 そのうち、1つの間違いは単純な記述抜けというか、ミスだったんで置いといて、もう1つ、私が meta 要素に対して itemprop 属性を指定したサンプルで、同じ要素に name 属性をあわせて指定してたのをご指摘頂
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
なぜ HTML5 を使うのかを考えよう | Yomotsu net
Web 制作の現場にも HTML5 が浸透し始めてきました。では、なぜ HTML5 を使わなければならないのかを考えてみましょう。 なぜ HTML5 が求められるのか最近、Web を取り巻く環境は多様化し、プラグインをサポートしていない Web ブラウザーの普及、画面サイズの多様化、Web アプリケーション構築など、従来の Web ページには求められなかった様々なケースへの対応が必要になりつつあります。 こうした、従来の Web ページにはなかった特性を実現するためには新しい技術が必要になります。これが HTML5 やその周辺技術というわけです。当然ながら新しい技術なので、古いブラウザーはこれらに対応していません。 Web ブラウザーは家庭用ゲーム機と似ている世代ごとの Web ブラウザーはゲーム機に例えるとわかりやすいでしょう。 現在、私たちは家庭用ゲーム機で高度なグラフィクスのゲームソ
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
html5のlocalStorageで複数のデータを保存するには? - Web.fla
以前、localStorageのデータを保存する方法について記事を書きましたが、localStorageが保存できるデータは一つではなく複数のデータを保存する事もできます。 で、前回はキーに対してデータを一つだけ保存したのですが、今回は複数のデータを保存する方法として複数のデータをJSONデータとして扱えば可能になります。その方法を今回は紹介してみたいと思います。 前回のlocalStorageに保存する方法などはこちら「html5のwebStorage(localStorage)でデータを保存する」を参照してください。 localStorageを使った実際のコード 下記のプログラムは分かりやすくするために省略している。 //保存する処理 savebtn.addEventListener("click", function() { //入力されたデータを取得 var t = documen
HTML5のcontenteditable属性でコンテンツを編集→localStorageを使用して保存、の流れをjQueryで出来るようにする。みたいなやつ
たまたま勉強中だった時に見かけたTips。 個人的なメモです。HTML5には、IEで採用 されていたcontenteditable属性が追加され、 ページ内を編集することが出来ます。更に、 localStorageを使って編集状態を保存できる んですが、この処理的なものをjQueryで 行う、みたいな方法です。 僕自身はまだ使う機会は無さそうなんですが、ちょっと面白かったのでメモ的に。技術的な話はリファレンスでご確認下さい。 contenteditableとlocalStorageまず、contenteditableとlocalStorageに関してどういうものか、なんですが、僕も大して理解してないんですけど、大雑把に言うと、ユーザーが閲覧中のページを編集、保存できる、というもの。 contenteditableはIEですでに実装されていた属性なのでHTML5で新たに追加、というものではあ
theshodo - Bing
FUNCTION LIMITED. Get the best experience with Internet Explorer 10. Beauty of the Web for Upgrading to Internet Explorer. JavaScript is …
Yamada Program: CanvasとjQueryを使って図形をドラッグ
2011/09/24 CanvasとjQueryを使って図形をドラッグ 現在、HTMLやらJavaSvriptやらを勉強中。 HTML5の「Canvas」と「jQuery」と「jQuery UI」を使って、図形をドラッグする処理を実装してみました。 jQueryはバージョン1.6.4を使用。 jQuery UIはバージョン1.8を使用。 サンプルの概要 「四角」をクリックすると、四角形が追加される。 「楕円」をクリックすると、楕円形が追加される。 テキストボックスにテキストを入力すれば、図形の中にそのテキストが描画される。 追加された要素はドラッグして移動できる。 ドラッグして移動できるのはグレーのエリア内のみ。 ※HTML5に対応するブラウザでないと動作しません。 ※iOSのSafari及びAndroid標準ブラウザでは、描画は出来ますがドラッグ操作ができません。 （And
キーボードから入力した文字をcanvasに描画する - jsdo.it - Share JavaScript, HTML5 and CSS
// // Utilities // // 本題ではないので読み飛ばしてOKです. // /** * 引数に渡した値を文字列にして返します. */ function tostring(obj) { if (typeof obj == 'undefined') { return '<undefined>'; } else if (typeof obj == 'null') { return '<null>'; } else if (typeof obj == 'object') { var text = ""; for (var name in obj) { if (text != "") { text += ", "; } else { text += "{"; } text += name + ":" + tostring(obj[name]); } text = text + "}";
forked: キーボードから入力した文字をcanvasに描画する - jsdo.it - Share JavaScript, HTML5 and CSS
元のいい所がほとんど残っていないっす。。 キーボードから入力した文字をキャンバスへ追加ドラッグ＆ドロップと角度をつけられるようにしました。 // forked from mumoshu's "キーボードから入力した文字をcanvasに描画する" http://jsdo.it/mumoshu/n318 var currentTarget = 0;//角度を入力するべきターゲット var font = "20pt Arial"; var objArr = [];//文字情報保存のarr /** * 引数に渡した値を文字列にして返します. */ function tostring(obj) { if (typeof obj == 'undefined') { return '<undefined>'; } else if (typeof obj == 'null') { return '<nul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
BirdLab | php研究所
contentEditable - jsdo.it - Share JavaScript, HTML5 and CSS
HTML5 Global contenteditable Attribute
contenteditable=contenteditable - コンテンツの編集許可 - とほほのWWW入門
re-dzine.net situs togel online toto 2023 -
localStorageで複数データを登録するサンプル - jsdo.it - Share JavaScript, HTML5 and CSS